ns-styleguide 1.0.0

data/templates/project/libs/foundation/foundation.reveal.js

@@ -0,0 +1,277 @@
+/*jslint unparam: true, browser: true, indent: 2 */
+
+;(function ($, window, document, undefined) {
+  'use strict';
+
+  Foundation.libs.reveal = {
+    name: 'reveal',
+
+    version : '4.1.3',
+
+    locked : false,
+
+    settings : {
+      animation: 'fadeAndPop',
+      animationSpeed: 250,
+      closeOnBackgroundClick: true,
+      dismissModalClass: 'close-reveal-modal',
+      bgClass: 'reveal-modal-bg',
+      open: function(){},
+      opened: function(){},
+      close: function(){},
+      closed: function(){},
+      bg : $('.reveal-modal-bg'),
+      css : {
+        open : {
+          'opacity': 0,
+          'visibility': 'visible',
+          'display' : 'block'
+        },
+        close : {
+          'opacity': 1,
+          'visibility': 'hidden',
+          'display': 'none'
+        }
+      }
+    },
+
+    init : function (scope, method, options) {
+      this.scope = scope || this.scope;
+      Foundation.inherit(this, 'data_options delay');
+
+      if (typeof method === 'object') {
+        $.extend(true, this.settings, method);
+      } else if (typeof options !== 'undefined') {
+        $.extend(true, this.settings, options);
+      }
+
+      if (typeof method != 'string') {
+        this.events();
+
+        return this.settings.init;
+      } else {
+        return this[method].call(this, options);
+      }
+    },
+
+    events : function () {
+      var self = this;
+
+      $(this.scope)
+        .off('.fndtn.reveal')
+        .on('click.fndtn.reveal', '[data-reveal-id]', function (e) {
+          e.preventDefault();
+          if (!self.locked) {
+            self.locked = true;
+            self.open.call(self, $(this));
+          }
+        })
+        .on('click.fndtn.reveal touchend.click.fndtn.reveal', this.close_targets(), function (e) {
+          e.preventDefault();
+          if (!self.locked) {
+            var settings = $.extend({}, self.settings, self.data_options($('.reveal-modal.open')));
+            if ($(e.target)[0] === $('.' + settings.bgClass)[0] && !settings.closeOnBackgroundClick) {
+              return;
+            }
+
+            self.locked = true;
+            self.close.call(self, $(this).closest('.reveal-modal'));
+          }
+        })
+        .on('open.fndtn.reveal', '.reveal-modal', this.settings.open)
+        .on('opened.fndtn.reveal', '.reveal-modal', this.settings.opened)
+        .on('opened.fndtn.reveal', '.reveal-modal', this.open_video)
+        .on('close.fndtn.reveal', '.reveal-modal', this.settings.close)
+        .on('closed.fndtn.reveal', '.reveal-modal', this.settings.closed)
+        .on('closed.fndtn.reveal', '.reveal-modal', this.close_video);
+
+      return true;
+    },
+
+    open : function (target) {
+      if (target) {
+        var modal = $('#' + target.data('reveal-id'));
+      } else {
+        var modal = $(this.scope);
+      }
+
+      if (!modal.hasClass('open')) {
+        var open_modal = $('.reveal-modal.open');
+
+        if (typeof modal.data('css-top') === 'undefined') {
+          modal.data('css-top', parseInt(modal.css('top'), 10))
+            .data('offset', this.cache_offset(modal));
+        }
+
+        modal.trigger('open');
+
+        if (open_modal.length < 1) {
+          this.toggle_bg(modal);
+        }
+        this.hide(open_modal, this.settings.css.close);
+        this.show(modal, this.settings.css.open);
+      }
+    },
+
+    close : function (modal) {
+
+      var modal = modal || $(this.scope),
+          open_modals = $('.reveal-modal.open');
+
+      if (open_modals.length > 0) {
+        this.locked = true;
+        modal.trigger('close');
+        this.toggle_bg(modal);
+        this.hide(open_modals, this.settings.css.close);
+      }
+    },
+
+    close_targets : function () {
+      var base = '.' + this.settings.dismissModalClass;
+
+      if (this.settings.closeOnBackgroundClick) {
+        return base + ', .' + this.settings.bgClass;
+      }
+
+      return base;
+    },
+
+    toggle_bg : function (modal) {
+      if ($('.reveal-modal-bg').length === 0) {
+        this.settings.bg = $('<div />', {'class': this.settings.bgClass})
+          .appendTo('body');
+      }
+
+      if (this.settings.bg.filter(':visible').length > 0) {
+        this.hide(this.settings.bg);
+      } else {
+        this.show(this.settings.bg);
+      }
+    },
+
+    show : function (el, css) {
+      // is modal
+      if (css) {
+        if (/pop/i.test(this.settings.animation)) {
+          css.top = $(window).scrollTop() - el.data('offset') + 'px';
+          var end_css = {
+            top: $(window).scrollTop() + el.data('css-top') + 'px',
+            opacity: 1
+          };
+
+          return this.delay(function () {
+            return el
+              .css(css)
+              .animate(end_css, this.settings.animationSpeed, 'linear', function () {
+                this.locked = false;
+                el.trigger('opened');
+              }.bind(this))
+              .addClass('open');
+          }.bind(this), this.settings.animationSpeed / 2);
+        }
+
+        if (/fade/i.test(this.settings.animation)) {
+          var end_css = {opacity: 1};
+
+          return this.delay(function () {
+            return el
+              .css(css)
+              .animate(end_css, this.settings.animationSpeed, 'linear', function () {
+                this.locked = false;
+                el.trigger('opened');
+              }.bind(this))
+              .addClass('open');
+          }.bind(this), this.settings.animationSpeed / 2);
+        }
+
+        return el.css(css).show().css({opacity: 1}).addClass('open').trigger('opened');
+      }
+
+      // should we animate the background?
+      if (/fade/i.test(this.settings.animation)) {
+        return el.fadeIn(this.settings.animationSpeed / 2);
+      }
+
+      return el.show();
+    },
+
+    hide : function (el, css) {
+      // is modal
+      if (css) {
+        if (/pop/i.test(this.settings.animation)) {
+          var end_css = {
+            top: - $(window).scrollTop() - el.data('offset') + 'px',
+            opacity: 0
+          };
+
+          return this.delay(function () {
+            return el
+              .animate(end_css, this.settings.animationSpeed, 'linear', function () {
+                this.locked = false;
+                el.css(css).trigger('closed');
+              }.bind(this))
+              .removeClass('open');
+          }.bind(this), this.settings.animationSpeed / 2);
+        }
+
+        if (/fade/i.test(this.settings.animation)) {
+          var end_css = {opacity: 0};
+
+          return this.delay(function () {
+            return el
+              .animate(end_css, this.settings.animationSpeed, 'linear', function () {
+                this.locked = false;
+                el.css(css).trigger('closed');
+              }.bind(this))
+              .removeClass('open');
+          }.bind(this), this.settings.animationSpeed / 2);
+        }
+
+        return el.hide().css(css).removeClass('open').trigger('closed');
+      }
+
+      // should we animate the background?
+      if (/fade/i.test(this.settings.animation)) {
+        return el.fadeOut(this.settings.animationSpeed / 2);
+      }
+
+      return el.hide();
+    },
+
+    close_video : function (e) {
+      var video = $(this).find('.flex-video'),
+          iframe = video.find('iframe');
+
+      if (iframe.length > 0) {
+        iframe.attr('data-src', iframe[0].src);
+        iframe.attr('src', 'about:blank');
+        video.fadeOut(100).hide();
+      }
+    },
+
+    open_video : function (e) {
+      var video = $(this).find('.flex-video'),
+          iframe = video.find('iframe');
+
+      if (iframe.length > 0) {
+        var data_src = iframe.attr('data-src');
+        if (typeof data_src === 'string') {
+          iframe[0].src = iframe.attr('data-src');
+        }
+        video.show().fadeIn(100);
+      }
+    },
+
+    cache_offset : function (modal) {
+      var offset = modal.show().height() + parseInt(modal.css('top'), 10);
+
+      modal.hide();
+
+      return offset;
+    },
+
+    off : function () {
+      $(this.scope).off('.fndtn.reveal');
+    }
+  };
+}(Foundation.zj, this, this.document));

