j1-template 2020.0.1 → 2020.0.6

data/lib/starter_web/assets/themes/j1/adapter/js/themer.js

@@ -116,7 +116,7 @@ j1.adapter['themer'] = (function (j1, window) {
   var logger;
   var logText;
 
-  var default_theme_css           = environment === 'production' ? '/assets/themes/j1/core/css/uno.min.css' : '/assets/themes/j1/core/css/uno.css';
+  var default_theme_css           = (environment == 'production') ? '/assets/themes/j1/core/css/uno.min.css' : '/assets/themes/j1/core/css/uno.css';
   var default_theme_extention_css = '{{themer_options.includeBootswatch}}';
   var default_theme_name          = 'Uno';
   var default_theme_author        = 'J1 Team';

data/lib/starter_web/assets/themes/j1/adapter/js/toccer.js

@@ -1,5 +1,5 @@
 ---
-regenerate:                             false
+regenerate:                             true
 ---
 
 {% capture j1_cache %}
@@ -127,10 +127,8 @@ j1.adapter['toccer'] = (function () {
         settings.collapseDepth = {{toccer_options.collapseDepth}};
       }
 
-      if (settings.headingsOffset === undefined) {
-        settings.scrollOffset = {{toccer_options.smoothScrollOffset}};
-      } else {
-        settings.scrollOffset = settings.headingsOffset
+      if (settings.scrollSmoothOffset === undefined) {
+        settings.scrollSmoothOffset = {{toccer_options.scrollSmoothOffset}};
       }
 
       if (settings.enabled === undefined) {
@@ -188,43 +186,42 @@ j1.adapter['toccer'] = (function () {
       _this.setState('running');
       logger.info('state: ' + _this.getState());
 
-
-      var bg_primary = j1.getStyleValue('bg-primary', 'background-color');
-
-      tocbot.init({
-        log:                    {{ toccer_options.log | json }},
-        activeLinkColor:        {{ toccer_options.activeLinkColor | json }},
-        tocSelector:            {{ toccer_options.tocSelector | json }},
-        headingSelector:        {{ toccer_options.headingSelector | json }},
-        ignoreSelector:         {{ toccer_options.ignoreSelector | json }},
-        contentSelector:        {{ toccer_options.contentSelector | json }},
-        collapseDepth:          settings.collapseDepth,
-        throttleTimeout:        {{ toccer_options.throttleTimeout | json }},
-        includeHtml:            false,
-        linkClass:              'toc-link',
-        extraLinkClasses:       '',
-        activeLinkClass:        'is-active-link',
-        listClass:              'toc-list',
-        extraListClasses:       '',
-        isCollapsedClass:       'is-collapsed',
-        collapsibleClass:       'is-collapsible',
-        listItemClass:          'toc-list-item',
-        positionFixedSelector:  '',
-        positionFixedClass:     'is-position-fixed',
-        fixedSidebarOffset:     'auto',
-        smoothScroll:           {{ toccer_options.smoothScrollEnabled | json }},
-        smoothScrollOffset:     {{ toccer_options.smoothScrollOffset | json }},
-        smoothScrollDuration:   {{ toccer_options.smoothScrollDuration | json }},
-        headingsOffset:         {{ toccer_options.headingsOffset | json }},
-        throttleTimeout:        {{ toccer_options.throttleTimeout | json }}
-      });
-
-      if (tocbot.options.log == true) {
-        // Writes all of the current option settings to JS console
-        console.log(tocbot.options);
-      }
-
-      return true;
+      // tocbot fired if page|mmenu is ready
+      //
+        var dependencies_met_j1_page_ready = setInterval (function () {
+          if (j1.getState() === 'finished') {
+            var bg_primary = j1.getStyleValue('bg-primary', 'background-color');
+
+            tocbot.init({
+              log:                    {{ toccer_options.log | json }},
+              activeLinkColor:        {{ toccer_options.activeLinkColor | json }},
+              tocSelector:            {{ toccer_options.tocSelector | json }},
+              headingSelector:        {{ toccer_options.headingSelector | json }},
+              ignoreSelector:         {{ toccer_options.ignoreSelector | json }},
+              contentSelector:        {{ toccer_options.contentSelector | json }},
+              collapseDepth:          settings.collapseDepth,
+              throttleTimeout:        {{ toccer_options.throttleTimeout | json }},
+              includeHtml:            false,
+              linkClass:              'toc-link',
+              extraLinkClasses:       '',
+              activeLinkClass:        'is-active-link',
+              listClass:              'toc-list',
+              extraListClasses:       '',
+              isCollapsedClass:       'is-collapsed',
+              collapsibleClass:       'is-collapsible',
+              listItemClass:          'toc-list-item',
+              positionFixedSelector:  '',
+              positionFixedClass:     'is-position-fixed',
+              fixedSidebarOffset:     'auto',
+              scrollSmooth:           {{ toccer_options.scrollSmooth | json }},
+              scrollSmoothDuration:   {{ toccer_options.scrollSmoothDuration | json }},
+              scrollSmoothOffset:     {{ toccer_options.scrollSmoothOffset | json }},
+              headingsOffset:         {{ toccer_options.headingsOffset | json }},
+              throttleTimeout:        {{ toccer_options.throttleTimeout | json }}
+            });
+            clearInterval(dependencies_met_j1_page_ready);
+        } // END j1 finished
+      }, 25); // END dependencies_met_j1_page_ready
     }, // END initToccerCore
 
     // -------------------------------------------------------------------------
@@ -350,4 +347,4 @@ j1.adapter['toccer'] = (function () {
 
 {% endcapture %}
 {{ j1_cache | strip_empty_lines }}
-{% assign j1_cache = nil %}
+{% assign j1_cache = nil %}

data/lib/starter_web/assets/themes/j1/extensions/mmenu-light/css/mmenu-light.css

@@ -0,0 +1,384 @@
+/*!
+ * Mmenu Light
+ * mmenujs.com/mmenu-light v3.0.4
+ *
+ * Copyright (c) Fred Heusschen
+ * www.frebsite.nl
+ *
+ * License: CC-BY-4.0
+ * http://creativecommons.org/licenses/by/4.0/
+ */
+
+:root {
+  --mm-ocd-width: 80%;
+  --mm-ocd-min-width: 200px;
+  --mm-ocd-max-width: 440px
+}
+
+body.mm-ocd-opened {
+  overflow-y: hidden;
+  -ms-scroll-chaining: none;
+  overscroll-behavior: none
+}
+
+/*
+  jadams, 2020-06-20: CSS/Offset to the NAV bar should be calculted
+  at runtime as a dyn style
+*/
+.mm-ocd {
+  position: fixed;
+  top: 80px; /* jadams, 2020-06-20: offset to the NAV bar */
+  right: 0;
+  bottom: 100%;
+  left: 0;
+  z-index: 9999;
+  overflow: hidden;
+  -ms-scroll-chaining: none;
+  overscroll-behavior: contain;
+  background: rgba(0, 0, 0, 0);
+  -webkit-transition-property: bottom, background-color;
+  -o-transition-property: bottom, background-color;
+  transition-property: bottom, background-color;
+  -webkit-transition-duration: 0s, .3s;
+  -o-transition-duration: 0s, .3s;
+  transition-duration: 0s, .3s;
+  -webkit-transition-timing-function: ease;
+  -o-transition-timing-function: ease;
+  transition-timing-function: ease;
+  -webkit-transition-delay: .45s, .15s;
+  -o-transition-delay: .45s, .15s;
+  transition-delay: .45s, .15s
+}
+
+.mm-ocd--open {
+  bottom: 0;
+  background: rgba(0, 0, 0, .25);
+  -webkit-transition-delay: 0s;
+  -o-transition-delay: 0s;
+  transition-delay: 0s
+}
+
+.mm-ocd__content {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 2;
+  width: 80%;
+  width: var(--mm-ocd-width);
+  min-width: 200px;
+  min-width: var(--mm-ocd-min-width);
+  max-width: 440px;
+  max-width: var(--mm-ocd-max-width);
+  background: #fff;
+  -webkit-transition-property: -webkit-transform;
+  transition-property: -webkit-transform;
+  -o-transition-property: transform;
+  transition-property: transform;
+  transition-property: transform, -webkit-transform;
+  -webkit-transition-duration: .3s;
+  -o-transition-duration: .3s;
+  transition-duration: .3s;
+  -webkit-transition-timing-function: ease;
+  -o-transition-timing-function: ease;
+  transition-timing-function: ease
+}
+
+.mm-ocd--left .mm-ocd__content {
+  left: 0;
+  -webkit-transform: translate3d(-100%, 0, 0);
+  transform: translate3d(-100%, 0, 0)
+}
+
+.mm-ocd--right .mm-ocd__content {
+  right: 0;
+  -webkit-transform: translate3d(100%, 0, 0);
+  transform: translate3d(100%, 0, 0)
+}
+
+.mm-ocd--open .mm-ocd__content {
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0)
+}
+
+.mm-ocd__backdrop {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 3;
+  width: calc(100% - 80%);
+  width: calc(100% - var(--mm-ocd-width));
+  min-width: calc(100% - 440px);
+  min-width: calc(100% - var(--mm-ocd-max-width));
+  max-width: calc(100% - 200px);
+  max-width: calc(100% - var(--mm-ocd-min-width));
+  background: rgba(3, 2, 1, 0)
+}
+
+.mm-ocd--left .mm-ocd__backdrop {
+  right: 0
+}
+
+.mm-ocd--right .mm-ocd__backdrop {
+  left: 0
+}
+
+.mm-spn,
+.mm-spn a,
+.mm-spn li,
+.mm-spn span,
+.mm-spn ul {
+  display: block;
+  padding: 0;
+  margin: 0;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+:root {
+  --mm-spn-item-height: 50px;
+  --mm-spn-item-indent: 20px;
+  --mm-spn-line-height: 24px
+}
+
+.mm-spn {
+  width: 100%;
+  height: 100%;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-overflow-scrolling: touch;
+  overflow: hidden;
+  -webkit-clip-path: inset(0 0 0 0);
+  clip-path: inset(0 0 0 0);
+  -webkit-transform: translateX(0);
+  -ms-transform: translateX(0);
+  transform: translateX(0)
+}
+
+.mm-spn ul {
+  -webkit-overflow-scrolling: touch;
+  position: fixed;
+  top: 0;
+  left: 100%;
+  bottom: 0;
+  z-index: 2;
+  width: 130%;
+  padding-right: 30%;
+  line-height: 24px;
+  line-height: var(--mm-spn-line-height);
+  overflow: visible;
+  overflow-y: auto;
+  background: inherit;
+  -webkit-transition: left .3s ease 0s;
+  -o-transition: left .3s ease 0s;
+  transition: left .3s ease 0s;
+  cursor: default
+}
+
+.mm-spn ul:after {
+  content: '';
+  display: block;
+  height: 50px;
+  height: var(--mm-spn-item-height)
+}
+
+.mm-spn>ul {
+  left: 0
+}
+
+.mm-spn ul.mm-spn--open {
+  left: 0
+}
+
+.mm-spn ul.mm-spn--parent {
+  left: -30%;
+  overflow-y: hidden
+}
+
+.mm-spn li {
+  position: relative;
+  background: inherit;
+  cursor: pointer
+}
+
+.mm-spn li:before {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 25px;
+  top: calc(var(--mm-spn-item-height)/ 2);
+  right: 25px;
+  right: calc(var(--mm-spn-item-height)/ 2);
+  z-index: 0;
+  width: 10px;
+  height: 10px;
+  border-top: 2px solid;
+  border-right: 2px solid;
+  -webkit-transform: rotate(45deg) translate(0, -50%);
+  -ms-transform: rotate(45deg) translate(0, -50%);
+  transform: rotate(45deg) translate(0, -50%);
+  opacity: .4
+}
+
+.mm-spn li:after {
+  content: '';
+  display: block;
+  margin-left: 20px;
+  margin-left: var(--mm-spn-item-indent);
+  border-top: 1px solid;
+  opacity: .15
+}
+
+.mm-spn a,
+.mm-spn span {
+  position: relative;
+  z-index: 1;
+  padding: 13px 20px;
+  padding: calc((var(--mm-spn-item-height) - var(--mm-spn-line-height))/ 2) var(--mm-spn-item-indent)
+}
+
+.mm-spn a {
+  background: inherit;
+  color: inherit;
+  text-decoration: none
+}
+
+.mm-spn a:not(:last-child) {
+  width: calc(100% - 50px);
+  width: calc(100% - var(--mm-spn-item-height))
+}
+
+.mm-spn a:not(:last-child):after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  border-right: 1px solid;
+  opacity: .15
+}
+
+.mm-spn span {
+  background: 0 0
+}
+
+.mm-spn.mm-spn--navbar {
+  cursor: pointer
+}
+
+.mm-spn.mm-spn--navbar:before {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 25px;
+  top: calc(var(--mm-spn-item-height)/ 2);
+  left: 20px;
+  left: var(--mm-spn-item-indent);
+  width: 10px;
+  height: 10px;
+  margin-top: 2px;
+  border-top: 2px solid;
+  border-left: 2px solid;
+  -webkit-transform: rotate(-45deg) translate(50%, -50%);
+  -ms-transform: rotate(-45deg) translate(50%, -50%);
+  transform: rotate(-45deg) translate(50%, -50%);
+  opacity: .4
+}
+
+.mm-spn.mm-spn--navbar.mm-spn--main {
+  cursor: default
+}
+
+.mm-spn.mm-spn--navbar.mm-spn--main:before {
+  content: none;
+  display: none
+}
+
+.mm-spn.mm-spn--navbar:after {
+  content: attr(data-mm-spn-title);
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 50px;
+  height: var(--mm-spn-item-height);
+  padding: 0 40px;
+  padding: 0 calc(var(--mm-spn-item-indent) * 2);
+  line-height: 50px;
+  line-height: var(--mm-spn-item-height);
+  opacity: .4;
+  text-align: left;  /* jadams, 2020-06-20: set menu title to the left */
+  overflow: hidden;
+  white-space: nowrap;
+  -o-text-overflow: ellipsis;
+  text-overflow: ellipsis;
+  font-size: x-large; /* jadams, 2020-06-20: increase size of the menu title */
+}
+
+.mm-spn.mm-spn--navbar.mm-spn--main:after {
+  padding-left: 20px;
+  padding-left: var(--mm-spn-item-indent)
+}
+
+.mm-spn.mm-spn--navbar ul {
+  top: 51px;
+  top: calc(var(--mm-spn-item-height) + 1px)
+}
+
+.mm-spn.mm-spn--navbar ul:before {
+  content: '';
+  display: block;
+  position: fixed;
+  top: inherit;
+  z-index: 2;
+  width: 100%;
+  border-top: 1px solid currentColor;
+  opacity: .15
+}
+
+.mm-spn.mm-spn--light {
+  color: #444;
+  background: #f3f3f3
+}
+
+/* jadams, 2020-06-20: set j1 template colors (dark theme) */
+.mm-spn.mm-spn--dark {
+  color: #e3e3e3;
+  background: #191919
+}
+
+.mm-spn.mm-spn--vertical {
+  overflow-y: auto
+}
+
+.mm-spn.mm-spn--vertical ul {
+  width: 100%;
+  padding-right: 0;
+  position: static
+}
+
+.mm-spn.mm-spn--vertical ul ul {
+  display: none;
+  padding-left: 20px;
+  padding-left: var(--mm-spn-item-indent)
+}
+
+.mm-spn.mm-spn--vertical ul ul:after {
+  height: 25px;
+  height: calc(var(--mm-spn-item-height)/ 2)
+}
+
+.mm-spn.mm-spn--vertical ul.mm-spn--open {
+  display: block
+}
+
+.mm-spn.mm-spn--vertical li.mm-spn--open:before {
+  -webkit-transform: rotate(135deg) translate(-50%, 0);
+  -ms-transform: rotate(135deg) translate(-50%, 0);
+  transform: rotate(135deg) translate(-50%, 0)
+}
+
+.mm-spn.mm-spn--vertical ul ul li:last-child:after {
+  content: none;
+  display: none
+}