From d5acc30de20298eb6ed7545e70484599c4d95867 Mon Sep 17 00:00:00 2001 From: Anika Henke Date: Mon, 9 Apr 2012 17:36:33 +0100 Subject: rewrote and improved HTML for TOC Attention: Template authors need to adjust their CSS! Original structure: div.toc > div#toc__header.tocheader.toctoggle > span#toc__toggle.toc_close|toc_open > span div#toc__inside > ul.toc > li.level1 > div.li > span.li > a.toc New structure: div#dw__toc.open|close > h3 > strong > span ul.toc > li.toc > div.li > a --- lib/scripts/page.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) (limited to 'lib/scripts') diff --git a/lib/scripts/page.js b/lib/scripts/page.js index 5da4a9cc0..6e7d7faf7 100644 --- a/lib/scripts/page.js +++ b/lib/scripts/page.js @@ -96,26 +96,26 @@ dw_page = { * Adds the toggle switch to the TOC */ initTocToggle: function() { - var $header, $clicky, $toc, $tocul, setClicky; - $header = jQuery('#toc__header'); + var $wrapper, $header, $clicky, $toc, $tocul, setClicky; + $wrapper = jQuery('#dw__toc'); + $header = jQuery('h3', $wrapper); if(!$header.length) { return; } - $toc = jQuery('#toc__inside'); - $tocul = $toc.children('ul.toc'); + $toc = jQuery('div', $wrapper).first(); + $tocul = jQuery('ul', $toc); setClicky = function(hiding){ if(hiding){ $clicky.html('+'); - $clicky[0].className = 'toc_open'; + $wrapper.addClass('close').removeClass('open'); }else{ $clicky.html('−'); - $clicky[0].className = 'toc_close'; + $wrapper.addClass('open').removeClass('close'); } }; - $clicky = jQuery(document.createElement('span')) - .attr('id','toc__toggle'); + $clicky = jQuery(document.createElement('strong')); $header.css('cursor','pointer') .click(function () { var hidden; -- cgit v1.2.3 From c8388e443bcd0c09a0b142b31819d48abd559aa0 Mon Sep 17 00:00:00 2001 From: Andreas Gohr Date: Fri, 20 Apr 2012 17:20:17 +0200 Subject: made TOC togling script more generic Instead of a dedicated function to toggle the TOC we now have a function that allows to use this functionality everywhere. This will be used to toggle the sidebar in the mobile view (in an upcoming patch). Note, this required some changes to the CSS (to make it more generic). The CSS is still located in the TOC sections but should probably be moved into its own section instead. --- lib/scripts/page.js | 57 ++++++++++++++++++++++++++++++++++------------------- 1 file changed, 37 insertions(+), 20 deletions(-) (limited to 'lib/scripts') diff --git a/lib/scripts/page.js b/lib/scripts/page.js index 6e7d7faf7..84af1f18b 100644 --- a/lib/scripts/page.js +++ b/lib/scripts/page.js @@ -10,7 +10,7 @@ dw_page = { init: function(){ dw_page.sectionHighlight(); jQuery('a.fn_top').mouseover(dw_page.footnoteDisplay); - dw_page.initTocToggle(); + dw_page.makeToggle('#dw__toc h3','#dw__toc > div'); }, /** @@ -93,47 +93,64 @@ dw_page = { }, /** - * Adds the toggle switch to the TOC + * Makes an element foldable by clicking its handle + * + * This is used for the TOC toggling, but can be used for other elements + * as well. A state indicator is inserted into the handle and can be styled + * by CSS. + * + * @param selector handle What should be clicked to toggle + * @param selector content This element will be toggled */ - initTocToggle: function() { - var $wrapper, $header, $clicky, $toc, $tocul, setClicky; - $wrapper = jQuery('#dw__toc'); - $header = jQuery('h3', $wrapper); - if(!$header.length) { - return; - } - $toc = jQuery('div', $wrapper).first(); - $tocul = jQuery('ul', $toc); + makeToggle: function(handle, content){ + var $handle, $content, $clicky, $child, setClicky; + $handle = jQuery(handle); + if(!$handle.length) return; + $content = jQuery(content); + if(!$content.length) return; + + // we animate the children + $child = $content.children(); + // class/display toggling setClicky = function(hiding){ if(hiding){ $clicky.html('+'); - $wrapper.addClass('close').removeClass('open'); + $handle.addClass('toggle_open'); + $handle.removeClass('toggle_close'); }else{ $clicky.html('−'); - $wrapper.addClass('open').removeClass('close'); + $handle.addClass('toggle_close'); + $handle.removeClass('toggle_open'); } }; - $clicky = jQuery(document.createElement('strong')); - $header.css('cursor','pointer') + // the state indicator + $clicky = jQuery(document.createElement('strong')) + .addClass('toggle'); + + // click function + $handle.css('cursor','pointer') .click(function () { var hidden; - // Assert that $toc instantly takes the whole TOC space - $toc.css('height', $toc.height()).show(); + // Assert that content instantly takes the whole space + $content.css('height', $content.height()).show(); - hidden = $tocul.stop(true, true).is(':hidden'); + // stop any running animation and get current state + hidden = $child.stop(true, true).is(':hidden'); + // update the state setClicky(!hidden); // Start animation and assure that $toc is hidden/visible - $tocul.dw_toggle(hidden, function () { - $toc.toggle(hidden); + $child.dw_toggle(hidden, function () { + $content.toggle(hidden); }); }) .prepend($clicky); + // initial state setClicky(); } }; -- cgit v1.2.3 From 48722ac855c79944285cbe8958fe5ed03bd835ed Mon Sep 17 00:00:00 2001 From: Anika Henke Date: Sun, 22 Apr 2012 21:19:59 +0100 Subject: improved toc changes and sidebar toggling --- lib/scripts/page.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) (limited to 'lib/scripts') diff --git a/lib/scripts/page.js b/lib/scripts/page.js index 84af1f18b..74dec37fb 100644 --- a/lib/scripts/page.js +++ b/lib/scripts/page.js @@ -116,18 +116,17 @@ dw_page = { setClicky = function(hiding){ if(hiding){ $clicky.html('+'); - $handle.addClass('toggle_open'); - $handle.removeClass('toggle_close'); + $handle.addClass('closed'); + $handle.removeClass('open'); }else{ $clicky.html('−'); - $handle.addClass('toggle_close'); - $handle.removeClass('toggle_open'); + $handle.addClass('open'); + $handle.removeClass('closed'); } }; // the state indicator - $clicky = jQuery(document.createElement('strong')) - .addClass('toggle'); + $clicky = jQuery(document.createElement('strong')); // click function $handle.css('cursor','pointer') -- cgit v1.2.3 From 688c5219ce1f6bf1dbda6e733bec881baaa24025 Mon Sep 17 00:00:00 2001 From: Andreas Gohr Date: Sat, 30 Jun 2012 12:03:59 +0200 Subject: fixed the toc/sidebar toggling script for real --- lib/scripts/page.js | 50 +++++++++++++++++++++++++++++++------------------- 1 file changed, 31 insertions(+), 19 deletions(-) (limited to 'lib/scripts') diff --git a/lib/scripts/page.js b/lib/scripts/page.js index 74dec37fb..78943be7a 100644 --- a/lib/scripts/page.js +++ b/lib/scripts/page.js @@ -102,7 +102,7 @@ dw_page = { * @param selector handle What should be clicked to toggle * @param selector content This element will be toggled */ - makeToggle: function(handle, content){ + makeToggle: function(handle, content, state){ var $handle, $content, $clicky, $child, setClicky; $handle = jQuery(handle); if(!$handle.length) return; @@ -125,32 +125,44 @@ dw_page = { } }; - // the state indicator - $clicky = jQuery(document.createElement('strong')); + $handle[0].setState = function(state){ + var hidden; + if(!state) state = 1; - // click function - $handle.css('cursor','pointer') - .click(function () { - var hidden; + // Assert that content instantly takes the whole space + $content.css('height', $content.height()).show(); - // Assert that content instantly takes the whole space - $content.css('height', $content.height()).show(); + // stop any running animation + $child.stop(true, true); - // stop any running animation and get current state - hidden = $child.stop(true, true).is(':hidden'); + // was a state given or do we toggle? + if(state === -1) { + hidden = false; + } else if(state === 1) { + hidden = true; + } else { + hidden = $child.is(':hidden'); + } - // update the state - setClicky(!hidden); + // update the state + setClicky(!hidden); - // Start animation and assure that $toc is hidden/visible - $child.dw_toggle(hidden, function () { - $content.toggle(hidden); - }); - }) + // Start animation and assure that $toc is hidden/visible + $child.dw_toggle(hidden, function () { + $content.toggle(hidden); + }); + }; + + // the state indicator + $clicky = jQuery(document.createElement('strong')); + + // click function + $handle.css('cursor','pointer') + .click($handle[0].setState) .prepend($clicky); // initial state - setClicky(); + $handle[0].setState(state); } }; -- cgit v1.2.3 From 9f6d88deb91f2a191f2d1ef5c10ce42afead458f Mon Sep 17 00:00:00 2001 From: Anika Henke Date: Sun, 1 Jul 2012 14:05:20 +0100 Subject: changed 'height' in JS to 'min-height' --- lib/scripts/page.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'lib/scripts') diff --git a/lib/scripts/page.js b/lib/scripts/page.js index 78943be7a..728887687 100644 --- a/lib/scripts/page.js +++ b/lib/scripts/page.js @@ -130,7 +130,7 @@ dw_page = { if(!state) state = 1; // Assert that content instantly takes the whole space - $content.css('height', $content.height()).show(); + $content.css('min-height', $content.height()).show(); // stop any running animation $child.stop(true, true); -- cgit v1.2.3 From e260f93b6cea05bc39bbd77b9db5bdc0c2c424bf Mon Sep 17 00:00:00 2001 From: Anika Henke Date: Thu, 5 Jul 2012 22:58:24 +0100 Subject: xml compatibility fixes (mainly entities to unicode conversions) --- lib/scripts/page.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'lib/scripts') diff --git a/lib/scripts/page.js b/lib/scripts/page.js index 728887687..74aca9c06 100644 --- a/lib/scripts/page.js +++ b/lib/scripts/page.js @@ -119,7 +119,7 @@ dw_page = { $handle.addClass('closed'); $handle.removeClass('open'); }else{ - $clicky.html('−'); + $clicky.html('−'); $handle.addClass('open'); $handle.removeClass('closed'); } -- cgit v1.2.3 From c8839c220c49633ea45ce5d0e4be1f411f66ad6c Mon Sep 17 00:00:00 2001 From: Anika Henke Date: Sat, 14 Jul 2012 12:10:08 +0100 Subject: changed all doctypes to html5 doctype --- lib/scripts/index.html | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) (limited to 'lib/scripts') diff --git a/lib/scripts/index.html b/lib/scripts/index.html index d614603ac..977f90e10 100644 --- a/lib/scripts/index.html +++ b/lib/scripts/index.html @@ -1,6 +1,5 @@ - - + + -- cgit v1.2.3 From ae22dee70061990f256be2671c0f585a572ce712 Mon Sep 17 00:00:00 2001 From: Andreas Gohr Date: Sat, 28 Jul 2012 12:29:24 +0200 Subject: remove min-height after toggling FS#2555 --- lib/scripts/page.js | 1 + 1 file changed, 1 insertion(+) (limited to 'lib/scripts') diff --git a/lib/scripts/page.js b/lib/scripts/page.js index 74aca9c06..5ac81f33b 100644 --- a/lib/scripts/page.js +++ b/lib/scripts/page.js @@ -150,6 +150,7 @@ dw_page = { // Start animation and assure that $toc is hidden/visible $child.dw_toggle(hidden, function () { $content.toggle(hidden); + $content.css('min-height',''); // remove min-height again }); }; -- cgit v1.2.3 From ff10b2405470c8c9c90a18830dafb641cdee70fe Mon Sep 17 00:00:00 2001 From: Anika Henke Date: Sat, 28 Jul 2012 13:32:23 +0100 Subject: improved toolbar appearing to load slowly --- lib/scripts/edit.js | 2 ++ 1 file changed, 2 insertions(+) (limited to 'lib/scripts') diff --git a/lib/scripts/edit.js b/lib/scripts/edit.js index 33a8f61b5..5a5e829bd 100644 --- a/lib/scripts/edit.js +++ b/lib/scripts/edit.js @@ -40,6 +40,8 @@ function createToolButton(icon,label,key,id,classname){ icon = DOKU_BASE + 'lib/images/toolbar/' + icon; } $ico.attr('src', icon); + $ico.attr('width', 16); + $ico.attr('height', 16); $btn.append($ico); // we have to return a DOM object (for compatibility reasons) -- cgit v1.2.3 From 63e967bdfd6d3bd52960647f8490dfd9678353f9 Mon Sep 17 00:00:00 2001 From: Anika Henke Date: Sun, 5 Aug 2012 13:04:35 +0100 Subject: html validity fixes (removed name and align in some plugins) --- lib/scripts/media.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'lib/scripts') diff --git a/lib/scripts/media.js b/lib/scripts/media.js index 841baa93f..1872f2c61 100644 --- a/lib/scripts/media.js +++ b/lib/scripts/media.js @@ -497,7 +497,7 @@ var dw_mediamanager = { var maxWidth = widthFull - (widthOtherResizable + minWidthNonResizable); $resizables.resizable( "option", "maxWidth", maxWidth ); - // width of file panel in % = 100% - width of resizables in % + // width of file panel in % = 100% - width of resizables in % // this calculates with 99.99 and not 100 to overcome rounding errors var relWidthNonResizable = 99.99 - (100 * widthResizables / widthFull); // set width of file panel @@ -699,7 +699,7 @@ var dw_mediamanager = { event.preventDefault(); $link = jQuery(this); - id = $link.attr('name').substr(2); + id = $link.attr('id').substr(2); if(!opener){ // if we don't run in popup display example -- cgit v1.2.3 From 5b838199e985590c6d716cd6add1973fcfd0d54c Mon Sep 17 00:00:00 2001 From: Andreas Gohr Date: Sun, 26 Aug 2012 16:20:57 +0200 Subject: do not intialize media manager JS if not needed FS#2578 --- lib/scripts/media.js | 1 + 1 file changed, 1 insertion(+) (limited to 'lib/scripts') diff --git a/lib/scripts/media.js b/lib/scripts/media.js index 1872f2c61..074c7b95f 100644 --- a/lib/scripts/media.js +++ b/lib/scripts/media.js @@ -31,6 +31,7 @@ var dw_mediamanager = { var $content, $tree; $content = jQuery('#media__content'); $tree = jQuery('#media__tree'); + if(!$tree.length) return; dw_mediamanager.prepare_content($content); -- cgit v1.2.3 From 10295f78866be6074f00369aa219c67d867ad610 Mon Sep 17 00:00:00 2001 From: Michael Hamann Date: Sat, 8 Sep 2012 10:50:41 +0200 Subject: Replace language-dependent selector in the mediamanager js FS#2573 --- lib/scripts/media.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'lib/scripts') diff --git a/lib/scripts/media.js b/lib/scripts/media.js index 074c7b95f..a85b2ed0f 100644 --- a/lib/scripts/media.js +++ b/lib/scripts/media.js @@ -435,7 +435,7 @@ var dw_mediamanager = { dw_mediamanager.$resizables().resizable('destroy'); if (update_list) { - dw_mediamanager.list.call(jQuery('input[value="Apply"]')[0]); + dw_mediamanager.list.call(jQuery('#mediamanager__page form.options input[type="submit"]')[0]); } $content.html(data); -- cgit v1.2.3 From e9e762792aaa754e29c2ecbbd088b60f75b7d674 Mon Sep 17 00:00:00 2001 From: Michael Hamann Date: Sun, 9 Sep 2012 00:39:37 +0200 Subject: Add more tolerance in js resize of the media manager FS#2369 This adds more tolerance to the width calculations of the media manager panes which avoids that the right pane is displayed below the other panes. --- lib/scripts/media.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'lib/scripts') diff --git a/lib/scripts/media.js b/lib/scripts/media.js index a85b2ed0f..8f3c00c88 100644 --- a/lib/scripts/media.js +++ b/lib/scripts/media.js @@ -495,12 +495,12 @@ var dw_mediamanager = { // set max width of resizable column var widthOtherResizable = widthResizables - jQuery(this).width(); var minWidthNonResizable = parseFloat($filePanel.css("min-width")); - var maxWidth = widthFull - (widthOtherResizable + minWidthNonResizable); + var maxWidth = widthFull - (widthOtherResizable + minWidthNonResizable) - 1; $resizables.resizable( "option", "maxWidth", maxWidth ); // width of file panel in % = 100% - width of resizables in % - // this calculates with 99.99 and not 100 to overcome rounding errors - var relWidthNonResizable = 99.99 - (100 * widthResizables / widthFull); + // this calculates with 99.9 and not 100 to overcome rounding errors + var relWidthNonResizable = 99.9 - (100 * widthResizables / widthFull); // set width of file panel $filePanel.width(relWidthNonResizable+'%'); -- cgit v1.2.3 From 4802becf985a7e314243b0c4d0a30bd7f906d078 Mon Sep 17 00:00:00 2001 From: Michael Hamann Date: Sun, 9 Sep 2012 18:44:16 +0200 Subject: Fix section edit highlighting when the start marker is hidden This fixes the section edit highlighting when the start marker (normally a heading) is inside other HTML elements like a div from the wrap plugin. --- lib/scripts/page.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) (limited to 'lib/scripts') diff --git a/lib/scripts/page.js b/lib/scripts/page.js index 5ac81f33b..b8e83cb0c 100644 --- a/lib/scripts/page.js +++ b/lib/scripts/page.js @@ -27,9 +27,14 @@ dw_page = { // Walk the DOM tree up (first previous siblings, then parents) // until boundary element while($tgt.length > 0 && !$tgt.hasClass('sectionedit' + nr)) { - // $.last gives the DOM-ordered last element: - // prev if present, else parent. - $tgt = $tgt.prev().add($tgt.parent()).last(); + // go down when the sectionedit begin marker is below $tgt + if ($tgt.find('.sectionedit' + nr).length > 0) { + $tgt = $tgt.children().last(); + } else { + // $.last gives the DOM-ordered last element: + // prev if present, else parent. + $tgt = $tgt.prev().add($tgt.parent()).last(); + } $tgt.addClass('section_highlight'); } }) -- cgit v1.2.3 From 30c1351e814dcc13497a61f65fa05a0901d5436a Mon Sep 17 00:00:00 2001 From: Michael Hamann Date: Mon, 10 Sep 2012 00:25:36 +0200 Subject: Fix media manager height handling after resize FS#2369 The height handling code was triggered before the width handling code and thus the right pane was below the other panes during the height calculations which caused strange effects. Now the height handling code is called again after adjusting the width of the right pane. --- lib/scripts/media.js | 2 ++ 1 file changed, 2 insertions(+) (limited to 'lib/scripts') diff --git a/lib/scripts/media.js b/lib/scripts/media.js index 8f3c00c88..182d5fefe 100644 --- a/lib/scripts/media.js +++ b/lib/scripts/media.js @@ -514,6 +514,8 @@ var dw_mediamanager = { }); } + dw_mediamanager.resize(); + dw_mediamanager.opacity_slider(); dw_mediamanager.portions_slider(); } -- cgit v1.2.3