From 07960e835b16ed081bf3b828ac322d4368a89793 Mon Sep 17 00:00:00 2001 From: Johannes Raggam Date: Thu, 12 Mar 2020 15:43:29 +0100 Subject: [PATCH 1/7] Format code --- src/pat/navigation/index.html | 92 ++++++++++--------- src/pat/navigation/pattern-test-response.html | 18 ++-- 2 files changed, 59 insertions(+), 51 deletions(-) diff --git a/src/pat/navigation/index.html b/src/pat/navigation/index.html index a2ef35331..371c04cf4 100644 --- a/src/pat/navigation/index.html +++ b/src/pat/navigation/index.html @@ -1,46 +1,54 @@ - + + + Navigation demo + + + + +

Navigation demo

+
+
+ +
Content will appear here
+
+
+ diff --git a/src/pat/navigation/pattern-test-response.html b/src/pat/navigation/pattern-test-response.html index ea8eff438..7b129349f 100644 --- a/src/pat/navigation/pattern-test-response.html +++ b/src/pat/navigation/pattern-test-response.html @@ -1,23 +1,23 @@ - - - - + + + +
- Content for tab 1 + Content for tab 1
- Content for tab 2 + Content for tab 2
- Content for tab 1.1 + Content for tab 1.1
- Content for tab 1.2 + Content for tab 1.2
- + From 9a220599a9646291959ac1e83367cc33d0e79836 Mon Sep 17 00:00:00 2001 From: Johannes Raggam Date: Thu, 12 Mar 2020 15:44:07 +0100 Subject: [PATCH 2/7] Fix location of fontello --- _sass/_settings.scss | 10 ++++----- style/patterns.css | 52 ++++++++++++++++++++++---------------------- 2 files changed, 30 insertions(+), 32 deletions(-) diff --git a/_sass/_settings.scss b/_sass/_settings.scss index 5d62ee182..8b437f68c 100644 --- a/_sass/_settings.scss +++ b/_sass/_settings.scss @@ -2,7 +2,7 @@ // with Fontello.com Make sure the fontello folder is placed in your // style folder -@import "/patternslib/style/fontello/css/fontello.css"; +@import "/style/fontello/css/fontello.css"; // Assets //@import url(http://fonts.googleapis.com/css?family=Sorts+Mill+Goudy:400,400italic); @@ -14,11 +14,11 @@ // $felt: #89AA74; $felt: #565656; -$colour-accent: #0198E1 !default; +$colour-accent: #0198e1 !default; $colour-base: #efefef !default; $colour-alert: red !default; $colour-success: green !default; -$colour-notice: #FFFFD6 !default; +$colour-notice: #ffffd6 !default; $colour-warning: orange !default; $colour-error: red !default; $colour-info: $colour-notice !default; @@ -37,7 +37,7 @@ $glyph-radio-button-active: "\e2001"; $glyph-close: "\e2005"; // We use these to control various global styles -$body-font-family: 'Source Sans Pro', sans-serif; +$body-font-family: "Source Sans Pro", sans-serif; $body-font-weight: $font-weight-normal; $body-font-style: normal; @@ -51,5 +51,3 @@ $cat-layout: #a1ced2; $break-small: 768px !default; $break-large: 769px !default; - - diff --git a/style/patterns.css b/style/patterns.css index 3a2421691..de5af079d 100644 --- a/style/patterns.css +++ b/style/patterns.css @@ -1,15 +1,15 @@ @charset "UTF-8"; -@import url(/patternslib/style/fontello/css/fontello.css); -@import url(/patternslib/style/fontello/css/fontello.css); -@import url(/patternslib/style/fontello/css/fontello.css); -@import url(/patternslib/style/fontello/css/fontello.css); -@import url(/patternslib/style/fontello/css/fontello.css); -@import url(/patternslib/style/fontello/css/fontello.css); -@import url(/patternslib/style/fontello/css/fontello.css); -@import url(/patternslib/style/fontello/css/fontello.css); -@import url(/patternslib/style/fontello/css/fontello.css); -@import url(/patternslib/style/fontello/css/fontello.css); -@import url(/patternslib/style/fontello/css/fontello.css); +@import url(/style/fontello/css/fontello.css); +@import url(/style/fontello/css/fontello.css); +@import url(/style/fontello/css/fontello.css); +@import url(/style/fontello/css/fontello.css); +@import url(/style/fontello/css/fontello.css); +@import url(/style/fontello/css/fontello.css); +@import url(/style/fontello/css/fontello.css); +@import url(/style/fontello/css/fontello.css); +@import url(/style/fontello/css/fontello.css); +@import url(/style/fontello/css/fontello.css); +@import url(/style/fontello/css/fontello.css); .pat-button { font-family: "Source Sans Pro", sans-serif; margin: 0 0.5em 0 0; @@ -43,7 +43,7 @@ -webkit-appearance: none; } ::-webkit-search-cancel-button:hover { - color: #0198E1; } + color: #0198e1; } ::-webkit-search-cancel-button::after { content: '\e803'; font-family: fontello; @@ -173,7 +173,7 @@ form { color: black; } form .pat-message.notice, form .message.notice { - background-color: #FFFFD6; } + background-color: #ffffd6; } form .pat-message.warning, form .message.warning { background-color: orange; @@ -209,7 +209,7 @@ form { form input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; } form input[type=search]::-webkit-search-cancel-button:hover { - color: #0198E1; } + color: #0198e1; } form input[type=search]::-webkit-search-cancel-button::after { content: '\e803'; font-family: fontello; @@ -240,7 +240,7 @@ form { height: 1.4em; width: 1.4em; border-radius: 50%; - background: #0198E1; + background: #0198e1; margin-top: -0.45em; } form input[type=range]::-moz-range-track { height: 0.5em; @@ -252,7 +252,7 @@ form { height: 1.4em; width: 1.4em; border-radius: 50%; - background: #0198E1; } + background: #0198e1; } form input[type=range]:-moz-focusring { outline: 1px solid white; outline-offset: -1px; } @@ -270,7 +270,7 @@ form { height: 1.4em; width: 1.4em; border-radius: 50%; - background: #0198E1; } + background: #0198e1; } form input[type=range]:focus::-ms-fill-lower { background: #888; } form input[type=range]:focus::-ms-fill-upper { @@ -860,7 +860,7 @@ disabled look for disabled choices in the results dropdown -moz-user-select: none; -ms-user-select: none; user-select: none; - background-color: #0198E1; + background-color: #0198e1; font-size: 0.9em; font-weight: normal; } .select2-container-multi .select2-choices .select2-search-choice.confirmed { @@ -2256,7 +2256,7 @@ p.carousel-nav a.current { -webkit-appearance: none; } ::-webkit-search-cancel-button:hover { - color: #0198E1; } + color: #0198e1; } ::-webkit-search-cancel-button::after { content: '\e803'; font-family: fontello; @@ -2803,7 +2803,7 @@ textarea { -webkit-appearance: none; } ::-webkit-search-cancel-button:hover { - color: #0198E1; } + color: #0198e1; } ::-webkit-search-cancel-button::after { content: '\e803'; font-family: fontello; @@ -2978,7 +2978,7 @@ button.pat-button[disabled="disabled"], button.pat-button:disabled { fieldset.focus > .legend, label.focus { - color: #0198E1; } + color: #0198e1; } :fullscreen { background-color: transparent; } @@ -4596,7 +4596,7 @@ div.pat-modal { -webkit-appearance: none; } ::-webkit-search-cancel-button:hover { - color: #0198E1; } + color: #0198e1; } ::-webkit-search-cancel-button::after { content: '\e803'; font-family: fontello; @@ -4726,7 +4726,7 @@ button.pat-button[disabled="disabled"], button.pat-button:disabled { .pat-notification-panel a { text-decoration: underline; } .pat-notification-panel.notice { - background-color: #FFFFD6; } + background-color: #ffffd6; } .pat-notification-panel.success { background-color: green; color: black; } @@ -4743,7 +4743,7 @@ button.pat-button[disabled="disabled"], button.pat-button:disabled { .pat-notification-panel.error * { color: white !important; } .pat-notification-panel.info { - background-color: #FFFFD6; + background-color: #ffffd6; color: #247fad; } .pat-notification-panel p:last-of-type { margin-bottom: 10px; } @@ -4927,9 +4927,9 @@ li.mode-Blue { .tooltip-container.tr .pointer, .tooltip-container.br .pointer { margin-left: -20px; } .tooltip-container.info > div { - background-color: #FFFFD6; } + background-color: #ffffd6; } .tooltip-container.info .pointer { - background-color: #FFFFD6; } + background-color: #ffffd6; } .tooltip-container.rich > div:after { content: " "; display: table; From 1112bba6c4e1d3eafd7f0608e7302d6078760cd3 Mon Sep 17 00:00:00 2001 From: Johannes Raggam Date: Thu, 12 Mar 2020 16:14:42 +0100 Subject: [PATCH 3/7] no need for each here. --- src/pat/navigation/index.html | 132 +++++++++++++++++++++---------- src/pat/navigation/navigation.js | 85 ++++++++++---------- 2 files changed, 131 insertions(+), 86 deletions(-) diff --git a/src/pat/navigation/index.html b/src/pat/navigation/index.html index 371c04cf4..0137e2a40 100644 --- a/src/pat/navigation/index.html +++ b/src/pat/navigation/index.html @@ -5,50 +5,98 @@ Navigation demo + -

