define(["exports"], function (exports) {
"use strict";
var _extends = function (child, parent) {
child.prototype = Object.create(parent.prototype, {
constructor: {
value: child,
enumerable: false,
writable: true,
configurable: true
}
});
child.__proto__ = parent;
};
/* global View */
/* global AddonService */
/* jshint maxlen:false */
var mainViewTemplate = "\n\n
\n\n\n
";
var MainView = (function (View) {
var MainView = function MainView(options) {
View.call(this, options);
// Give this view a unique ID.
this.el.id = "customizer-" + Date.now();
this.el.className = "fxos-customizer-main-view";
this.render();
};
_extends(MainView, View);
MainView.prototype.init = function (controller) {
var _this = this;
View.prototype.init.call(this, controller);
this.container = this.$("div.fxos-customizer-container");
this.childViews = this.$("div.fxos-customizer-child-views");
this.customizer = this.$("fxos-customizer");
this.highlighter = this.$("fxos-customizer-highlighter");
// We put all of the other view elements that the app needs into the
// childViews container, so that we can add and remove them all at once.
this.childViews.appendChild(this.editView.el);
this.childViews.appendChild(this.viewSourceView.el);
this.childViews.appendChild(this.appendChildView.el);
this.childViews.appendChild(this.copyMoveView.el);
this.globalStyle = document.createElement("style");
this.globalStyle.innerHTML = "/**\n * These styles need to be applied globally to the app when the customizer\n * is displayed so that the user can scroll to see all of the app even\n * with the customizer taking up the bottom half of the screen.\n *\n * Note that this stylesheet is not scoped and is only appended to the DOM\n * when Customizer is open. It is removed upon closing.\n */\nhtml, body {\n overflow-y: initial !important;\n}\nbody {\n padding-bottom: 50vh !important;\n}";
// Hide this view from the DOM tree.
this.customizer.gaiaDomTree.filter = "#" + this.el.id;
this.on("menu", "fxos-customizer", function () {
return _this.controller.openAddonManager();
});
this.on("action:edit", "fxos-customizer", function (evt) {
_this.controller.editController.open(evt.detail);
});
this.on("action:copyOrMove", "fxos-customizer", function (evt) {
_this.controller.copyMoveController.open(evt.detail);
});
this.on("action:append", "fxos-customizer", function (evt) {
_this.controller.appendChildController.open(evt.detail);
});
this.on("action:remove", "fxos-customizer", function (evt) {
AddonService.generate(evt.detail, function (generator) {
generator.opRemove();
});
});
this.on("action:viewSource", "fxos-customizer", function (evt) {
_this.controller.viewSourceController.open(evt.detail);
});
this.on("selected", "fxos-customizer", function (evt) {
_this.highlighter.highlight(evt.detail);
});
};
MainView.prototype.template = function () {
return mainViewTemplate;
};
MainView.prototype._addToBody = function () {
document.head.appendChild(this.globalStyle);
document.body.appendChild(this.el);
};
MainView.prototype._removeFromBody = function () {
document.head.removeChild(this.globalStyle);
document.body.removeChild(this.el);
};
MainView.prototype.open = function () {
var _this2 = this;
// Add the fxos-customizer element and the other elements we need
this._addToBody();
return new Promise(function (resolve, reject) {
window.requestAnimationFrame(function () {
// Start the opening animation for the customizer
_this2.container.classList.add("show");
});
// Wait for the animation to end, then:
var listener = function () {
_this2.container.removeEventListener("transitionend", listener);
// Resolve the promise
resolve();
};
_this2.container.addEventListener("transitionend", listener);
});
};
MainView.prototype.close = function () {
var _this3 = this;
return new Promise(function (resolve, reject) {
window.requestAnimationFrame(function () {
// Start hiding the customizer with an animated transition
_this3.container.classList.remove("show");
// Erase any highlight right away
_this3.highlighter.highlight(null);
// Scroll the app to the top before beginning the transition
// so we don't see the blank white padding as the panel slides down
document.body.scrollIntoView();
});
// Wait for the transition to end, then:
var listener = function () {
_this3.container.removeEventListener("transitionend", listener);
// Remove all the unnecessary elements from the document
_this3._removeFromBody();
// And resolve the promise
resolve();
};
_this3.container.addEventListener("transitionend", listener);
});
};
return MainView;
})(View);
exports["default"] = MainView;
});