diff options
| -rw-r--r-- | public/assets/css/bucky.css | 14 | ||||
| -rw-r--r-- | public/assets/js/index.js | 1 | ||||
| -rw-r--r-- | public/assets/js/lib/views/details/audio.js | 69 | ||||
| -rw-r--r-- | public/assets/js/lib/views/details/comments.js | 13 | ||||
| -rw-r--r-- | public/assets/js/lib/views/details/files.js | 25 | ||||
| -rw-r--r-- | views/pages/details.ejs | 6 | ||||
| -rw-r--r-- | views/partials/scripts.ejs | 5 |
7 files changed, 115 insertions, 18 deletions
diff --git a/public/assets/css/bucky.css b/public/assets/css/bucky.css index ed66d90..201e2d4 100644 --- a/public/assets/css/bucky.css +++ b/public/assets/css/bucky.css @@ -237,19 +237,21 @@ tr:nth-child(even) td.black:hover { background-color: #f8f8f8; color: #000000; border-spacing: 0; } .comment { - padding: 4px 6px 8px 6px; + padding: 8px 8px 8px 8px; border-bottom: 1px solid #ccc; border-left: 1px solid #ccc; border-right: 1px solid #ccc; } -tr .user { - padding: 4px; +#comments tr .user { + margin: 0; + padding: 0 3px 3px 0; text-align: center; + font-size: 11px; } -tr .user img { +#comments tr .user img { border: 1px solid; } -tr:first-child .comment { +#comments tr:first-child .comment { border-top: 1px solid #ccc; } .comment div { @@ -288,4 +290,4 @@ tr:nth-child(odd) td.comment { background-color: #fcf8f8; } #files .total td { text-align: right; border-top: 1px dotted #888; -}
\ No newline at end of file +} diff --git a/public/assets/js/index.js b/public/assets/js/index.js index 6111b4e..8f1a059 100644 --- a/public/assets/js/index.js +++ b/public/assets/js/index.js @@ -10,6 +10,7 @@ var app = (function(){ } app.focused = true + app.typing = false app.focus = function(){ app.focused = true diff --git a/public/assets/js/lib/views/details/audio.js b/public/assets/js/lib/views/details/audio.js new file mode 100644 index 0000000..6a8f5ed --- /dev/null +++ b/public/assets/js/lib/views/details/audio.js @@ -0,0 +1,69 @@ +var audio = (function(){ + var audio = {} + + var el, music = [], current_index = -1 + var links, comment, parent + + audio.init = function () { + links = document.querySelectorAll("a") + comment = document.querySelector("#comment") + parent = document.querySelector("#audio") + + Array.prototype.slice.apply(links).forEach(function(url){ + if (! url.href.match(/(mp3|wav|ogg)/)) return + url.dataset.index = music.length + music.push(url) + }) + audio.build() + } + audio.build = function () { + el = document.createElement("audio") + el.setAttribute("controls", true) + el.addEventListener("ended", audio.next) + el.src = music[0] + parent.appendChild(el) + document.body.addEventListener("keydown", audio.keydown) + } + audio.destroy = function () { + el.pause() + el = null + parent.removeChild(el) + document.body.removeEventListener("keydown", audio.keydown) + } + audio.play = function (index) { + current_index = (parseInt(index) + music.length) % music.length + el.src = music[current_index].href + el.play() + var playing = document.querySelector(".playing") + if (playing) playing.classList.remove("playing") + music[current_index].classList.add("playing") + } + audio.prev = function (){ + audio.play(current_index - 1) + } + audio.next = function (){ + audio.play(current_index + 1) + } + audio.toggle = function (){ + if (el.paused) el.play() + else el.pause() + } + audio.keydown = function(e){ + if (app.typing || e.ctrlKey || e.altKey || e.metaKey || e.shiftKey) return + switch (e.keyCode) { + case 37: // left + audio.prev() + break; + case 39: // right + audio.next() + break; + case 32: // spacebar + e.preventDefault() + audio.toggle() + break; + } + } + + return audio + +})()
\ No newline at end of file diff --git a/public/assets/js/lib/views/details/comments.js b/public/assets/js/lib/views/details/comments.js index 399c90d..819daba 100644 --- a/public/assets/js/lib/views/details/comments.js +++ b/public/assets/js/lib/views/details/comments.js @@ -3,6 +3,8 @@ var CommentsView = FormView.extend({ el: "#comments", events: { + "focus textarea": "focus", + "blur textarea": "blur", }, initialize: function(){ @@ -35,5 +37,14 @@ var CommentsView = FormView.extend({ success: function(){ this.prependComment(comment) - } + }, + + focus: function(){ + app.typing = true + }, + + blur: function(){ + app.typing = false + }, + })
\ No newline at end of file diff --git a/public/assets/js/lib/views/details/files.js b/public/assets/js/lib/views/details/files.js index b19cf3c..399d8a7 100644 --- a/public/assets/js/lib/views/details/files.js +++ b/public/assets/js/lib/views/details/files.js @@ -3,6 +3,7 @@ var FilesView = FormView.extend({ el: "#files", events: { + "click .file": "pick", }, initialize: function(){ @@ -15,25 +16,35 @@ var FilesView = FormView.extend({ if (! files.length) { this.$el.hide() } - var total = 0 + var total = 0, has_music = false files.forEach(function(file){ this.appendFile(file) total += file.size + has_music = has_music || file.filename.match(/(mp3|wav|ogg)/i) }.bind(this)) var size = hush_size(total) var t = this.templateTotal.replace(/{{size_class}}/g, size[0]) .replace(/{{size}}/g, size[1]) this.$el.append(t) + + if (has_music) { + audio.init() + } }, parse: function(file){ var size = hush_size(file.size) var datetime = verbose_date(file.date, true) var date_class = carbon_date(file.date) + + var link = file.filename + if (link.indexOf("http") !== 0) { + link = "//carbonpictures.com/bucky/data/" + file.thread + "/" + file.filename + } var t = this.template.replace(/{{username}}/g, file.username) - .replace(/{{link}}/g, file.filename) + .replace(/{{link}}/g, link) .replace(/{{filename}}/g, file.filename) .replace(/{{date_class}}/g, date_class) .replace(/{{date}}/g, datetime[0]) @@ -53,7 +64,11 @@ var FilesView = FormView.extend({ this.$el.append($el) }, - success: function(){ - this.prependFile(file) - } + pick: function(e){ + if (e.ctrlKey || e.altKey || e.metaKey || e.shiftKey) return + if (! e.target.href.match(/(mp3|wav|ogg)/i)) return + e.preventDefault() + audio.play( e.target.dataset.index ) + }, + })
\ No newline at end of file diff --git a/views/pages/details.ejs b/views/pages/details.ejs index daa028b..4dc8e21 100644 --- a/views/pages/details.ejs +++ b/views/pages/details.ejs @@ -7,7 +7,7 @@ <script class="template" type="text/html"> <tr> <td class="user"> - <a href="/profile/{{username}}"><img src="//www.carbonpictures.com/bucky/data/profile/.thumb/al.{{username}}.jpg"></a> + <a href="/profile/{{username}}"><img src="//www.carbonpictures.com/bucky/data/profile/.thumb/al.{{username}}.jpg"></a><br> <a href="/profile/{{username}}">{{username}}</a> </td> <td colspan="2" class="comment"> @@ -27,11 +27,13 @@ </script> </table> + <div id="audio"></div> + <table id="files"> <script class="template" type="text/html"> <tr class="row"> <td> - <a href="{{link}}">{{filename}}</a> + <a href="{{link}}" class="file">{{filename}}</a> </td> <td class="{{date_class}}"> {{date}} diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index d02ca8d..ba55d74 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -20,11 +20,8 @@ <script src="/assets/js/lib/views/index/threadbox.js"></script> <script src="/assets/js/lib/views/details/index.js"></script> +<script src="/assets/js/lib/views/details/audio.js"></script> <script src="/assets/js/lib/views/details/comments.js"></script> <script src="/assets/js/lib/views/details/files.js"></script> <script src="/assets/js/index.js"></script> - -<!-- -<script type="text/javascript" src="http://www.youtube.com/player_api"></script> - --> |