dist/app_js/lib/views/base_app.js in ela-4.1.0 vs dist/app_js/lib/views/base_app.js in ela-4.1.1
- old
+ new
@@ -10,47 +10,61 @@
ELA.Views.BaseApp = (function(superClass) {
extend(BaseApp, superClass);
function BaseApp() {
this.render = bind(this.render, this);
+ this.renderHeadlineHtml = bind(this.renderHeadlineHtml, this);
this.renderHelp = bind(this.renderHelp, this);
this.relatedApps = bind(this.relatedApps, this);
this.deactivate = bind(this.deactivate, this);
this.activate = bind(this.activate, this);
this.setActive = bind(this.setActive, this);
- this.liveChangeEnd = bind(this.liveChangeEnd, this);
- this.liveChangeStart = bind(this.liveChangeStart, this);
+ this.hideHeadup = bind(this.hideHeadup, this);
+ this.showHeadup = bind(this.showHeadup, this);
this.toggleAside = bind(this.toggleAside, this);
this.backToOverview = bind(this.backToOverview, this);
this.hideAsides = bind(this.hideAsides, this);
this.setCurrentAside = bind(this.setCurrentAside, this);
this.copyShareLink = bind(this.copyShareLink, this);
this.selectShareLink = bind(this.selectShareLink, this);
this.share = bind(this.share, this);
this.showHelp = bind(this.showHelp, this);
+ this.openLayout = bind(this.openLayout, this);
this.openSubapp = bind(this.openSubapp, this);
this.hideMenus = bind(this.hideMenus, this);
this.toggleContextMenu = bind(this.toggleContextMenu, this);
- this.hideSubappOptions = bind(this.hideSubappOptions, this);
- this.viewSubappOptions = bind(this.viewSubappOptions, this);
+ this.hideSubviewOptions = bind(this.hideSubviewOptions, this);
+ this.viewSubviewOptions = bind(this.viewSubviewOptions, this);
+ this.checkLayout = bind(this.checkLayout, this);
this.remove = bind(this.remove, this);
return BaseApp.__super__.constructor.apply(this, arguments);
}
BaseApp.prototype.template = JST['general/app'];
+ BaseApp.prototype.headlineTemplate = JST['general/app_headline'];
+
BaseApp.prototype.id = function() {
return this.model.name.toDash();
};
BaseApp.prototype.tagName = 'section';
BaseApp.prototype.className = 'active';
- BaseApp.prototype.asides = [];
+ BaseApp.prototype.asides = [
+ {
+ name: 'parameters',
+ view: 'ELA.Views.ParametersAside'
+ }
+ ];
- BaseApp.prototype.views = [];
+ BaseApp.prototype.views = [
+ {
+ graph: {}
+ }
+ ];
BaseApp.prototype.events = {
'tap header .overview.icon': 'backToOverview',
'tap header .help': 'showHelp',
'tap header .share-link': 'share',
@@ -58,15 +72,17 @@
'tap header .share-form button': 'copyShareLink',
'submit header .share-form form': function(e) {
return e.preventDefault();
},
'tap header *[data-toggle-aside]': 'setCurrentAside',
- 'tap header .poised.subapps.select': 'viewSubappOptions',
- 'tap header .poised.subapps.select .option': 'openSubapp',
+ 'tap header .poised.subviews.select': 'viewSubviewOptions',
+ 'tap header .poised.subviews.select .option.subapp': 'openSubapp',
+ 'tap header .poised.subviews.select .option.layout': 'openLayout',
'tap header .context.icon': 'toggleContextMenu',
- 'tap article.graph:has(~ aside.active)': 'hideAsides',
- 'tap section:has(.subapps.select.view)': 'hideSubappOptions',
+ 'tap article.viewport:has(~ aside.active)': 'hideAsides',
+ 'tap article.viewport:has(~ .headup.active)': 'hideHeadup',
+ 'tap section:has(.subviews.select.view)': 'hideSubappOptions',
'tap section:has(.menu.view)': 'hideMenus'
};
BaseApp.prototype.hammerjs = true;
@@ -80,30 +96,58 @@
BaseApp.prototype.initialize = function() {
var aside, base, i, len, ref;
this.listenTo(this.model, 'change:currentAside', this.toggleAside);
this.listenTo(this.model, 'change:showHelp', this.renderHelp);
- this.on('controlLiveChangeStart', this.liveChangeStart);
- this.on('controlLiveChangeEnd', this.liveChangeEnd);
+ this.on('controlLiveChangeStart', this.showHeadup);
+ this.on('controlLiveChangeEnd', this.hideHeadup);
ref = this.asides;
for (i = 0, len = ref.length; i < len; i++) {
aside = ref[i];
if (aside.link == null) {
aside.link = 'icon';
}
}
+ if (this.layouts == null) {
+ this.layouts = {
+ all: {
+ layout: _.map(this.views, function(view, idx) {
+ return String.fromCharCode(97 + idx);
+ })
+ }
+ };
+ }
+ $(window).on('resize', this.renderHeadlineHtml);
+ $(window).on('resize', this.checkLayout);
+ this.checkLayout();
return (base = this.model).displayParams != null ? base.displayParams : base.displayParams = {};
};
- BaseApp.prototype.viewSubappOptions = function() {
- return this.$('.subapps.select').toggleClass('view');
+ BaseApp.prototype.remove = function() {
+ BaseApp.__super__.remove.apply(this, arguments);
+ $(window).off('resize', this.renderHeadlineHtml);
+ return $(window).off('resize', this.checkLayout);
};
- BaseApp.prototype.hideSubappOptions = function() {
- return this.$('.subapps.select').removeClass('view');
+ BaseApp.prototype.checkLayout = function() {
+ var availableLayouts;
+ availableLayouts = this.availableLayouts();
+ if (availableLayouts.indexOf(this.model.get('layout')) < 0) {
+ return ELA.router.navigate("app/" + this.model.path + "/" + availableLayouts[0], {
+ trigger: true
+ });
+ }
};
+ BaseApp.prototype.viewSubviewOptions = function() {
+ return this.$('.subviews.select').toggleClass('view');
+ };
+
+ BaseApp.prototype.hideSubviewOptions = function() {
+ return this.$('.subviews.select').removeClass('view');
+ };
+
BaseApp.prototype.toggleContextMenu = function() {
return this.$('.menu:has(.icon.context)').toggleClass('view');
};
BaseApp.prototype.hideMenus = function(e) {
@@ -121,10 +165,18 @@
return ELA.router.navigate("app/" + ($target.data('path')), {
trigger: true
});
};
+ BaseApp.prototype.openLayout = function(e) {
+ var $target;
+ $target = $(e.target);
+ return ELA.router.navigate("app/" + this.model.path + "/" + ($target.data('path')), {
+ trigger: true
+ });
+ };
+
BaseApp.prototype.showHelp = function() {
return ELA.router.navigate("app/" + this.model.path + "/help", {
trigger: true
});
};
@@ -213,22 +265,32 @@
this.$("header ." + value + ".aside.icon").toggleClass('active', true);
return this.$("aside." + value).toggleClass('active', true);
}
};
- BaseApp.prototype.liveChangeStart = function(slider) {
- if ($(window).width() <= 768) {
- this.$('aside.active').addClass('hidden');
- return this.subviews.headup.activate(slider);
+ BaseApp.prototype.showHeadup = function(control, options) {
+ var isMobile;
+ if (options == null) {
+ options = {};
}
+ if (options.mobileOnly == null) {
+ options.mobileOnly = true;
+ }
+ isMobile = $(window).width() <= 768;
+ if (isMobile || !options.mobileOnly) {
+ if (isMobile) {
+ this.$('aside.active').addClass('hidden');
+ } else {
+ this.model.set('currentAside', null);
+ }
+ return this.subviews.headup.activate(control);
+ }
};
- BaseApp.prototype.liveChangeEnd = function() {
- if ($(window).width() <= 768) {
- this.$('aside.active').removeClass('hidden');
- return this.subviews.headup.deactivate();
- }
+ BaseApp.prototype.hideHeadup = function() {
+ this.$('aside.active').removeClass('hidden');
+ return this.subviews.headup.deactivate();
};
BaseApp.prototype.setActive = function(active) {
return this.$el.toggleClass('active', active);
};
@@ -264,25 +326,68 @@
return _this.$app.toggleClass('active', !showHelp);
};
})(this));
};
+ BaseApp.prototype.availableLayouts = function() {
+ var layout, name, names, ref;
+ names = [];
+ ref = this.layouts;
+ for (name in ref) {
+ layout = ref[name];
+ if (layout.minWidth) {
+ if (layout.minWidth > $(window).width()) {
+ continue;
+ }
+ }
+ if (layout.minHeight) {
+ if (layout.minHeight > $(window).height()) {
+ continue;
+ }
+ }
+ names.push(name);
+ }
+ return names;
+ };
+
+ BaseApp.prototype.headlineHtml = function() {
+ return this.headlineTemplate({
+ name: this.model.name,
+ path: this.model.path,
+ relatedApps: this.relatedApps(),
+ availableLayouts: this.availableLayouts()
+ });
+ };
+
+ BaseApp.prototype.renderHeadlineHtml = function() {
+ return this.$('header h2').html(this.headlineHtml());
+ };
+
BaseApp.prototype.render = function() {
var AsideView, aside, i, len, ref, view;
this.$el.html(this.template({
- name: this.model.name,
- path: this.model.path,
hasHelpText: this.model.hasHelpText,
iconAsideNames: this.iconAsideNames(),
contextAsides: this.contextAsides(),
- relatedApps: this.relatedApps(),
- currentPath: this.model.path
+ views: (function() {
+ var i, len, ref, results;
+ ref = this.views;
+ results = [];
+ for (i = 0, len = ref.length; i < len; i++) {
+ view = ref[i];
+ results.push(view.name);
+ }
+ return results;
+ }).call(this),
+ currentPath: this.model.path,
+ headlineHtml: this.headlineHtml()
}));
this.$shareLink = this.$('li.share-link');
this.$shareForm = this.$('li.share-form');
this.$shareUrlInput = this.$shareForm.find('input');
this.$shareCopyButton = this.$shareForm.find('button');
+ _.delay(this.renderHeadlineHtml);
this.$app = this.$('section.app');
ref = this.asides;
for (i = 0, len = ref.length; i < len; i++) {
aside = ref[i];
AsideView = aside.view.toFunction();
@@ -304,10 +409,10 @@
if (!this.subviews.viewport) {
view = this.subviews.viewport = new ELA.Views.Viewport({
model: this.model,
parentView: this,
views: this.views,
- layout: this.layout,
+ layouts: this.layouts,
localePrefix: this.localePrefix
});
this.$('.viewport').replaceWith(view.render().el);
}
this.renderHelp();