Initial commit

lib/assets/javascripts/cdb.js/www/js/app.js

@@ -0,0 +1,6 @@
+window.App = {
+  Models: {},
+  Collections: {},
+  Views: {},
+  Routers: {}
+};

lib/assets/javascripts/cdb.js/www/js/main.js

@@ -0,0 +1,125 @@
+App.Views.Index = Backbone.View.extend({
+  el: document.body,
+
+  events: {
+    'click .js-Tab-link': '_onClickTabLink'
+  },
+
+  initialize: function() {
+    this.$header = this.$('.js-Header');
+    this.$navbar = this.$('.js-Navbar');
+
+    this._initBindings();
+    this._initViews();
+  },
+
+  _initBindings: function() {
+    var _this = this;
+
+    $(window)
+      .on('load', function() {
+        _this.$header.css({
+          height: window.innerHeight
+        });
+      });
+
+    $(window)
+      .on('resize', function() {
+        _this.$header.css({
+          height: window.innerHeight
+        });
+
+        _this._onScroll();
+      });
+
+      $(window)
+        .on('scroll', function() {
+          _this._onScroll();
+        });
+  },
+
+  _onScroll: function() {
+    var pos = $(window).scrollTop();
+
+    if (pos < this.$('.Header').outerHeight()) {
+      if (this.$navbar.hasClass('is-scrolled')) {
+        this.$navbar.removeClass('is-scrolled');
+
+        this.$navbar.animate({
+          top: '-90px'
+        }, 50);
+      }
+    } else {
+      if (!this.$navbar.hasClass('is-scrolled')) {
+        this.$navbar.addClass('is-scrolled');
+
+        this.$navbar.animate({
+          top: 0,
+        }, 50);
+      }
+    }
+  },
+
+  _initViews: function() {
+    this._initOffcanvas();
+    this._initCodeMirror();
+    this._initTabPanes();
+  },
+
+  _onClickTabLink: function(e) {
+    e.preventDefault();
+
+    var $target = $(e.target).closest('a');
+    var href = $target.attr('href');
+    var name = href.replace('#/', '#').split('#')[1];
+
+    var tabpane = $target.closest('.js-TabPanes');
+
+    this._activatePane(name, tabpane);
+  },
+
+  _initTabPanes: function() {
+    var _this = this;
+
+    _.each(this.$('.js-TabPanes'), function(tabpane, i) {
+      _.each($(tabpane).find('.js-Tab'), function(tab, i) {
+        if ($(tab).hasClass('is-selected')) {
+          var $target = $(tab).find('a');
+          var href = $target.attr('href');
+          var name = href.replace('#/', '#').split('#')[1];
+
+          _this._activatePane(name, tabpane);
+        }
+      });
+    });
+  },
+
+  _activatePane: function(name, tabpane) {
+    $(tabpane).find('.js-Tab').removeClass('is-selected');
+    $(tabpane).find('.js-Pane').hide();
+
+    $(tabpane).find('.js-Tab-'+name).addClass('is-selected');
+    $(tabpane).find('.js-Pane-'+name).show();
+  },
+
+  _initCodeMirror: function() {
+    _.each(this.$('.js-Highlight'), function(el, i) {
+      CodeMirror.fromTextArea(document.getElementById('Highlight-' + i), {
+        mode: 'text/html',
+        lineNumbers: true,
+        readOnly: true
+      });
+    });
+  },
+
+  _initOffcanvas: function() {
+    this.offcanvas = new CDBUILIB.Views.Offcanvas({
+      el: this.$('.js-Offcanvas')
+    })
+  }
+});
+
+
+$(function() {
+  window.index = new App.Views.Index();
+});