From 5ebf38bfbf0965f5708fcc4afad721365c2b70dc Mon Sep 17 00:00:00 2001 From: Eemeli Aro Date: Sun, 5 Oct 2014 17:44:19 +0300 Subject: [PATCH] moved people ranges to sub-menu + general code cleanup --- i18n/en.json | 3 -- i18n/fi.json | 3 -- i18n/sv.json | 3 -- index.html | 9 ++-- skin/head.less | 21 ++++++++ skin/main.less | 1 - skin/next.less | 37 -------------- skin/part.less | 15 ++++-- skin/prog.less | 20 -------- src/item.js | 9 ++-- src/part.js | 135 ++++++++++++++++++++----------------------------- src/prog.js | 36 +++++-------- 12 files changed, 109 insertions(+), 183 deletions(-) delete mode 100644 skin/next.less diff --git a/i18n/en.json b/i18n/en.json index 86c1928..ea3b2fa 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -8,13 +8,10 @@ "search_hint": "Hint: search is for full words in the item title, description, tags, location, and participants. You may use * and ? as wildcards and \"quoted words\" for exact phrases.", "search_example": "For example, you could try {X}", -"part_filter": "{T, select, first{All participants by first name} last{All participants by last name} other{All programme participants}}", "no_ko_id": "No ID set! Please assign konopas_set.id a unique identifier.", "old_browser": "Unfortunately, your browser doesn't support some of the Javascript features required by KonOpas. To use, please try a different browser.", "item_not_found": "Programme id {ID} not found!", "item_tags": "{T, select, tags{Tags} track{Track} type{Type} other{{T}}}", -"last_ended": "There last programme item ended {D, plural, =0{} one{one day and} other{# days and}} {H, plural, =0{} one{one hour and} other{# hours and}} {M, plural, one{one minute} other{# minutes}} ago.", -"next_start": "The next programme item starts in {D, plural, =0{} one{one day and} other{# days and}} {H, plural, =0{} one{one hour and} other{# hours and}} {M, plural, one{one minute} other{# minutes}}.", "star_export_this": "Your current selection is encoded in this page's URL, which you may open elsewhere to share your selection.", "star_export_share": "For easier sharing, you can also generate a shorter link or a QR code.", "star_import_this": "Your previously selected items are shown with a highlighted interior, while those imported via this link have a highlighted border.", diff --git a/i18n/fi.json b/i18n/fi.json index 179c1f5..9c6bcd6 100644 --- a/i18n/fi.json +++ b/i18n/fi.json @@ -21,13 +21,10 @@ "search_hint": "Vinkki: Haku etsii sanoja otsikosta, tiedoista, tägeistä, paikoista ja osanottajista. Voit käyttää * ja ? -merkkejä villikortteina ja \"sanoja lainausmerkeissä\" täsmälliseen hakuun.", "search_example": "Esimerkiksi voisit kokeilla {X}", -"part_filter": "{T, select, first{Kaikki osanottajat etunimen mukaan} last{Kaikki osanottajat sukunimen mukaan} other{Kaikki osanottajat}}", "no_ko_id": "Ei asetettua ID:tä. Aseta konopas_set.id uniikiksi tunnisteeksi.", "old_browser": "Selaimesi ei tue kaikkia KonOppaan tarvitsemia Javascript-ominaisuuksia. Ole hyvä ja kokeile toista selainta.", "item_not_found": "Ohjelmaa {ID} ei löydy!", "item_tags": "{T, select, tags{Tägit} track{Track} type{Tyyppi} other{{T}}}", -"last_ended": "Viimeinen ohjelma loppui {D, plural, =0{} one{päivä ja} other{# päivää ja}} {H, plural, =0{} one{tunti ja} other{# tuntia ja}} {M, plural, one{yksi minuutti} other{# minuuttia}} sitten.", -"next_start": "Seuraava ohjelma alkaa {D, plural, =0{} one{yhden päivän ja} other{# päivän ja}} {H, plural, =0{} one{yhden tunnin ja} other{# tunnin ja}} {M, plural, one{yhden minuutin} other{# minuutin}} kuluttua.", "star_export_this": "Valintasi ovat tallennettu sivun osoitteeseen. Voit avata sen toisaalla jakaaksesi valintasi.", "star_export_share": "Jakamisen helpottamiseksi voit myös generoida lyhytlinkin tai QR-koodin.", "star_import_this": "Aiemmin valitsemillasi ohjelmilla on korostettu tausta ja tämän linkin kautta tuoduilla on korostettu reuna.", diff --git a/i18n/sv.json b/i18n/sv.json index 0dd2b6f..90fe7cd 100644 --- a/i18n/sv.json +++ b/i18n/sv.json @@ -21,13 +21,10 @@ "search_hint": "Tips: sökning sker efter hela ord i programpunkternas titel, beskrivning, taggar, sal och deltagare. Det går att använda * och ? som jokertecken och \"citerade ord\" för exakta fraser.", "search_example": "Prova till exempel {X}", -"part_filter": "{T, select, first{Alla deltagare efter förnamn} last{Alla deltagare efter efternamn} other{Visa alla deltagare i programmet}}", "no_ko_id": "ID saknas! Ge konopas_set.id en unik identifierare.", "old_browser": "Tyvärr hanterar din webbläsare inte några av de JavaScript-funktioner som KonOpas behöver. Du behöver använda en annan webbläsare.", "item_not_found": "Hittade inte program-ID {ID}!", "item_tags": "{T, select, tags{Tags} track{Tracks} type{Types} other{{T}}}", -"last_ended": "There last program item ended {D, plural, =0{} one{one day and} other{# days and}} {H, plural, =0{} one{one hour and} other{# hours and}} {M, plural, one{one minute} other{# minutes}} ago.", -"next_start": "Nästa programpunkt börjar om {D, plural, =0{} one{one day and} other{# day and}} {H, plural, =0{} one{en timme och} other{# timmar och}} {M, plural, one{en minut} other{# minuter}}.", "star_export_this": "Dina aktuella stjärnmarkeringar är lagrade i adressen till denna sida, som du kan öppna på en annan plats och dela med dig av.", "star_export_share": "Dela enklare med en kortare länk eller en QR-kod.", "star_import_this": "Dina tidigare stjärnmarkerade punkter har ett markerat innanmäte, medan de som importerats via denna länk har en markerad kant.", diff --git a/index.html b/index.html index 455d021..9202d53 100644 --- a/index.html +++ b/index.html @@ -50,8 +50,8 @@

