vanilla-framework 4.34.1 → 4.35.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-framework",
-  "version": "4.34.1",
+  "version": "4.35.0",
   "author": {
     "email": "webteam@canonical.com",
     "name": "Canonical Webteam"
@@ -22,6 +22,17 @@
     "module"
   ],
   "license": "LGPL-3.0",
+  "module": "templates/static/js/index.js",
+  "exports": {
+    ".": {
+      "sass": "./_index.scss"
+    },
+    "./scss/*": {
+      "sass": "./scss/*"
+    },
+    "./js": "./templates/static/js/index.js",
+    "./js/*": "./templates/static/js/*.js"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/canonical/vanilla-framework"
@@ -54,7 +65,8 @@
     "/scss",
     "!/scss/docs",
     "!/scss/standalone",
-    "/templates/_macros"
+    "/templates/_macros",
+    "/templates/static/js"
   ],
   "devDependencies": {
     "@canonical/cookie-policy": "3.6.5",

package/scss/_layouts_application.scss

@@ -52,7 +52,7 @@ $application-layout--side-nav-width-expanded: 15rem !default;
       'nav  status status';
     grid-template-columns: min-content minmax(0, 1fr) minmax(0, min-content);
     grid-template-rows: min-content 1fr min-content;
-    height: 100vh;
+    height: 100dvh;
     overflow: hidden; // make sure panels transformed off-screen don't make the layout scroll
     width: 100vw;
   }
@@ -69,7 +69,7 @@ $application-layout--side-nav-width-expanded: 15rem !default;
 
     bottom: 0;
     box-shadow: $panel-drop-shadow;
-    height: 100vh;
+    height: 100dvh;
     left: 0;
     overflow-y: auto;
     position: fixed;