Navigation demo

-
-
-
    -
  • - Tab 1 +
    +

    Navigation demos

    +
    + +
    +
    +

    Example 1

    +
    + +
    + +
    +
    +

    + Example 2, same as above. Shows that multiple navigation patterns can + be used on same site. +

    +
    + +
    + +
    Content will appear here
    - -
    • -
  • - Tab 2 -
    • -
-
Content will appear here
-
-
diff --git a/src/pat/navigation/navigation.js b/src/pat/navigation/navigation.js index f950f419a..5d6269306 100644 --- a/src/pat/navigation/navigation.js +++ b/src/pat/navigation/navigation.js @@ -9,57 +9,54 @@ define([ name: "navigation", trigger: "nav, .navigation, .pat-navigation", init: function($el) { - return $el.each(function() { - var $el = $(this); - var curpath = window.location.pathname; - log.debug("current path:", curpath); + var curpath = window.location.pathname; + log.debug("current path:", curpath); - // check whether to load - if ($el.hasClass("navigation-load-current")) { - $el.find("a.current, .current a").click(); - // check for current elements injected here - $el.on("patterns-injected-scanned", function(ev) { - var $target = $(ev.target); - if ($target.is("a.current")) - $target.click(); - if ($target.is(".current")) - $target.find("a").click(); - _._updatenavpath($el); - }); - } - - // An anchor within this navigation triggered injection - $el.on("patterns-inject-triggered", "a", function(ev) { + // check whether to load + if ($el.hasClass("navigation-load-current")) { + $el.find("a.current, .current a").click(); + // check for current elements injected here + $el.on("patterns-injected-scanned", function(ev) { var $target = $(ev.target); - // remove all set current classes - $el.find(".current").removeClass("current"); - // set .current on target - $target.addClass("current"); - // If target's parent is an LI, also set current there - $target.parent("li").addClass("current"); + if ($target.is("a.current")) + $target.click(); + if ($target.is(".current")) + $target.find("a").click(); _._updatenavpath($el); }); + } - // set current class if it is not set - if ($el.find(".current").length === 0) { - $el.find("li a").each(function() { - var $a = $(this), - $li = $a.parents("li:first"), - url = $a.attr("href"), - path; - if (typeof url === "undefined") { - return; - } - path = _._pathfromurl(url); - log.debug("checking url:", url, "extracted path:", path); - if (_._match(curpath, path)) { - log.debug("found match", $li); - $li.addClass("current"); - } - }); - } + // An anchor within this navigation triggered injection + $el.on("patterns-inject-triggered", "a", function(ev) { + var $target = $(ev.target); + // remove all set current classes + $el.find(".current").removeClass("current"); + // set .current on target + $target.addClass("current"); + // If target's parent is an LI, also set current there + $target.parent("li").addClass("current"); _._updatenavpath($el); }); + + // set current class if it is not set + if ($el.find(".current").length === 0) { + $el.find("li a").each(function() { + var $a = $(this), + $li = $a.parents("li:first"), + url = $a.attr("href"), + path; + if (typeof url === "undefined") { + return; + } + path = _._pathfromurl(url); + log.debug("checking url:", url, "extracted path:", path); + if (_._match(curpath, path)) { + log.debug("found match", $li); + $li.addClass("current"); + } + }); + } + _._updatenavpath($el); }, _updatenavpath: function($el) { $el.find(".navigation-in-path").removeClass("navigation-in-path"); From 3495876d7767e6ae6db0e95afe0ec00a70671c10 Mon Sep 17 00:00:00 2001 From: Johannes Raggam Date: Thu, 12 Mar 2020 16:48:44 +0100 Subject: [PATCH 4/7] Do not set the ``.navigation-in-path`` class for elenents already marked with ``.current``. --- CHANGES.md | 2 ++ src/pat/navigation/navigation.js | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/CHANGES.md b/CHANGES.md index 836ae18ea..c20c5133b 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -5,6 +5,8 @@ Features ~~~~~~~~ +- Navigation: + - Do not set the ``.navigation-in-path`` class for elenents already marked with ``.current``. - Add ``utils.getCSSValue`` for retrieving CSS property values for DOM nodes. - Add configurable scrolling behavior to pat-inject. - Add ``webpack-visualizer-plugin`` for analyzation of generated bundles. diff --git a/src/pat/navigation/navigation.js b/src/pat/navigation/navigation.js index 5d6269306..e9a1409e6 100644 --- a/src/pat/navigation/navigation.js +++ b/src/pat/navigation/navigation.js @@ -60,7 +60,7 @@ define([ }, _updatenavpath: function($el) { $el.find(".navigation-in-path").removeClass("navigation-in-path"); - $el.find("li:has(.current)").addClass("navigation-in-path"); + $el.find("li:not(.current):has(.current)").addClass("navigation-in-path"); }, _match: function(curpath, path) { if (!path) { From 7002c0ea535b72dd213f270016962e752fbe02c6 Mon Sep 17 00:00:00 2001 From: Johannes Raggam Date: Thu, 12 Mar 2020 17:21:44 +0100 Subject: [PATCH 5/7] Allow configuration of "in path" and "current" classes via ``in-path-class`` and ``current-class`` configuration options. --- CHANGES.md | 1 + src/pat/navigation/navigation.js | 56 +++++++++++++++++++------------- 2 files changed, 35 insertions(+), 22 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index c20c5133b..fbadc50f6 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -7,6 +7,7 @@ Features - Navigation: - Do not set the ``.navigation-in-path`` class for elenents already marked with ``.current``. + - Allow configuration of "in path" and "current" classes via ``in-path-class`` and ``current-class`` configuration options. - Add ``utils.getCSSValue`` for retrieving CSS property values for DOM nodes. - Add configurable scrolling behavior to pat-inject. - Add ``webpack-visualizer-plugin`` for analyzation of generated bundles. diff --git a/src/pat/navigation/navigation.js b/src/pat/navigation/navigation.js index e9a1409e6..6bc8aae27 100644 --- a/src/pat/navigation/navigation.js +++ b/src/pat/navigation/navigation.js @@ -1,47 +1,58 @@ define([ "jquery", + "pat-registry", + "pat-parser", "pat-logger", - "pat-registry" -], function($, logger, registry) { - var log = logger.getLogger("pat.navigation"); +], function($, registry, Parser, logger) { + var log = logger.getLogger("navigation"); + var parser = new Parser("navigation"); + + parser.addArgument("in-path-class", "navigation-in-path"); + parser.addArgument("current-class", "current"); var _ = { name: "navigation", trigger: "nav, .navigation, .pat-navigation", - init: function($el) { + current: null, + in_path: null, + init: function($el, opts) { + this.options = parser.parse($el, opts); + this.current = this.options.currentClass; + this.in_path = this.options.inPathClass; + var curpath = window.location.pathname; log.debug("current path:", curpath); // check whether to load if ($el.hasClass("navigation-load-current")) { - $el.find("a.current, .current a").click(); + $el.find("a." + this.current, "." + this.current + " a").click(); // check for current elements injected here $el.on("patterns-injected-scanned", function(ev) { var $target = $(ev.target); - if ($target.is("a.current")) + if ($target.is("a." + this.current)) $target.click(); - if ($target.is(".current")) + if ($target.is("." + this.current)) $target.find("a").click(); _._updatenavpath($el); - }); + }.bind(this)); } // An anchor within this navigation triggered injection $el.on("patterns-inject-triggered", "a", function(ev) { var $target = $(ev.target); // remove all set current classes - $el.find(".current").removeClass("current"); - // set .current on target - $target.addClass("current"); - // If target's parent is an LI, also set current there - $target.parent("li").addClass("current"); + $el.find("." + this.current).removeClass(this.current); + // set current class on target + $target.addClass(this.current); + // If target's parent is an LI, also set current class there + $target.parent("li").addClass(this.current); _._updatenavpath($el); - }); + }.bind(this)); - // set current class if it is not set - if ($el.find(".current").length === 0) { - $el.find("li a").each(function() { - var $a = $(this), + // Set current class if it is not set + if ($el.find(this.current).length === 0) { + document.querySelectorAll("li a").forEach(function (it) { + var $a = $(it), $li = $a.parents("li:first"), url = $a.attr("href"), path; @@ -52,15 +63,16 @@ define([ log.debug("checking url:", url, "extracted path:", path); if (_._match(curpath, path)) { log.debug("found match", $li); - $li.addClass("current"); + $li.addClass(this.current); } - }); + }.bind(this)); } _._updatenavpath($el); }, _updatenavpath: function($el) { - $el.find(".navigation-in-path").removeClass("navigation-in-path"); - $el.find("li:not(.current):has(.current)").addClass("navigation-in-path"); + if (this.in_path === null) { return; } + $el.find(this.in_path).removeClass(this.in_path); + $el.find("li:not(." + this.current + "):has(." + this.current + ")").addClass(this.in_path); }, _match: function(curpath, path) { if (!path) { From 63f1c2f250244f11619547e8c2c9c0e45bf02c8d Mon Sep 17 00:00:00 2001 From: Johannes Raggam Date: Thu, 12 Mar 2020 17:23:46 +0100 Subject: [PATCH 6/7] remove empty navigation.scss --- Makefile | 1 - src/pat/navigation/_navigation.scss | 0 2 files changed, 1 deletion(-) delete mode 100644 src/pat/navigation/_navigation.scss diff --git a/Makefile b/Makefile index d20c33b30..0f4e5d844 100644 --- a/Makefile +++ b/Makefile @@ -96,7 +96,6 @@ all_css:: css @$(SASS) -I . -I _sass src/pat/markdown/_markdown.scss src/pat/markdown/markdown.css @$(SASS) -I . -I _sass src/pat/masonry/_masonry.scss src/pat/masonry/masonry.css @$(SASS) -I . -I _sass src/pat/modal/_modal.scss src/pat/modal/modal.css - @$(SASS) -I . -I _sass src/pat/navigation/_navigation.scss src/pat/navigation/navigation.css @$(SASS) -I . -I _sass src/pat/notification/_notification.scss src/pat/notification/notification.css @$(SASS) -I . -I _sass src/pat/slideshow-builder/_slideshow-builder.scss src/pat/slideshow-builder/slideshow-builder.css @$(SASS) -I . -I _sass src/pat/sortable/_sortable.scss src/pat/sortable/sortable.css diff --git a/src/pat/navigation/_navigation.scss b/src/pat/navigation/_navigation.scss deleted file mode 100644 index e69de29bb..000000000 From eea4d5bef5d749e1ec175f3cc56c6b5e425c1e1f Mon Sep 17 00:00:00 2001 From: Alexander Pilz Date: Thu, 12 Mar 2020 17:36:28 +0100 Subject: [PATCH 7/7] fixed lock file --- package-lock.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7c9814cb1..64f8a9d06 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11963,9 +11963,9 @@ } }, "tippy.js": { - "version": "5.2.1", - "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-5.2.1.tgz", - "integrity": "sha512-66UT6JRVn3dXNCORE+0UvUK3JZqV/VhLlU6HTDm3FmrweUUFUxUGvT8tUQ7ycMp+uhuLAwQw6dBabyC+iKf/MA==", + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-5.2.0.tgz", + "integrity": "sha512-bmZu+TP1Fs6+1cq0GI1lfS9R0QxXDthP45zNGSLLMY5p2uC8sODNL4TiUOhEG25q5upk5LUrTnCkc+Q3H2aZJQ==", "requires": { "popper.js": "^1.16.0" }