kss - fixing doc

doc/styleguide/kss-assets/kss-fullscreen.js

@@ -0,0 +1,59 @@
+(function (window, document) {
+  'use strict';
+
+  // Set the configuration values on object creation.
+  // - idPrefix: The string that uniquely prefixes the ID of all elements that
+  //   can receive the fullscreen focus.
+  // - bodyClass: The class that is set on the body element when the fullscreen
+  //   mode is toggled on.
+  // - elementClass: the class that is set on the element that is receiving the
+  //   fullscreen focus.
+  var KssFullScreen = function (config) {
+    this.idPrefix = config.idPrefix || 'kss-fullscreen-';
+    this.bodyClass = config.bodyClass || 'kss-fullscreen-mode';
+    this.elementClass = config.elementClass || 'is-fullscreen';
+
+    this.init();
+  };
+
+  // Initialize the page to see if the fullscreen mode should be immediately
+  // turned on.
+  KssFullScreen.prototype.init = function () {
+    // Check the location hash to see if it matches the idPrefix.
+    if (window.location.hash.slice(0, this.idPrefix.length + 1) === '#' + this.idPrefix) {
+      this.setFocus(window.location.hash.slice(1 + this.idPrefix.length));
+    }
+
+    var self = this;
+    // Initialize all fullscreen toggle buttons.
+    document.querySelectorAll('a[data-kss-fullscreen]').forEach(function (button) {
+      // Get the section reference from the data attribute.
+      button.onclick = self.setFocus.bind(self, button.dataset.kssFullscreen);
+    });
+  };
+
+  // Activation function that takes the ID of the element that will receive
+  // fullscreen focus.
+  KssFullScreen.prototype.setFocus = function (id) {
+    var el;
+
+    // Find the element with the given ID and start fullscreen mode.
+    if (el = document.getElementById(id)) {
+      el.classList.toggle('is-fullscreen');
+      document.body.classList.toggle('kss-fullscreen-mode');
+
+      // When enabling the focus mode, change the location hash.
+      if (el.classList.contains('is-fullscreen')) {
+        window.location.hash = '#' + this.idPrefix + id;
+        // Don't follow the link location.
+        return false;
+      }
+    }
+
+    return true;
+  };
+
+  // Export to DOM global space.
+  window.KssFullScreen = KssFullScreen;
+
+})(window, document);