@@ -94,7 +94,7 @@ $application-layout--side-nav-width-expanded: 15rem !default;
   }
 
   .l-navigation__drawer {
-    height: 100vh;
+    height: 100dvh;
     width: auto;
 
     @media (min-width: $breakpoint-x-small) {

package/scss/_layouts_docs.scss

@@ -90,7 +90,7 @@
 
     // on largest screens we want to keep the table of contents sticky
     .l-docs__sticky-container {
-      max-height: 100vh;
+      max-height: 100dvh;
       overflow-y: auto;
       position: sticky;
       top: 0;

package/scss/_layouts_full-width.scss

@@ -25,7 +25,7 @@
       $navigation-top-height: $spv--large * 2 + map-get($settings-text-default, line-height);
 
       height: calc(100% - $navigation-top-height); // height of document reduced by height of top nav
-      min-height: calc(100vh - $navigation-top-height);
+      min-height: calc(100dvh - $navigation-top-height);
       position: absolute;
       width: $l-full-screen-aside-width;
       z-index: 1;

package/scss/_layouts_site.scss

@@ -6,7 +6,7 @@ $site-layout--breakpoint-sticky-footer: $breakpoint-small !default;
     .l-site {
       display: flex;
       flex-direction: column;
-      min-height: 100vh;
+      min-height: 100dvh;
     }
 
     .l-footer--sticky {

package/scss/_patterns_navigation.scss

@@ -843,8 +843,8 @@ $navigation-height: calc(map-get($settings-text-p, line-height) + 2 * $spv--larg
 
   .p-navigation--sliding.has-menu-open,
   .p-navigation--reduced.has-menu-open {
-    box-shadow: $colors--theme--background-overlay 0px 0px 0px 100vh;
-    height: 100vh;
+    box-shadow: $colors--theme--background-overlay 0px 0px 0px 100dvh;
+    height: 100dvh;
     overflow-y: hidden;
     position: fixed;
     width: 100vw;
@@ -866,7 +866,7 @@ $navigation-height: calc(map-get($settings-text-p, line-height) + 2 * $spv--larg
     }
     .p-navigation__nav {
       display: block;
-      height: calc(100vh - $navigation-height);
+      height: calc(100dvh - $navigation-height);
       overflow-x: hidden;
 
       .p-navigation__items {
@@ -893,7 +893,7 @@ $navigation-height: calc(map-get($settings-text-p, line-height) + 2 * $spv--larg
   .p-navigation--sliding .p-navigation__dropdown,
   .p-navigation--reduced .p-navigation__dropdown {
     display: block;
-    height: calc(100vh - $navigation-height);
+    height: calc(100dvh - $navigation-height);
     left: 100vw;
     position: absolute;
     top: 0;
@@ -1007,6 +1007,7 @@ $navigation-height: calc(map-get($settings-text-p, line-height) + 2 * $spv--larg
     .p-navigation__dropdown > :last-child {
       // should be enough to make some space at the bottom
       // and workaround the issues of 100vh not taking address toolbar into account
+      // this workaround might not be needed since we moved from 100vh to 100dvh
       padding-bottom: 3rem;
 
       @media (min-width: $breakpoint-navigation-threshold) {

package/scss/_patterns_side-navigation.scss

@@ -240,7 +240,7 @@
     // make whole navigation sticky on large screens
     .p-side-navigation.is-sticky,
     [class*='p-side-navigation--'].is-sticky {
-      max-height: 100vh;
+      max-height: 100dvh;
       overflow-y: auto;
       position: sticky;
       top: 0;

package/templates/static/js/example-tools.js

@@ -0,0 +1,181 @@
+const SUPPORTED_THEMES = ['light', 'dark', 'paper'];
+const [DEFAULT_COLOR_THEME] = SUPPORTED_THEMES;
+const COLOR_THEME_QUERY_PARAM_NAME = 'theme';
+var activeTheme = DEFAULT_COLOR_THEME;
+
+(function () {
+  function inIframe() {
+    try {
+      return window.self !== window.top;
+    } catch (e) {
+      return true;
+    }
+  }
+
+  function fragmentFromString(htmlString) {
+    var temp = document.createElement('template');
+    temp.innerHTML = htmlString;
+    return temp.content;
+  }
+
+  /**
+   * Gets the current query parameters
+   * @returns {URLSearchParams}
+   */
+  function getQueryParameters() {
+    return new URLSearchParams(window.location.search);
+  }
+
+  /**
+   * Sets the query parameter value of `key` to `value`
+   * @param {String} key
+   * @param {String} value
+   * @param {Boolean} reload Whether to cause a page load after updating the query parameter
+   * @returns {URLSearchParams} Query parameters after update
+   */
+  function setQueryParameter(key, value, reload = false) {
+    var currentQueryParams = getQueryParameters();
+
+    if (reload && currentQueryParams.get(key) !== value) {
+      currentQueryParams.set(key, value);
+      window.location.search = currentQueryParams.toString();
+    } else {
+      var url = new URL(window.location.href);
+      if (value) {
+        url.searchParams.set(key, value);
+      } else {
+        url.searchParams.delete(key);
+      }
+      if (window.location.href !== url.toString()) {
+        window.history.replaceState(null, null, url.toString());
+      }
+    }
+    return getQueryParameters();
+  }
+
+  /**
+   * Converts a theme name to its document class name, used for applying that color theme to the body
+   * @param {String} themeName
+   * @returns {string}
+   */
+  function convertThemeNameToClassName(themeName) {
+    return `is-${themeName}`;
+  }
+
+  /**
+   * Converts a theme name to its JS toggler identifier name, used for targeting it with JS events
+   * @param {String} themeName
+   * @returns {string}
+   */
+  function convertThemeNameToButtonIdentifier(themeName) {
+    return `js-${themeName}-theme-toggle`;
+  }
+
+  /**
+   * Converts a string to titlecase (first letter capitalized & subsequent letters lowercase)
+   * @param {String} str
+   * @returns {string}
+   */
+  function titleCase(str) {
+    return `${str.charAt(0).toUpperCase()}${str.slice(1).toLowerCase()}`;
+  }
+
+  /**
+   * Sets a color theme as active; removes all other color themes from active status
+   * @param {String} themeToSelect
+   */
+  function selectColorTheme(themeToSelect) {
+    // Apply the color theme to the document body
+    document.body.classList.add(convertThemeNameToClassName(themeToSelect));
+    // Remove the old color theme from the document body
+    if (themeToSelect !== activeTheme) document.body.classList.remove(convertThemeNameToClassName(activeTheme));
+
+    // Update address bar to reflect the newly selected color theme
+    setQueryParameter(COLOR_THEME_QUERY_PARAM_NAME, themeToSelect.toLowerCase());
+
+    // Update theme selector button states to reflect which one is currently active
+    var themeButtonToSelect = document.getElementById(convertThemeNameToButtonIdentifier(themeToSelect));
+    themeButtonToSelect?.setAttribute('aria-selected', 'true');
+    if (activeTheme) {
+      var themeButtonToDeselect = document.getElementById(convertThemeNameToButtonIdentifier(activeTheme));
+      themeButtonToDeselect?.setAttribute('aria-selected', 'false');
+    }
+
+    activeTheme = themeToSelect;
+  }
+
+  if (!inIframe()) {
+    document.documentElement.classList.add('u-baseline-grid');
+
+    document.addEventListener('DOMContentLoaded', function () {
+      var body = document.body;
+      var controls = document.createElement('div');
+      controls.classList.add('p-example-controls', 'p-form');
+      var queryParameters = getQueryParameters();
+      var requestedTheme = queryParameters.get(COLOR_THEME_QUERY_PARAM_NAME);
+      if (SHOW_THEME_SWITCH) {
+        // Some examples (i.e., button / dark) are pre-themed by their jinja template.
+        // if this is the case we don't modify the body class (it's already set); we just mark that theme as active.
+        var preExistingClassFromTemplate = SUPPORTED_THEMES.find((themeName) => body.classList.contains(convertThemeNameToClassName(themeName)));
+
+        if (preExistingClassFromTemplate) {
+          activeTheme = preExistingClassFromTemplate;
+        } else if (!requestedTheme) {
+          // No template-defined theme & no query-param-requested theme; fallback to default
+          selectColorTheme(DEFAULT_COLOR_THEME);
+        }
+
+        if (requestedTheme) {
+          if (SUPPORTED_THEMES.includes(requestedTheme)) {
+            selectColorTheme(requestedTheme);
+          } else {
+            // Query param used to request a theme that is not supported
+            selectColorTheme(DEFAULT_COLOR_THEME);
+          }
+        }
+
+        if (SUPPORTED_THEMES?.length > 1) {
+          var themeSwitcherControls = SUPPORTED_THEMES.map(
+            (themeName) =>
+              `<button id="${convertThemeNameToButtonIdentifier(themeName)}" class="p-segmented-control__button p-theme-toggle__button is-dense" role="button" aria-selected="${body.classList.contains(convertThemeNameToClassName(themeName))}" data-color-theme-name="${themeName}">${titleCase(themeName)}</button>`,
+          );
+          var themeSwitcherSegmentedControl = fragmentFromString(
+            `<div class="p-segmented-control u-theme-toggle"><div class="p-segmented-control__list">${themeSwitcherControls.join('')}</div></div>`,
+          );
+
+          controls.appendChild(themeSwitcherSegmentedControl);
+        }
+      } else if (requestedTheme) {
+        setQueryParameter(COLOR_THEME_QUERY_PARAM_NAME, null);
+      }
+      var baselineGridControl = fragmentFromString(
+        '<div class="u-baseline-grid__toggle"><label class="p-switch"><input type="checkbox" class="p-switch__input js-baseline-toggle" /><span class="p-switch__slider"></span><span class="p-switch__label">Toggle baseline grid</span></label></div>',
+      );
+      controls.appendChild(baselineGridControl);
+
+      const closeButtonFragment = fragmentFromString(`
+        <button class="p-button is-dense p-example-controls__close-button" id="js-example-toolbar-close-button">
+          Close
+        </button>
+      `);
+      controls.appendChild(closeButtonFragment);
+      body.appendChild(controls);
+
+      var closeButton = document.getElementById('js-example-toolbar-close-button');
+      closeButton.addEventListener('click', () => controls.remove());
+
+      // Below code relies on the controls already existing in the DOM, so must come after `body.appendChild`.
+      var themeToggleButtons = document.querySelectorAll('.p-theme-toggle__button');
+      themeToggleButtons.forEach((themeToggleButton) => {
+        themeToggleButton.addEventListener('click', () => {
+          selectColorTheme(themeToggleButton.getAttribute('data-color-theme-name'));
+        });
+      });
+
+      var toggle = document.querySelector('.js-baseline-toggle');
+      toggle.addEventListener('click', function (event) {
+        body.classList.toggle('u-baseline-grid');
+      });
+    });
+  }
+})();