126 lines
2.7 KiB
JavaScript
126 lines
2.7 KiB
JavaScript
|
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();
|
||
|
|
});
|