diff --git a/CHANGES.md b/CHANGES.md index 836ae18ea..fbadc50f6 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -5,6 +5,9 @@ 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/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/_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/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" } diff --git a/src/pat/navigation/_navigation.scss b/src/pat/navigation/_navigation.scss deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/pat/navigation/index.html b/src/pat/navigation/index.html index a2ef35331..0137e2a40 100644 --- a/src/pat/navigation/index.html +++ b/src/pat/navigation/index.html @@ -1,46 +1,102 @@ - + + + Navigation demo + + + + + +
+

Navigation demos

+
- -pat-navigation demo page - - - - -
- Description -
-

Demo

-
-
-

Testing tab .current behaviour

-
-
- Documentation -
- + + +
  • + Tab 2 +
    • + + + +
    +
    +

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

    +
    + +
    + +
    Content will appear here
    + + diff --git a/src/pat/navigation/navigation.js b/src/pat/navigation/navigation.js index f950f419a..6bc8aae27 100644 --- a/src/pat/navigation/navigation.js +++ b/src/pat/navigation/navigation.js @@ -1,69 +1,78 @@ 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) { - return $el.each(function() { - var $el = $(this); - var curpath = window.location.pathname; - log.debug("current path:", curpath); + 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; - // 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); - }); - } + var curpath = window.location.pathname; + log.debug("current path:", curpath); - // 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." + this.current, "." + this.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." + this.current)) + $target.click(); + if ($target.is("." + this.current)) + $target.find("a").click(); _._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), - $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("." + 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(this.current).length === 0) { + document.querySelectorAll("li a").forEach(function (it) { + var $a = $(it), + $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(this.current); + } + }.bind(this)); + } + _._updatenavpath($el); }, _updatenavpath: function($el) { - $el.find(".navigation-in-path").removeClass("navigation-in-path"); - $el.find("li: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) { 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
    - + 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;