diff options
| -rw-r--r-- | public/assets/css/bucky.css | 14 | ||||
| -rw-r--r-- | public/assets/js/lib/views/details/comments.js | 1 | ||||
| -rw-r--r-- | public/assets/js/lib/views/details/files.js | 9 | ||||
| -rw-r--r-- | public/assets/js/lib/views/details/gallery.js | 47 | ||||
| -rw-r--r-- | public/assets/js/lib/views/details/index.js | 2 | ||||
| -rw-r--r-- | public/assets/js/util/format.js | 24 | ||||
| -rw-r--r-- | views/pages/details.ejs | 8 | ||||
| -rw-r--r-- | views/partials/scripts.ejs | 1 |
8 files changed, 96 insertions, 10 deletions
diff --git a/public/assets/css/bucky.css b/public/assets/css/bucky.css index 787d209..4d79da3 100644 --- a/public/assets/css/bucky.css +++ b/public/assets/css/bucky.css @@ -247,6 +247,9 @@ tr:nth-child(even) td.black:hover { background-color: #f8f8f8; color: #000000; display: inline-block; text-align: left; } +#details .right { + max-width: 50vw; +} #comments, #comments tr { margin: 0; padding: 0; @@ -263,6 +266,7 @@ tr:nth-child(even) td.black:hover { background-color: #f8f8f8; color: #000000; padding: 0 3px 3px 0; text-align: center; font-size: 11px; + vertical-align: top; } #comments tr .user img { border: 1px solid; @@ -274,7 +278,6 @@ tr:nth-child(even) td.black:hover { background-color: #f8f8f8; color: #000000; font-size: 12px; padding-top: 3px; padding-bottom: 20px; - min-width: 400px; } .comment .date { float: right; @@ -313,6 +316,15 @@ tr:nth-child(odd) td.comment { background-color: #fcf8f8; } content: "> "; } +#gallery { + width: 100%; +} +#gallery div { + display: inline-block; + text-align: center; + padding: 0 0 12px 0; +} + @media (max-width: 1024px) { .threads td:nth-child(3) small { display: none; diff --git a/public/assets/js/lib/views/details/comments.js b/public/assets/js/lib/views/details/comments.js index 819daba..4bd2eb7 100644 --- a/public/assets/js/lib/views/details/comments.js +++ b/public/assets/js/lib/views/details/comments.js @@ -17,6 +17,7 @@ var CommentsView = FormView.extend({ }, parse: function(comment){ + if (! comment.comment.length) return "" var datetime = verbose_date(comment.date, true) var t = this.template.replace(/{{username}}/g, comment.username) .replace(/{{comment}}/g, tidy_urls(comment.comment)) diff --git a/public/assets/js/lib/views/details/files.js b/public/assets/js/lib/views/details/files.js index 399d8a7..295b26c 100644 --- a/public/assets/js/lib/views/details/files.js +++ b/public/assets/js/lib/views/details/files.js @@ -18,6 +18,9 @@ var FilesView = FormView.extend({ } var total = 0, has_music = false files.forEach(function(file){ + if (is_image(file.filename)) { + return + } this.appendFile(file) total += file.size has_music = has_music || file.filename.match(/(mp3|wav|ogg)/i) @@ -37,11 +40,7 @@ var FilesView = FormView.extend({ 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 link = make_link(file) var t = this.template.replace(/{{username}}/g, file.username) .replace(/{{link}}/g, link) diff --git a/public/assets/js/lib/views/details/gallery.js b/public/assets/js/lib/views/details/gallery.js new file mode 100644 index 0000000..da6e97f --- /dev/null +++ b/public/assets/js/lib/views/details/gallery.js @@ -0,0 +1,47 @@ +var GalleryView = View.extend({ + + el: "#gallery", + + events: { + }, + + initialize: function(){ + this.__super__.initialize.call(this) + this.template = this.$(".template").html() + }, + + load: function(files){ + if (! files.length) { + this.$el.hide() + } + files.forEach(function(file){ + if (! is_image(file.filename)) { + return + } + this.appendFile(file) + }.bind(this)) + }, + + parse: function(file){ + var age = get_age(file.date) + var link = make_link(file) + var thumb = make_thumb(file) + + var t = this.template.replace(/{{username}}/g, file.username) + .replace(/{{thumb}}/g, thumb) + .replace(/{{link}}/g, link) + .replace(/{{age}}/g, age) + return t + }, + + prependFile: function(file){ + var $el = $( this.parse(file) ) + this.$el.prepend($el) + }, + + appendFile: function(file){ + var $el = $( this.parse(file) ) + this.$el.append($el) + }, + +})
\ No newline at end of file diff --git a/public/assets/js/lib/views/details/index.js b/public/assets/js/lib/views/details/index.js index e2adb55..d7fb26f 100644 --- a/public/assets/js/lib/views/details/index.js +++ b/public/assets/js/lib/views/details/index.js @@ -8,6 +8,7 @@ var DetailsView = View.extend({ initialize: function(opt){ this.comments = new CommentsView ({ parent: this }) this.files = new FilesView ({ parent: this }) + this.gallery = new GalleryView ({ parent: this }) }, load: function(id){ @@ -19,6 +20,7 @@ var DetailsView = View.extend({ $("h1").html(data.thread.title) this.comments.load(data.comments) this.files.load(data.files) + this.gallery.load(data.files) }, success: function(){ diff --git a/public/assets/js/util/format.js b/public/assets/js/util/format.js index 272efaf..a5891ff 100644 --- a/public/assets/js/util/format.js +++ b/public/assets/js/util/format.js @@ -177,14 +177,14 @@ function tidy_urls (s, short_urls) { return line } return line.replace(/https?:\/\/[^ ]+/g, function(url){ - if (url.match(/(gif|jpe?g|png)\?.*$/) { + if (is_image(url)) { return '<a href="' + url + '" target="_blank"><img src="' + url + '"></a>' } else if (short_urls) { return '<a href="' + url + '" target="_blank">[' + get_domain(url) + ']</a>' } else { - return '<a href="' + url + '" target="_blank">' + str + '</a>' + return '<a href="' + url + '" target="_blank">' + url + '</a>' } }); @@ -193,4 +193,24 @@ function tidy_urls (s, short_urls) { } function get_domain(url){ return url.replace(/https?:\/\//,"").replace(/\/.*/,"").replace(/www\./, "") +} +function is_image(url){ + return !! url.match(/(gif|jpe?g|png)\??.*$/i) +} +function make_link(file){ + if (file.filename.indexOf("http") !== 0) { + return "//carbonpictures.com/bucky/data/" + file.thread + "/" + file.filename + } + else { + return file.filename + } +} +function make_thumb(file){ + if (file.filename.indexOf("http") !== 0) { + return "//carbonpictures.com/bucky/data/" + file.thread + "/.thumb/t." + file.filename.toLowerCase() + } + else { + var partz = file.filename.toLowerCase().split("/") + return partz.splice(partz.length-2, 0, ".thumb").join("/") + } }
\ No newline at end of file diff --git a/views/pages/details.ejs b/views/pages/details.ejs index 05c9424..113ff53 100644 --- a/views/pages/details.ejs +++ b/views/pages/details.ejs @@ -5,7 +5,7 @@ <div id="details_rapper"> <div id="details"> <div class="left"> - <table id="comments"> + <table id="comments" width="450"> <script class="template" type="text/html"> <tr> <td class="user"> @@ -31,8 +31,12 @@ </div> <div class="right"> - <div class="gallery"> + <div id="gallery"> <script class="template" type="text/html"> + <div> + <a href="{{link}}"><img src="{{thumb}}"></a> + <br>(<a href="/profile/{{username}}">{{username}}</a>, {{age}}) + </div> </script> </div> <div id="audio"></div> diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index ba55d74..b773598 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -23,5 +23,6 @@ <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/lib/views/details/gallery.js"></script> <script src="/assets/js/index.js"></script> |