data/templates/project/libs/foundation/foundation.section.js

@@ -0,0 +1,407 @@
+/*jslint unparam: true, browser: true, indent: 2 */
+
+;(function ($, window, document, undefined) {
+  'use strict';
+
+  Foundation.libs.section = {
+    name: 'section',
+
+    version : '4.1.3',
+
+    settings : {
+      deep_linking: false,
+      one_up: true,
+      section_selector : '[data-section]',
+      region_selector : 'section, .section, [data-section-region]',
+      title_selector : '.title, [data-section-title]',
+      active_region_selector : 'section.active, .section.active, .active[data-section-region]',
+      content_selector : '.content, [data-section-content]',
+      nav_selector : '[data-section="vertical-nav"], [data-section="horizontal-nav"]',
+      callback: function (){}
+    },
+
+    init : function (scope, method, options) {
+      var self = this;
+      Foundation.inherit(this, 'throttle data_options position_right offset_right');
+
+      if (typeof method === 'object') {
+        $.extend(true, self.settings, method);
+      }
+
+      if (typeof method != 'string') {
+        this.set_active_from_hash();
+        this.events();
+
+        return true;
+      } else {
+        return this[method].call(this, options);
+      }
+    },
+
+    events : function () {
+      var self = this;
+
+      $(this.scope)
+        .on('click.fndtn.section', '[data-section] .title, [data-section] [data-section-title]', function (e) {
+          var $this = $(this),
+              section = $this.closest(self.settings.section_selector);
+
+          self.toggle_active.call(this, e, self);
+          self.reflow();
+        });
+
+      $(window)
+        .on('resize.fndtn.section', self.throttle(function () {
+          self.resize.call(this);
+        }, 30))
+        .on('hashchange', function () {
+          if (!self.settings.toggled){
+            self.set_active_from_hash();
+            $(this).trigger('resize');
+          }
+        }).trigger('resize');
+
+      $(document)
+        .on('click.fndtn.section', function (e) {
+          if ($(e.target).closest(self.settings.title_selector).length < 1) {
+            $(self.settings.nav_selector)
+              .children(self.settings.region_selector)
+              .removeClass('active')
+              .attr('style', '');
+          }
+        });
+
+    },
+
+    toggle_active : function (e, self) {
+      var $this = $(this),
+          self = Foundation.libs.section,
+          region = $this.closest(self.settings.region_selector),
+          content = $this.siblings(self.settings.content_selector),
+          parent = region.parent(),
+          settings = $.extend({}, self.settings, self.data_options(parent)),
+          prev_active_section = parent
+            .children(self.settings.active_region_selector);
+
+      self.settings.toggled = true;
+
+      if (!settings.deep_linking && content.length > 0) {
+        e.preventDefault();
+      }
+
+      if (region.hasClass('active')) {
+        // this is causing the style flash.
+        if (self.small(parent)
+          || self.is_vertical_nav(parent)
+          || self.is_horizontal_nav(parent)
+          || self.is_accordion(parent)) {
+            if (prev_active_section[0] !== region[0]
+              || (prev_active_section[0] === region[0] && !settings.one_up)) {
+              region
+                .removeClass('active')
+                .attr('style', '');
+            }
+        }
+      } else {
+        var prev_active_section = parent
+              .children(self.settings.active_region_selector),
+            title_height = self.outerHeight(region
+              .children(self.settings.title_selector));
+
+        if (self.small(parent) || settings.one_up) {
+
+          if (self.small(parent)) {
+            prev_active_section.attr('style', '');
+          } else {
+            prev_active_section.attr('style',
+              'visibility: hidden; padding-top: '+title_height+'px;');
+          }
+        }
+
+        if (self.small(parent)) {
+          region.attr('style', '');
+        } else {
+          region.css('padding-top', title_height);
+        }
+
+        region.addClass('active');
+
+        if (prev_active_section.length > 0) {
+          prev_active_section
+            .removeClass('active')
+            .attr('style', '');
+        }
+
+        // Toggle the content display attribute. This is done to
+        // ensure accurate outerWidth measurements that account for
+        // the scrollbar.
+        if (self.is_vertical_tabs(parent)) {
+          content.css('display', 'block');
+
+          if (prev_active_section !== null) {
+            prev_active_section
+              .children(self.settings.content_selector)
+              .css('display', 'none');
+          }
+        }
+      }
+
+      setTimeout(function () {
+        self.settings.toggled = false;
+      }, 300);
+
+      settings.callback();
+    },
+
+    resize : function () {
+      var self = Foundation.libs.section,
+          sections = $(self.settings.section_selector);
+
+      sections.each(function() {
+        var $this = $(this),
+            active_section = $this
+              .children(self.settings.active_region_selector),
+            settings = $.extend({}, self.settings, self.data_options($this));
+
+        if (active_section.length > 1) {
+          active_section
+            .not(':first')
+            .removeClass('active')
+            .attr('style', '');
+        } else if (active_section.length < 1
+          && !self.is_vertical_nav($this)
+          && !self.is_horizontal_nav($this)
+          && !self.is_accordion($this)) {
+
+          var first = $this.children(self.settings.region_selector).first();
+
+          if (settings.one_up || !self.small($this)) {
+            first.addClass('active');
+          }
+
+          if (self.small($this)) {
+            first.attr('style', '');
+          } else {
+            first.css('padding-top', self.outerHeight(first
+              .children(self.settings.title_selector)));
+          }
+        }
+
+        if (self.small($this)) {
+          active_section.attr('style', '');
+        } else {
+          active_section.css('padding-top', self.outerHeight(active_section
+            .children(self.settings.title_selector)));
+        }
+
+        self.position_titles($this);
+
+        if ( (self.is_horizontal_nav($this) && !self.small($this))
+          || self.is_vertical_tabs($this)) {
+          self.position_content($this);
+        } else {
+          self.position_content($this, false);
+        }
+      });
+    },
+
+    is_vertical_nav : function (el) {
+      return /vertical-nav/i.test(el.data('section'));
+    },
+
+    is_horizontal_nav : function (el) {
+      return /horizontal-nav/i.test(el.data('section'));
+    },
+
+    is_accordion : function (el) {
+      return /accordion/i.test(el.data('section'));
+    },
+
+    is_horizontal_tabs : function (el) {
+      return /^tabs$/i.test(el.data('section'));
+    },
+
+    is_vertical_tabs : function (el) {
+      return /vertical-tabs/i.test(el.data('section'));
+    },
+
+    set_active_from_hash : function () {
+      var hash = window.location.hash.substring(1),
+          sections = $('[data-section]'),
+          self = this;
+
+      sections.each(function () {
+        var section = $(this),
+            settings = $.extend({}, self.settings, self.data_options(section));
+
+        if (hash.length > 0 && settings.deep_linking) {
+          var regions = section
+            .children(self.settings.region_selector)
+            .attr('style', '')
+            .removeClass('active');
+          regions
+            .map(function () {
+              return $(this).children('.content[data-slug="' + hash + '"], [data-section-content][data-slug="' + hash + '"]');
+            })
+            .parent()
+            .addClass('active');
+        }
+      });
+    },
+
+    position_titles : function (section, off) {
+      var self = this,
+          titles = section
+            .children(this.settings.region_selector)
+            .map(function () {
+              return $(this).children(self.settings.title_selector);
+            }),
+          previous_width = 0,
+          previous_height = 0,
+          self = this;
+
+      if (typeof off === 'boolean') {
+        titles.attr('style', '');
+
+      } else {
+        titles.each(function () {
+          if (self.is_vertical_tabs(section)) {
+            $(this).css('top', previous_height);
+            previous_height += self.outerHeight($(this));
+          } else {
+            if (!self.rtl) {
+              $(this).css('left', previous_width);
+            } else {
+              $(this).css('right', previous_width);
+            }
+            previous_width += self.outerWidth($(this));
+          }
+        });
+      }
+    },
+
+    position_content : function (section, off) {
+      var self = this,
+          regions = section.children(self.settings.region_selector),
+          titles = regions
+            .map(function () {
+              return $(this).children(self.settings.title_selector);
+            }),
+          content = regions
+            .map(function () {
+              return $(this).children(self.settings.content_selector);
+            });
+
+      if (typeof off === 'boolean') {
+        content.attr('style', '');
+        section.attr('style', '');
+      } else {
+        if (self.is_vertical_tabs(section)
+            && !self.small(section)) {
+          var content_min_height = 0,
+              content_min_width = Number.MAX_VALUE,
+              title_width = null;
+
+          regions.each(function () {
+            var region = $(this),
+                title = region.children(self.settings.title_selector),
+                content = region.children(self.settings.content_selector),
+                content_width = 0;
+
+            title_width = self.outerWidth(title);
+            content_width = self.outerWidth(section) - title_width;
+            if (content_width < content_min_width) {
+              content_min_width = content_width;
+            }
+
+            // Increment the minimum height of the content region
+            // to align with the height of the titles.
+            content_min_height += self.outerHeight(title);
+
+            // Set all of the inactive tabs to 'display: none'
+            // The CSS sets all of the tabs as 'display: block'
+            // in order to account for scrollbars when measuring the width
+            // of the content regions.
+            if (!$(this).hasClass('active')) {
+              content.css('display', 'none');
+            }
+          });
+
+          regions.each(function () {
+            var content = $(this).children(self.settings.content_selector);
+            content.css('minHeight', content_min_height);
+
+            // Remove 2 pixels to account for the right-shift in the CSS
+            content.css('maxWidth', content_min_width - 2);
+          });
+
+          // Adjust the outer section container width to match
+          // the width of the title and content
+          section.css('maxWidth', title_width + content_min_width);
+        } else {
+          regions.each(function () {
+            var region = $(this),
+                title = region.children(self.settings.title_selector),
+                content = region.children(self.settings.content_selector);
+            if (!self.rtl) {
+              content
+                .css({left: title.position().left - 1,
+                  top: self.outerHeight(title) - 2});
+            } else {
+              content
+                .css({right: self.position_right(title) + 1,
+                  top: self.outerHeight(title) - 2});
+            }
+          });
+
+          // temporary work around for Zepto outerheight calculation issues.
+          if (typeof Zepto === 'function') {
+            section.height(this.outerHeight(titles.first()));
+          } else {
+            section.height(this.outerHeight(titles.first()) - 2);
+          }
+        }
+      }
+    },
+
+    position_right : function (el) {
+      var self = this,
+          section = el.closest(this.settings.section_selector),
+          regions = section.children(this.settings.region_selector),
+          section_width = el.closest(this.settings.section_selector).width(),
+          offset = regions
+            .map(function () {
+              return $(this).children(self.settings.title_selector);
+            }).length;
+      return (section_width - el.position().left - el.width() * (el.index() + 1) - offset);
+    },
+
+    reflow : function (scope) {
+      var scope = scope || document;
+      $(this.settings.section_selector, scope).trigger('resize');
+    },
+
+    small : function (el) {
+      var settings = $.extend({}, this.settings, this.data_options(el));
+      if (this.is_horizontal_tabs(el)) {
+        return false;
+      }
+      if (el && this.is_accordion(el)) {
+        return true;
+      }
+      if ($('html').hasClass('lt-ie9')) {
+        return true;
+      }
+      if ($('html').hasClass('ie8compat')) {
+        return true;
+      }
+      return $(this.scope).width() < 768;
+    },
+
+    off : function () {
+      $(this.scope).off('.fndtn.section');
+      $(window).off('.fndtn.section');
+      $(document).off('.fndtn.section')
+    }
+  };
+}(Foundation.zj, this, this.document));