diff options
Diffstat (limited to 'public/assets/js')
| -rw-r--r-- | public/assets/js/lib/views/stream/hootstream.js | 82 | ||||
| -rw-r--r-- | public/assets/js/util/format.js | 52 |
2 files changed, 70 insertions, 64 deletions
diff --git a/public/assets/js/lib/views/stream/hootstream.js b/public/assets/js/lib/views/stream/hootstream.js index f748417..f4e48c4 100644 --- a/public/assets/js/lib/views/stream/hootstream.js +++ b/public/assets/js/lib/views/stream/hootstream.js @@ -7,6 +7,7 @@ var HootStream = View.extend({ this.parent = parent; this.$hootevents = this.$("#hootevents"); this.hootTemplate = this.$(".hootTemplate").html(); + this.threadTemplate = this.$(".threadTemplate").html(); this.lastlogTemplate = this.$(".lastlogTemplate").html(); this.fileTemplate = this.$(".fileTemplate").html(); }, @@ -64,16 +65,20 @@ var HootStream = View.extend({ hidden, className, showAvatar, + template, + ...options }) { - console.log(hoot, comment); - return this.render(this.hootTemplate, { + // console.log(hoot, comment); + return this.render(template || this.hootTemplate, { username, className: className ? `hoot ${className}` : "hoot", image: profile_image(username), showAvatar: showAvatar === false ? 0 : 1, - hoot: hoot || tidy_urls(comment, true), + hoot: + hoot || "<div class='hootText'>" + tidy_urls(comment, true) + "</div>", age: get_age(date), age_opacity: get_age_opacity(date), + ...options, }); }, @@ -88,45 +93,34 @@ var HootStream = View.extend({ renderThread: function ({ thread, comments, files, images }) { thread = thread.shift(); // console.log(thread, comments, files, images); - const postedToday = +new Date() / 1000 - thread.date < 86400; - - if (postedToday) { - return [ - "<div class='divider dark'></div>", - this.renderHoot({ - hoot: `<a class="threadLink" href="/details/${thread.id}">${thread.title}</a>`, - username: thread.username, - className: "isRecent", - date: thread.lastmodified, - ...this.renderFiles(files), - ...this.renderHoots({ - hoots: comments.slice(0, 1), - tag: "first_post", - }), - ...this.renderHoots({ hoots: comments.slice(1) }), - }), - "<div class='divider'></div>", - ]; - // display very proud headline - // title, avatar, first image, full file list, - } else { - return [ - "<div class='divider dark'></div>", - this.renderHoot({ - hoot: `<a class="threadLink" href="/details/${thread.id}">${thread.title}</a>`, - username: thread.username, - className: "", - date: thread.lastmodified, - }), - this.renderFiles(files.slice(0, 10)), - ...this.renderHoots({ hoots: comments.slice(0, 1), tag: "first_post" }), - ...this.renderHoots({ hoots: comments.slice(1).slice(-5) }), - "<div class='divider'></div>", - ]; - // say "in ... " - // audio player OR recent file list - // recent 3 comments - } + const postedToday = +new Date() / 1000 - thread.lastmodified < 86400; + const age_opacity = get_age_opacity(thread.lastmodified); + return [ + "<div class='divider dark'></div>", + this.renderHoot({ + template: this.threadTemplate, + hoot: `<a class="threadLink" href="/details/${thread.id}">${thread.title}</a>`, + keyword_link: thread.keyword + ? `<a class="keywordLink" href="/stream/${thread.keyword}">${thread.keyword}</a>` + : "", + username: thread.username, + className: postedToday ? "isRecent" : "", + date: thread.lastmodified, + file_count: `${files.length || 0} f.`, + file_opacity: age_opacity * get_size_opacity(files.length), + comment_count: `${comments.length || 0} c.`, + comment_opacity: age_opacity * get_size_opacity(files.length), + }), + this.renderFiles(postedToday ? files : files.slice(0, 10)), + ...this.renderHoots({ hoots: comments.slice(0, 1), tag: "first_post" }), + ...this.renderHoots({ + hoots: postedToday ? comments.slice(1) : comments.slice(1).slice(-5), + }), + "<div class='divider'></div>", + ]; + // say "in ... " + // audio player OR recent file list + // recent 3 comments }, renderFiles: function (files) { @@ -154,9 +148,9 @@ var HootStream = View.extend({ age: get_age(file.date), age_opacity: get_age_opacity(file.date), date_class, - // date: datetime[0], + date: datetime[0], // time: datetime[1], - size_class: size[0], + // size_class: size[0], size: size[1], }); }, diff --git a/public/assets/js/util/format.js b/public/assets/js/util/format.js index e6104e5..7058cea 100644 --- a/public/assets/js/util/format.js +++ b/public/assets/js/util/format.js @@ -257,28 +257,40 @@ function get_age(t, long) { age /= 12; return r(age) + (long ? " years" : "y"); } -const ages = { - newest: 60 * 10, - newer: 60 * 60, - new: 60 * 60 * 8, - cool: 60 * 60 * 24, - cold: 60 * 60 * 24 * 7, - colder: 60 * 60 * 24 * 7 * 4, - coldest: 60 * 60 * 24 * 7 * 4 * 12, -}; +const age_scale = [ + [0, 1.0], + [60 * 10, 1.0], + [60 * 60, 0.95], + [60 * 60 * 8, 0.9], + [60 * 60 * 24, 0.85], + [60 * 60 * 24 * 7, 0.65], + [60 * 60 * 24 * 7 * 4, 0.55], + [60 * 60 * 24 * 7 * 4 * 12, 0.5], +]; function get_age_opacity(t) { var age = Math.abs(Date.now() / 1000 - t); - if (age < ages.newest) return 1; - if (age < ages.newer) - return lerp(norm(age, ages.newest, ages.newer), 1.0, 0.95); - if (age < ages.new) return lerp(norm(age, ages.newer, ages.new), 0.95, 0.9); - if (age < ages.cool) return lerp(norm(age, ages.new, ages.cool), 0.9, 0.85); - if (age < ages.cold) return lerp(norm(age, ages.cool, ages.cold), 0.85, 0.6); - if (age < ages.colder) - return lerp(norm(age, ages.cold, ages.colder), 0.6, 0.5); - if (age < ages.coldest) - return lerp(norm(age, ages.colder, ages.coldest), 0.5, 0.4); - return 0.39; + return get_scale_opacity(age, age_scale); +} +const size_scale = [ + [0, 0.0], + [1, 0.7], + [5, 0.8], + [10, 0.9], + [15, 0.95], + [20, 0.99], +]; +function get_size_opacity(n) { + return get_scale_opacity(n, size_scale); +} +function get_scale_opacity(value, scale) { + for (let i = 1; i < scale.length; i++) { + const [max_value, max_lerp] = scale[i]; + if (value < max_value) { + const [min_value, min_lerp] = scale[i - 1]; + return lerp(norm(value, min_value, max_value), min_lerp, max_lerp); + } + } + return scale[scale.length - 1][1]; } function tidy_urls(s, short_urls) { |