diff options
-rw-r--r-- | phpBB/styles/prosilver/template/forum_fn.js | 797 |
1 files changed, 424 insertions, 373 deletions
diff --git a/phpBB/styles/prosilver/template/forum_fn.js b/phpBB/styles/prosilver/template/forum_fn.js index a425e9e1ad..cb8ee2f9df 100644 --- a/phpBB/styles/prosilver/template/forum_fn.js +++ b/phpBB/styles/prosilver/template/forum_fn.js @@ -410,138 +410,203 @@ function insert_single_user(formId, user) } /** -* Run onload functions +* Parse document block */ -(function($) { - $(document).ready(function() { - // Swap .nojs and .hasjs - $('#phpbb.nojs').toggleClass('nojs hasjs'); - - // Focus forms - $('form[data-focus]:first').each(function() { - $('#' + this.getAttribute('data-focus')).focus(); - }); +function parse_document(container) +{ + var test = document.createElement('div'), + oldBrowser = (typeof test.style.borderRadius == 'undefined'); - // Reset avatar dimensions when changing URL or EMAIL - $('input[data-reset-on-edit]').bind('keyup', function() { - $(this.getAttribute('data-reset-on-edit')).val(''); - }); + delete test; - // Pagination - $('a.pagination-trigger').click(function() { - jumpto($(this)); - }); + /** + * Reset avatar dimensions when changing URL or EMAIL + */ + container.find('input[data-reset-on-edit]').bind('keyup', function() { + $(this.getAttribute('data-reset-on-edit')).val(''); + }); - // Adjust HTML code for IE8 and older versions - var test = document.createElement('div'), - oldBrowser = (typeof test.style.borderRadius == 'undefined'); - delete test; + /** + * Pagination + */ + container.find('a.pagination-trigger').click(function() { + jumpto($(this)); + }); - if (oldBrowser) { - // Fix .linklist.bulletin lists - $('ul.linklist.bulletin li:first-child, ul.linklist.bulletin li.rightside:last-child').addClass('no-bulletin'); + /** + * Adjust HTML code for IE8 and older versions + */ + if (oldBrowser) { + // Fix .linklist.bulletin lists + container.find('ul.linklist.bulletin li:first-child, ul.linklist.bulletin li.rightside:last-child').addClass('no-bulletin'); - // Do not run functions below for old browsers - return; - } + // Do not run functions below for old browsers + return; + } - // Adjust topiclist lists with check boxes - $('ul.topiclist dd.mark').siblings('dt').children('.list-inner').addClass('with-mark'); + /** + * Resize navigation block to keep all links on same line + */ + container.find('.navlinks').each(function() { + var $this = $(this), + left = $this.children().not('.rightside'), + right = $this.children('.rightside'); - // Resize navigation block to keep all links on same line - $('.navlinks').each(function() { - var $this = $(this), - left = $this.children().not('.rightside'), - right = $this.children('.rightside'); + if (left.length !== 1 || !right.length) return; - if (left.length !== 1 || !right.length) return; + function resize() { + var width = 0, + diff = left.outerWidth(true) - left.width(); - function resize() { - var width = 0, - diff = left.outerWidth(true) - left.width(); + right.each(function() { + width += $(this).outerWidth(true); + }); + left.css('max-width', Math.floor($this.width() - width - diff) + 'px'); + } - right.each(function() { - width += $(this).outerWidth(true); - }); - left.css('max-width', Math.floor($this.width() - width - diff) + 'px'); - } + resize(); + $(window).resize(resize); + }); - resize(); - $(window).resize(resize); + /** + * Makes breadcrumbs responsive + */ + container.find('.breadcrumbs:not(.skip-responsive, .linklist.leftside .breadcrumbs)').each(function() { + var $this = $(this), + $body = $('body'), + links = $this.find('.crumb'), + length = links.length, + classes = ['wrapped-wide', 'wrapped-medium', 'wrapped-small'], + classesLength = classes.length, + maxHeight = 0, + lastWidth = false, + wrapped = false; + + // Test height by setting nowrap + $this.css('white-space', 'nowrap'); + maxHeight = $this.height() + 1; + $this.css('white-space', ''); + + // Set tooltips + $this.find('a').each(function() { + var $link = $(this); + $link.attr('title', $link.text()); }); - // Responsive breadcrumbs - $('.breadcrumbs:not(.skip-responsive, .linklist.leftside .breadcrumbs)').each(function() { - var $this = $(this), - $body = $('body'), - links = $this.find('.crumb'), - length = links.length, - classes = ['wrapped-wide', 'wrapped-medium', 'wrapped-small'], - classesLength = classes.length, - maxHeight = 0, - lastWidth = false, - wrapped = false; - - // Test height by setting nowrap - $this.css('white-space', 'nowrap'); - maxHeight = $this.height() + 1; - $this.css('white-space', ''); - - // Set tooltips - $this.find('a').each(function() { - var $link = $(this); - $link.attr('title', $link.text()); - }); + // Funciton that checks breadcrumbs + function check() { + var height = $this.height(), + width = $body.width(), + link, i, j; - // Funciton that checks breadcrumbs - function check() { - var height = $this.height(), - width = $body.width(), - link, i, j; + if (height <= maxHeight) { + if (!wrapped || lastWidth === false || lastWidth >= width) { + lastWidth = width; + return; + } + } + lastWidth = width; - if (height <= maxHeight) { - if (!wrapped || lastWidth === false || lastWidth >= width) { - lastWidth = width; - return; - } + if (wrapped) { + $this.removeClass('wrapped').find('.crumb.wrapped').removeClass('wrapped ' + classes.join(' ')); + wrapped = false; + if ($this.height() <= maxHeight) { + return; } - lastWidth = width; + } - if (wrapped) { - $this.removeClass('wrapped').find('.crumb.wrapped').removeClass('wrapped ' + classes.join(' ')); - wrapped = false; + wrapped = true; + $this.addClass('wrapped'); + if ($this.height() <= maxHeight) { + return; + } + + for (i = 0; i < classesLength; i ++) { + for (j = length - 1; j >= 0; j --) { + links.eq(j).addClass('wrapped ' + classes[i]); if ($this.height() <= maxHeight) { return; } } + } + } - wrapped = true; - $this.addClass('wrapped'); - if ($this.height() <= maxHeight) { - return; - } + // Run function and set event + check(); + $(window).resize(check); + }); - for (i = 0; i < classesLength; i ++) { - for (j = length - 1; j >= 0; j --) { - links.eq(j).addClass('wrapped ' + classes[i]); - if ($this.height() <= maxHeight) { - return; - } - } - } + /** + * Adjust topiclist lists with check boxes + */ + container.find('ul.topiclist dd.mark').siblings('dt').children('.list-inner').addClass('with-mark'); + + /** + * Appends contents of all extra columns to first column in + * .topiclist lists for mobile devices. Copies contents as is. + * + * To add that functionality to .topiclist list simply add + * responsive-show-all to list of classes + */ + container.find('.topiclist.responsive-show-all > li > dl').each(function() { + var $this = $(this), + block = $this.find('dt .responsive-show:last-child'), + first = true; + + // Create block that is visible only on mobile devices + if (!block.length) { + $this.find('dt > .list-inner').append('<div class="responsive-show" style="display:none;" />'); + block = $this.find('dt .responsive-show:last-child'); + } + else { + first = (block.text().trim().length == 0); + } + + // Copy contents of each column + $this.find('dd').not('.mark').each(function() { + var column = $(this), + children = column.children(), + html = column.html(); + + if (children.length == 1 && children.text() == column.text()) { + html = children.html(); } - // Run function and set event - check(); - $(window).resize(check); + block.append((first ? '' : '<br />') + html); + + first = false; }); + }); + + /** + * Same as above, but prepends text from header to each + * column before contents of that column. + * + * To add that functionality to .topiclist list simply add + * responsive-show-columns to list of classes + */ + container.find('.topiclist.responsive-show-columns').each(function() { + var list = $(this), + headers = [], + headersLength = 0; + + // Find all headers, get contents + list.prev('.topiclist').find('li.header dd').not('.mark').each(function() { + headers.push($(this).text()); + headersLength ++; + }); + + if (!headersLength) { + return; + } - // Responsive topic lists - $('.topiclist.responsive-show-all > li > dl').each(function() { + // Parse each row + list.find('dl').each(function() { var $this = $(this), block = $this.find('dt .responsive-show:last-child'), first = true; + // Create block that is visible only on mobile devices if (!block.length) { $this.find('dt > .list-inner').append('<div class="responsive-show" style="display:none;" />'); block = $this.find('dt .responsive-show:last-child'); @@ -550,7 +615,8 @@ function insert_single_user(formId, user) first = (block.text().trim().length == 0); } - $this.find('dd').not('.mark').each(function() { + // Copy contents of each column + $this.find('dd').not('.mark').each(function(i) { var column = $(this), children = column.children(), html = column.html(); @@ -559,326 +625,327 @@ function insert_single_user(formId, user) html = children.html(); } + // Prepend contents of matching header before contents of column + if (i < headersLength) { + html = headers[i] + ': <strong>' + html + '</strong>'; + } + block.append((first ? '' : '<br />') + html); first = false; }); }); + }); - $('.topiclist.responsive-show-columns').each(function() { - var list = $(this), - headers = [], - headersLength = 0; - - list.prev('.topiclist').find('li.header dd').not('.mark').each(function() { - headers.push($(this).text()); - headersLength ++; - }); - - if (!headersLength) { - return; + /** + * Responsive tables + */ + container.find('table.table1').not('.not-responsive').each(function() { + var $this = $(this), + th = $this.find('thead > tr > th'), + columns = th.length, + headers = [], + totalHeaders = 0, + i, headersLength; + + // Find each header + th.each(function(column) { + var cell = $(this), + colspan = parseInt(cell.attr('colspan')), + dfn = cell.attr('data-dfn'), + text = dfn ? dfn : cell.text(); + + colspan = isNaN(colspan) || colspan < 1 ? 1 : colspan; + + for (i=0; i<colspan; i++) { + headers.push(text); } + totalHeaders ++; - list.find('dl').each(function() { - var $this = $(this), - block = $this.find('dt .responsive-show:last-child'), - first = true; - - if (!block.length) { - $this.find('dt > .list-inner').append('<div class="responsive-show" style="display:none;" />'); - block = $this.find('dt .responsive-show:last-child'); - } - else { - first = (block.text().trim().length == 0); - } - - $this.find('dd').not('.mark').each(function(i) { - var column = $(this), - children = column.children(), - html = column.html(); + if (dfn && !column) { + $this.addClass('show-header'); + } + }); + + headersLength = headers.length; - if (children.length == 1 && children.text() == column.text()) { - html = children.html(); - } + // Add header text to each cell as <dfn> + $this.addClass('responsive'); - if (i < headersLength) { - html = headers[i] + ': <strong>' + html + '</strong>'; - } + if (totalHeaders < 2) { + $this.addClass('show-header'); + return; + } - block.append((first ? '' : '<br />') + html); + $this.find('tbody > tr').each(function() { + var row = $(this), + cells = row.children('td'), + column = 0; - first = false; - }); - }); - }); + if (cells.length == 1) { + row.addClass('big-column'); + return; + } - // Responsive tables - $('table.table1').not('.not-responsive').each(function() { - var $this = $(this), - th = $this.find('thead > tr > th'), - columns = th.length, - headers = [], - totalHeaders = 0, - i, headersLength; - - // Find each header - th.each(function(column) { + cells.each(function() { var cell = $(this), colspan = parseInt(cell.attr('colspan')), - dfn = cell.attr('data-dfn'), - text = dfn ? dfn : cell.text(); - - colspan = isNaN(colspan) || colspan < 1 ? 1 : colspan; + text = cell.text().trim(); - for (i=0; i<colspan; i++) { - headers.push(text); + if (headersLength <= column) { + return; } - totalHeaders ++; - if (dfn && !column) { - $this.addClass('show-header'); + if (text.length && text !== '-') { + cell.prepend('<dfn style="display: none;">' + headers[column] + '</dfn>'); + } + else { + cell.addClass('empty'); } + + colspan = isNaN(colspan) || colspan < 1 ? 1 : colspan; + column += colspan; }); - - headersLength = headers.length; + }); + }); - // Add header text to each cell as <dfn> - $this.addClass('responsive'); + /** + * Hide empty responsive tables + */ + container.find('table.responsive > tbody').each(function() { + var items = $(this).children('tr'); + if (items.length == 0) + { + $(this).parent('table:first').addClass('responsive-hide'); + } + }); - if (totalHeaders < 2) { - $this.addClass('show-header'); + /** + * Responsive link lists + */ + container.find('.linklist:not(.navlinks, .skip-responsive), .postbody ul.profile-icons:not(.skip-responsive)').each(function() { + var $this = $(this), + $body = $('body'), + links = $this.children().not('.skip-responsive'), + html = '<li class="responsive-menu" style="display:none;"><a href="javascript:void(0);" class="responsive-menu-link"> </a><ul class="responsive-popup" style="display:none;" /></li>', + // List of items that should be hidden last + filterString = '.pagination, .icon-notifications, .icon-pm, .icon-logout, .icon-login, .mark-read, .breadcrumbs, .edit-icon, .quote-icon', + filtered = links.filter(filterString); + + if (links.is('.rightside')) + { + links.filter('.rightside:first').before(html); + } + else + { + $this.append(html); + } + + var toggle = $this.children('.responsive-menu'), + toggleLink = toggle.find('a.responsive-menu-link'), + menu = toggle.find('ul.responsive-popup'), + lastWidth = false, + compact = false, + responsive = false, + copied = false; + + function check() { + var width = $body.width(); + if (responsive && width <= lastWidth) { return; } - $this.find('tbody > tr').each(function() { - var row = $(this), - cells = row.children('td'), - column = 0; - - if (cells.length == 1) { - row.addClass('big-column'); - return; - } - - cells.each(function() { - var cell = $(this), - colspan = parseInt(cell.attr('colspan')), - text = cell.text().trim(); - - if (headersLength <= column) { - return; - } + // Reset responsive and compact layout + if (responsive) { + responsive = false; + $this.removeClass('responsive'); + links.css('display', ''); + toggle.css('display', 'none'); + } - if (text.length && text !== '-') { - cell.prepend('<dfn style="display: none;">' + headers[column] + '</dfn>'); - } - else { - cell.addClass('empty'); - } + if (compact) { + compact = false; + $this.removeClass('compact'); + } - colspan = isNaN(colspan) || colspan < 1 ? 1 : colspan; - column += colspan; - }); + // Find tallest element + var maxHeight = 0; + links.each(function() { + if (!$(this).height()) return; + maxHeight = Math.max(maxHeight, $(this).outerHeight(true)); }); - }); - // Responsive link lists - $('.linklist:not(.navlinks, .skip-responsive), .postbody ul.profile-icons:not(.skip-responsive)').each(function() { - var $this = $(this), - $body = $('body'), - links = $this.children().not('.skip-responsive'), - html = '<li class="responsive-menu" style="display:none;"><a href="javascript:void(0);" class="responsive-menu-link"> </a><ul class="responsive-popup" style="display:none;" /></li>', - // List of items that should be hidden last - filterString = '.pagination, .icon-notifications, .icon-pm, .icon-logout, .icon-login, .mark-read, .breadcrumbs, .edit-icon, .quote-icon', - filtered = links.filter(filterString); - - if (links.is('.rightside')) - { - links.filter('.rightside:first').before(html); + if (maxHeight < 1) { + return; } - else - { - $this.append(html); + + // Nothing to resize if block's height is not bigger than tallest element's height + if ($this.height() <= maxHeight) { + toggle.removeClass('visible'); + menu.hide(); + return; } - var toggle = $this.children('.responsive-menu'), - toggleLink = toggle.find('a.responsive-menu-link'), - menu = toggle.find('ul.responsive-popup'), - lastWidth = false, - compact = false, - responsive = false, - copied = false; - - function check() { - var width = $body.width(); - if (responsive && width <= lastWidth) { - return; - } + // Enable compact layout, find tallest element, compare to height of whole block + compact = true; + $this.addClass('compact'); - // Reset responsive and compact layout - if (responsive) { - responsive = false; - $this.removeClass('responsive'); - links.css('display', ''); - toggle.css('display', 'none'); - } + var compactMaxHeight = 0; + links.each(function() { + if (!$(this).height()) return; + compactMaxHeight = Math.max(compactMaxHeight, $(this).outerHeight(true)); + }); - if (compact) { - compact = false; - $this.removeClass('compact'); - } + if ($this.height() <= maxHeight) { + toggle.removeClass('visible'); + menu.hide(); + return; + } - // Find tallest element - var maxHeight = 0; - links.each(function() { - if (!$(this).height()) return; - maxHeight = Math.max(maxHeight, $(this).outerHeight(true)); - }); + // Compact layout did not resize block enough, switch to responsive layout + compact = false; + $this.removeClass('compact'); + responsive = true; - if (maxHeight < 1) { - return; + if (!copied) { + if (menu.parents().is('.rightside')) { + menu.addClass('responsive-rightside'); } + menu.append(links.clone(true)); + menu.find('li.leftside, li.rightside').removeClass('leftside rightside'); + menu.find('.inputbox').parents('li:first').css('white-space', 'normal'); + copied = true; + } + else { + menu.children().css('display', ''); + } - // Nothing to resize if block's height is not bigger than tallest element's height - if ($this.height() <= maxHeight) { - toggle.removeClass('visible'); - menu.hide(); - return; - } + toggle.css('display', ''); + $this.addClass('responsive'); - // Enable compact layout, find tallest element, compare to height of whole block - compact = true; - $this.addClass('compact'); + // Try to not hide filtered items + if (filtered.length) { + links.not(filterString).css('display', 'none'); - var compactMaxHeight = 0; - links.each(function() { + maxHeight = 0; + filtered.each(function() { if (!$(this).height()) return; - compactMaxHeight = Math.max(compactMaxHeight, $(this).outerHeight(true)); + maxHeight = Math.max(maxHeight, $(this).outerHeight(true)); }); if ($this.height() <= maxHeight) { - toggle.removeClass('visible'); - menu.hide(); + menu.children().filter(filterString).css('display', 'none'); return; } + } - // Compact layout did not resize block enough, switch to responsive layout - compact = false; - $this.removeClass('compact'); - responsive = true; - - if (!copied) { - if (menu.parents().is('.rightside')) { - menu.addClass('responsive-rightside'); - } - menu.append(links.clone(true)); - menu.find('li.leftside, li.rightside').removeClass('leftside rightside'); - menu.find('.inputbox').parents('li:first').css('white-space', 'normal'); - copied = true; - } - else { - menu.children().css('display', ''); - } - - toggle.css('display', ''); - $this.addClass('responsive'); + links.css('display', 'none'); + } - // Try to not hide filtered items - if (filtered.length) { - links.not(filterString).css('display', 'none'); + toggleLink.click(function() { + if (!responsive) return; + if (!toggle.hasClass('visible')) { + // Hide other popups + $('.responsive-menu.visible').removeClass('visible').find('.responsive-popup').hide(); + } + toggle.toggleClass('visible'); + menu.toggle(); + }); - maxHeight = 0; - filtered.each(function() { - if (!$(this).height()) return; - maxHeight = Math.max(maxHeight, $(this).outerHeight(true)); - }); + check(); + $(window).resize(check); + }); - if ($this.height() <= maxHeight) { - menu.children().filter(filterString).css('display', 'none'); - return; - } - } + /** + * Responsive tabs + */ + container.find('#tabs, #minitabs').not('.skip-responsive').each(function() { + var $this = $(this), + $body = $('body'), + ul = $this.children(), + tabs = ul.children().not('.skip-responsive'), + links = tabs.children('a'), + toggle = ul.append('<li class="responsive-tab" style="display:none;"><a href="javascript:void(0);" class="responsive-tab-link"><span> </span></a><ul class="responsive-tabs" style="display:none;" /></li>').find('li.responsive-tab'), + toggleLink = toggle.find('a.responsive-tab-link'), + menu = toggle.find('ul.responsive-tabs'), + maxHeight = 0, + lastWidth = false, + responsive = false; + + links.each(function() { + maxHeight = Math.max(maxHeight, $(this).outerHeight(true)); + }) + + function check() { + var width = $body.width(), + height = $this.height(); - links.css('display', 'none'); + if (arguments.length == 0 && (!responsive || width <= lastWidth) && height <= maxHeight) { + return; } - toggleLink.click(function() { - if (!responsive) return; - if (!toggle.hasClass('visible')) { - // Hide other popups - $('.responsive-menu.visible').removeClass('visible').find('.responsive-popup').hide(); - } - toggle.toggleClass('visible'); - menu.toggle(); - }); + tabs.show(); + toggle.hide(); - check(); - $(window).resize(check); - }); - - // Responsive tabs - $('#tabs, #minitabs').not('.skip-responsive').each(function() { - var $this = $(this), - $body = $('body'), - ul = $this.children(), - tabs = ul.children().not('.skip-responsive'), - links = tabs.children('a'), - toggle = ul.append('<li class="responsive-tab" style="display:none;"><a href="javascript:void(0);" class="responsive-tab-link"><span> </span></a><ul class="responsive-tabs" style="display:none;" /></li>').find('li.responsive-tab'), - toggleLink = toggle.find('a.responsive-tab-link'), - menu = toggle.find('ul.responsive-tabs'), - maxHeight = 0, - lastWidth = false, + lastWidth = width; + height = $this.height(); + if (height <= maxHeight) { responsive = false; + return; + } - links.each(function() { - maxHeight = Math.max(maxHeight, $(this).outerHeight(true)); - }) - - function check() { - var width = $body.width(), - height = $this.height(); - - if (arguments.length == 0 && (!responsive || width <= lastWidth) && height <= maxHeight) { - return; - } + responsive = true; + toggle.show(); + menu.hide().html(''); - tabs.show(); - toggle.hide(); + var availableTabs = tabs.filter(':not(.activetab, .responsive-tab)'), + total = availableTabs.length, + i, tab; - lastWidth = width; - height = $this.height(); - if (height <= maxHeight) { - responsive = false; + for (i = total - 1; i >= 0; i --) { + tab = availableTabs.eq(i); + menu.prepend(tab.clone(true)); + tab.hide(); + if ($this.height() <= maxHeight) { + menu.find('a').click(function() { check(true); }); return; } + } + menu.find('a').click(function() { check(true); }); + } - responsive = true; - toggle.show(); - menu.hide().html(''); + toggleLink.click(function() { + if (!responsive) return; + menu.toggle(); + }); - var availableTabs = tabs.filter(':not(.activetab, .responsive-tab)'), - total = availableTabs.length, - i, tab; + check(true); + $(window).resize(check); + }); - for (i = total - 1; i >= 0; i --) { - tab = availableTabs.eq(i); - menu.prepend(tab.clone(true)); - tab.hide(); - if ($this.height() <= maxHeight) { - menu.find('a').click(function() { check(true); }); - return; - } - } - menu.find('a').click(function() { check(true); }); - } + /** + * Hide UCP/MCP navigation if there is only 1 item + */ + container.find('#navigation').each(function() { + var items = $(this).children('ol, ul').children('li'); + if (items.length == 1) + { + $(this).addClass('responsive-hide'); + } + }); +} - toggleLink.click(function() { - if (!responsive) return; - menu.toggle(); - }); +/** +* Run onload functions +*/ +(function($) { + $(document).ready(function() { + // Swap .nojs and .hasjs + $('#phpbb.nojs').toggleClass('nojs hasjs'); - check(true); - $(window).resize(check); + // Focus forms + $('form[data-focus]:first').each(function() { + $('#' + this.getAttribute('data-focus')).focus(); }); // Hide responsive menu and tabs @@ -892,22 +959,6 @@ function insert_single_user(formId, user) } }); - // Hide *CP navigation if there is only 1 item - $('#navigation').each(function() { - var items = $(this).children('ol, ul').children('li'); - if (items.length == 1) - { - $(this).addClass('responsive-hide'); - } - }); - - // Hide empty responsive tables - $('table.responsive > tbody').each(function() { - var items = $(this).children('tr'); - if (items.length == 0) - { - $(this).parent('table:first').addClass('responsive-hide'); - } - }); + parse_document($('body')); }); })(jQuery); |