@@ -77,12 +77,11 @@

-
-
+
-
+
    diff --git a/skin/head.less b/skin/head.less index 7e1bb63..b4e51b5 100644 --- a/skin/head.less +++ b/skin/head.less @@ -66,6 +66,25 @@ border: @border-normal; } +.sub-side { + ul { margin: -3px 0 3px 0; font-size: 0.8em; font-weight: 400; } + li { border: none !important; padding: 3px 6px !important; } + li:after { content: " «"; } +} +.sub-narrow { + display: table; + width: 100%; + ul { display: table-row !important; margin-top: 20px !important; padding-left: 0; } + li { + display: table-cell; + text-align: center; + text-decoration: none; + padding: 6px; + cursor: pointer; + &:before { content: "» "; } + } +} + #refresh { display: none; } #refresh.enabled { display: inline-block; @@ -104,6 +123,7 @@ border-top-left-radius: @border-radius; border-top-right-radius: @border-radius; } + .sub-side { display: none !important; } } @media (min-width: 700px) { @@ -122,6 +142,7 @@ border-top-left-radius: @border-radius; border-bottom-left-radius: @border-radius; } + .sub-narrow { display: none !important; } #main { position: absolute; top: 0; left: (@page-margin + @side-width + @side-margin); right: 10px; } #main p { max-width: @main-width; } } diff --git a/skin/main.less b/skin/main.less index 40b5d85..0734e19 100644 --- a/skin/main.less +++ b/skin/main.less @@ -160,7 +160,6 @@ ul.popup, .popup ul { .view { display: none; } -@import "next.less"; @import "star.less"; @import "prog.less"; @import "part.less"; diff --git a/skin/next.less b/skin/next.less deleted file mode 100644 index 4dd5f5a..0000000 --- a/skin/next.less +++ /dev/null @@ -1,37 +0,0 @@ -.next #next_view { display: block; } - -#next_filters > * { padding-left: 0; } -#next_type { - display: inline-block; margin: 5px 0 20px 0; padding: 0; - li { display: inline-block; margin-left: 20px; } -} - -@media (max-width: 699px) { - #next_time span { display: block; clear: left; margin-top: 8px; } -} - -.next_arrow { - position: absolute; - cursor: pointer; - color: @fg-highlight; - font-size: 2.5em; - margin-top: -20px; - padding: 0 3px; - &:hover:after { position: absolute; } -} -#next_earlier { margin-left: 2px; } -#next_later { margin-left: -20px; } -#next_earlier:hover:after { content: '\2039'; right: 8px; } -#next_later:hover:after { content: '\203A'; left: 8px; } -#next_time_select { - margin: -4px 20px 0 20px; - border: @border-normal; - padding: 2px 4px; - -webkit-appearance: none; - -webkit-border-radius: 0; - background: @bg-plain; - font-size: 1em; -} -#next_time_select_now { background: @bg-highlight; } - -#next_start_note { margin-top: 20px; color: @fg-light; } diff --git a/skin/part.less b/skin/part.less index ba03460..c2c72a9 100644 --- a/skin/part.less +++ b/skin/part.less @@ -8,12 +8,19 @@ } #name_sort li { display: inline-block; padding: 0 10px; } -#name_range { - display: inline-block; margin: 5px 0 20px 0; padding: 0; - li { display: inline-block; width: 60px; text-align: right; } + +.name-list { + display: none; + .part & { display: block; } + /*margin: 5px 0 20px 0; padding: 0; + li { display: inline-block; width: 60px; text-align: right; }*/ } + #part_names { - list-style-type: none; margin: 0; -webkit-column-width: 260px; -moz-column-width: 260px; column-width: 260px; + list-style-type: none; + margin: 20px 0 0 10px; + padding: 0; + -webkit-column-width: 260px; -moz-column-width: 260px; column-width: 260px; li { cursor: auto; } a { text-decoration: none; } &.fn-only, &.ln-only { diff --git a/skin/prog.less b/skin/prog.less index ba23f7f..a4ddb68 100644 --- a/skin/prog.less +++ b/skin/prog.less @@ -4,26 +4,6 @@ display: none; .prog & { display: block; } } -#day-sidebar { - ul { margin: -3px 0 3px 0; font-size: 0.8em; font-weight: 400; } - li { border: none; padding: 3px 6px; } - li:after { content: " «"; } -} -#day-narrow { - display: table; - width: 100%; - ul { display: table-row; margin-top: 20px !important; padding-left: 0; } - li { - display: table-cell; - text-align: center; - text-decoration: none; - padding: 6px; - cursor: pointer; - &:before { content: "» "; } - } -} -@media (min-width: 700px) { #day-narrow { display: none !important; } } -@media (max-width: 699px) { #day-sidebar { display: none !important; } } #prog_filters { margin-left: (-1 * @side-margin); diff --git a/src/item.js b/src/item.js index e65f740..800638d 100644 --- a/src/item.js +++ b/src/item.js @@ -210,11 +210,10 @@ KonOpas.Item.show_list = function(ls, opt) { star_els[i].onclick = function() { konopas.stars.toggle(this, this.id.substr(1)); return false; }; } - var star_list = konopas.stars.list(); - for (var i = 0, l = star_list.length; i < l; ++i) { - var el = _el('s' + star_list[i]); - if (el) el.classList.add("has_star"); - } + konopas.stars.list().forEach(function(s){ + var el = _el('s' + s); + if (el) el.classList.add('has_star'); + }); if (opt.id) { var it = document.getElementById('p' + opt.id); diff --git a/src/part.js b/src/part.js index b44d073..358ce0c 100644 --- a/src/part.js +++ b/src/part.js @@ -1,23 +1,22 @@ KonOpas.Part = function(list, opt) { this.list = list || []; - for (var i = 0, p; p = this.list[i]; ++i) { + this.list.forEach(function(p){ p.sortname = ((p.name[1] || '') + ' ' + p.name[0]).toLowerCase().replace(/^ +/, ''); if (!opt.non_ascii_people) p.sortname = p.sortname.make_ascii(); - } + }); this.list.sort(opt.non_ascii_people ? function(a, b) { return a.sortname.localeCompare(b.sortname, opt.lc); } : function(a, b) { return a.sortname < b.sortname ? -1 : a.sortname > b.sortname; }); - _el("part_filters").onclick = this.filter_click.bind(this); this.set_ranges(opt.people_per_screen || 0); } KonOpas.Part.prototype.set_ranges = function(bin_size) { - function _prev_matches(a, i) { return (i > 0) && (a[i - 1] == a[i]); } - function _next_matches(a, i) { return (i < a.length - 1) && (a[i + 1] == a[i]); } - function _ranges(a, bin_size) { - if (bin_size <= 0) return []; - var ends = [], n_bins = Math.round(a.length / bin_size); - if (n_bins > 1) { + var self = this, + _ranges = function(a, bin_size) { + var ends = [], start = 'A', + n_bins = bin_size ? Math.round(a.length / bin_size) : 0, + _prev_matches = function(a, i) { return (i > 0) && (a[i - 1] == a[i]); }, + _next_matches = function(a, i) { return (i < a.length - 1) && (a[i + 1] == a[i]); }; for (var i = 1; i <= n_bins; ++i) { var e = Math.round(i * a.length / n_bins), n_up = 0, n_down = 0; if (e < 0) e = 0; @@ -28,40 +27,43 @@ KonOpas.Part.prototype.set_ranges = function(bin_size) { else if (e > n_down) e -= n_down + 1; if (!ends.length || (ends[ends.length - 1] != a[e])) ends.push(a[e]); } - var start = 'A'; - for (var i = 0; i < ends.length; ++i) { - if (ends[i] < start) continue; - var c = ends[i].charCodeAt(0); - if (ends[i] > start) ends[i] = start + ends[i]; - start = String.fromCharCode(c + 1); - } - } - return ends; - } + ends.forEach(function(e, i){ + if (e > start) ends[i] = start + e; + if (e >= start) start = String.fromCharCode(e.charCodeAt(0) + 1); + }); + return ends; + }, + _range_set = function(div, nr) { + var ul = _new_elem('ul', 'name-list'); + nr.forEach(function(n){ + var li = _new_elem('li', '', n.charAt(0)); + if (n.length > 1) li.textContent += ' - ' + n.charAt(1); + li.setAttribute('data-range', n); + ul.appendChild(li); + }); + div.appendChild(ul); + div.onclick = (function(ev) { + var name_range = (ev || window.event).target.getAttribute('data-range'); + if (name_range) { + konopas.store.set('part', { 'name_range': name_range, 'participant': '' }); + window.location.hash = '#part'; + this.update_view(name_range, ''); + } + }).bind(self); + }; var fn = [], ln = []; - for (var i = 0; i < this.list.length; ++i) { - var n = this.list[i].name; - if (!n || !n.length) continue; - fn.push(n[0].trim().charAt(0).toUpperCase()); - if (n.length >= 2) ln.push(n[1].trim().charAt(0).toUpperCase()); - } - var nr = _ranges(ln.length ? ln : fn, bin_size), - filters = _el('part_filters'); - if (nr.length > 1) { - filters.textContent = '» ' + i18n.txt('part_filter', {'T': ln.length ? 'last' : 'first'}) + ':'; - var ul = document.createElement('ul'); ul.id = 'name_range'; - for (var i = 0; i < nr.length; ++i) { - var li = document.createElement('li'); - li.setAttribute('data-range', nr[i]); - li.textContent = nr[i].charAt(0); - if (nr[i].length > 1) li.textContent += ' - ' + nr[i].charAt(1); - ul.appendChild(li); + this.list.forEach(function(p){ + if (p.name && p.name.length) { + fn.push(p.name[0].trim().charAt(0).toUpperCase()); + if (p.name.length >= 2) ln.push(p.name[1].trim().charAt(0).toUpperCase()); } - filters.appendChild(ul); - } else { - filters.innerHTML = '»     ' + i18n.txt('part_filter', {'T':'all'}) + ''; - } + }); + + this.ranges = _ranges(ln.length ? ln : fn, bin_size); + _range_set(_el('part-sidebar'), this.ranges); + _range_set(_el('part-narrow'), this.ranges); + var nl_type = fn.length && ln.length ? '' : fn.length && !ln.length ? 'fn-only' : !fn.length && ln.length ? 'ln-only' @@ -118,20 +120,16 @@ KonOpas.Part.prototype.show_list = function(name_range) { } KonOpas.Part.prototype.update_view = function(name_range, participant) { - var el_nr = _el('name_range'), - p_id = participant.substr(1), - i, l, ll, cmd; - if (el_nr) { - ll = el_nr.getElementsByTagName('li'); - for (i = 0, l = ll.length; i < l; ++i) { - cmd = (ll[i].getAttribute('data-range') == name_range)? 'add' : 'remove'; - ll[i].classList[cmd]('selected'); - } - } - if (p_id) for (i = 0, l = this.list.length; i < l; ++i) { - if (this.list[i].id == p_id) { this.show_one(i); break; } + var p_id = participant.substr(1), + ll = document.querySelectorAll('.name-list > li'); + if (!name_range) name_range = this.ranges && this.ranges[0] || ''; + for (var i = 0; i < ll.length; ++i) { + var cmd = (ll[i].getAttribute('data-range') == name_range) ? 'add' : 'remove'; + ll[i].classList[cmd]('selected'); } - if (!p_id || (i == this.list.length)) { + if (!p_id || !this.list.some(function(p,i){ + if (p.id == p_id) { this.show_one(i); return true; } + }, this)) { participant = ''; this.show_list(name_range); } @@ -139,17 +137,6 @@ KonOpas.Part.prototype.update_view = function(name_range, participant) { } KonOpas.Part.prototype.show = function(hash) { - function _name_range(name) { - var n0 = name[0].toUpperCase(); if (!n0) return ''; - var par = _el('name_range'); if (!par) return ''; - var ll = par.getElementsByTagName('li'); - for (var i = 0, l = ll.length; i < l; ++i) { - var range = ll[i].getAttribute('data-range'); - if (range && KonOpas.Part.name_in_range(n0, range)) return range; - } - return ''; - } - if (!this.list.length) { window.location.hash = ''; return; } var store = konopas.store.get('part') || {}, name_range = store.name_range || '', @@ -160,7 +147,10 @@ KonOpas.Part.prototype.show = function(hash) { var pa = this.list.filter(function(p) { return p.id == p_id; }); if (pa.length) { participant = 'p' + pa[0].id; - name_range = _name_range(pa[0].sortname); + var n0 = pa[0].sortname[0].toUpperCase(); + if (!n0 || !this.ranges || !this.ranges.some(function(r){ + if (KonOpas.Part.name_in_range(n0, r)) { name_range = r; return true; } + })) name_range = ''; } else { window.location.hash = '#part'; return; @@ -169,20 +159,5 @@ KonOpas.Part.prototype.show = function(hash) { window.location.hash = '#part/' + participant.substr(1); return; } - if (!name_range) { - var el_nr = _el('name_range'); - if (el_nr) name_range = el_nr.getElementsByTagName('li')[0].getAttribute('data-range'); - } this.update_view(name_range, participant); } - - -KonOpas.Part.prototype.filter_click = function(ev) { - var el = (ev || window.event).target; - if (el.parentNode.id == 'name_range') { - var name_range = el.getAttribute("data-range") || ''; - konopas.store.set('part', { 'name_range': name_range, 'participant': '' }); - window.location.hash = '#part'; - this.update_view(name_range, ''); - } -} diff --git a/src/prog.js b/src/prog.js index 7c90805..f9cf3d2 100644 --- a/src/prog.js +++ b/src/prog.js @@ -43,7 +43,7 @@ KonOpas.Prog = function(list, opt) { var pt = _el('tab_prog'), pa = pt && pt.getElementsByTagName('a'); if (pa && pa.length) pa[0].onclick = function(ev) { - if (window.pageYOffset) { + if (window.pageYOffset && document.body.classList.contains('prog')) { window.scrollTo(0, 0); (ev || window.event).preventDefault(); } @@ -68,25 +68,22 @@ KonOpas.Prog.hash = function(f, excl) { } KonOpas.Prog.get_filters = function(hash_only) { - var filters = { 'area':'', 'tag':'', 'query':'', 'id':'' }; - var h = window.location.toString().split('#')[1] || ''; - var h_set = false; - if (h.substr(0, 4) == 'prog') { - var p = h.substr(5).split('/'); - for (var i = 0; i < p.length; ++i) { - var s = p[i].split(':'); + var filters = { 'area':'', 'tag':'', 'query':'', 'id':'' }, + h = window.location.toString().split('#')[1] || '', + h_set = false, + tag_re = konopas.tag_categories && konopas.tag_categories.length && new RegExp('^' + konopas.tag_categories.join('|') + '$'); + if (h.substr(0, 5) == 'prog/') { + h.substr(5).split('/').forEach(function(p){ + var s = p.split(':'); if ((s.length == 2) && s[0] && s[1]) { - if (konopas.tag_categories) for (var j = 0; j < konopas.tag_categories.length; ++j) { - if (s[0] == konopas.tag_categories[j]) { - s[1] = s[0] + ':' + s[1]; - s[0] = 'tag'; - break; - } + if (tag_re && tag_re.test(s[0])) { + s[1] = p; + s[0] = 'tag'; } filters[s[0]] = KonOpas.hash_decode(s[1]); h_set = true; } - } + }); } if (!hash_only && !h_set && !document.body.classList.contains('prog')) { var store = konopas.store.get('prog'); @@ -358,7 +355,6 @@ KonOpas.Prog.prototype.show = function() { qh.style.display = 'none'; } } - _el("next_start_note").textContent = ''; } function _filter(it) { if (this.area) { @@ -379,12 +375,8 @@ KonOpas.Prog.prototype.show = function() { var found = this.query.test(it.title) || this.query.test(it.desc) || (it.loc && this.query.test(it.loc.join('\t'))) - || (it.tags && this.query.test(it.tags.join('\t'))); - if (!found && it.people) { - for (var i = 0; i < it.people.length; ++i) { - if (this.query.test(it.people[i].name)) { found = true; break; } - } - } + || (it.tags && this.query.test(it.tags.join('\t'))) + || (it.people && it.people.some(function(p){ return this.query.test(p.name); })); if (!found) return false; } return true;