// Generated by github.com/steida/coffee2closure 0.1.12
goog.provide('spark.components.Modal');
goog.require('spark.components.DraggableView');
goog.require('spark.components.Overlay');
goog.require('goog.dom');
goog.require('goog.style');
/**
Modal view with overlay option for Spark Framework. By default modal will be
appended to document body and it will have an overlay. When overlay clicked
the modal will be destroyed. You should pass title and content params of the
modal in your options. You can also customize buttons. See `@createButtons_`
for more information.
@constructor
@export
@param {Object=} options Class options.
@param {*=} data Class data
@extends {spark.components.DraggableView}
*/
spark.components.Modal = function(options, data) {
var resizeCallback, _ref, _ref1, _ref2, _ref3;
if (options == null) {
options = {};
}
options.title || (options.title = options['title'] || 'Default modal title');
options.content || (options.content = options['content'] || 'Default modal content');
options.renderTo || (options.renderTo = options['renderTo'] || document.body);
options.buttons || (options.buttons = options['buttons'] || spark.components.Modal.Buttons.YES_NO);
if (options.draggable == null) {
options.draggable = (_ref = options['draggable']) != null ? _ref : true;
}
if (options.overlay == null) {
options.overlay = (_ref1 = options['overlay']) != null ? _ref1 : true;
}
if (options.closable == null) {
options.closable = (_ref2 = options['closable']) != null ? _ref2 : true;
}
if (options.blocking == null) {
options.blocking = (_ref3 = options['blocking']) != null ? _ref3 : false;
}
this.getCssClass(options, 'modal');
this.createTitleView_(options.title);
if (options.draggable) {
options.handle = this.titleView;
}
spark.components.Modal.superClass_.constructor.call(this, options, data);
this.buttons = {};
if (options.overlay) {
this.setOverlay_();
}
if (!options.draggable) {
this.disableDrag();
this.removeClass('draggable');
}
this.appendView(this.titleView);
this.createContentView_(options.content);
this.createButtons_(options.buttons);
if (options.closable) {
this.createCloseButton_();
}
this.setPosition();
resizeCallback = goog.bind(this.setPosition, this);
this.resizeListenerKey = goog.events.listen(window, 'resize', resizeCallback);
}
goog.inherits(spark.components.Modal, spark.components.DraggableView);
/**
Creates modal content.
@private
@param {string} title Modal title.
*/
spark.components.Modal.prototype.createTitleView_ = function(title) {
return this.titleView = new spark.core.View({
template: title,
cssClass: 'modal-title'
});
};
/**
Creates modal content.
@private
@param {string} content Modal content.
*/
spark.components.Modal.prototype.createContentView_ = function(content) {
return this.contentView = new spark.core.View({
template: content,
cssClass: 'modal-content',
renderTo: this
});
};
/**
Creates a close button to top right of the modal.
@private
*/
spark.components.Modal.prototype.createCloseButton_ = function() {
return this.closeButton = new spark.core.View({
cssClass: 'modal-close',
template: 'x',
renderTo: this,
events: {
click: (function(_this) {
return function() {
return _this.destroy();
};
})(this)
}
});
};
/**
Creates modal buttons. You can use preset buttons like YES, YES_NO or you
can pass custom array which contains button options in it. Preset buttons
will emit `ModalButtonClicked` with button title. You can programatically
listen that event and look for button title to understand which button is
clicked. Custom buttons should contain its callback. No other events will be
fired for custom buttons. All buttons will be stored in `buttons` object
with its names.
@private
@param {spark.components.Modal.Buttons|Array.<Object>} buttons Preset button
value in Buttons enum or custom buttons array.
*/
spark.components.Modal.prototype.createButtons_ = function(buttons) {
var presetButtons;
this.buttonsContainer = new spark.core.View({
cssClass: 'buttons-container',
renderTo: this
});
presetButtons = goog.object.getValues(spark.components.Modal.Buttons);
return buttons.forEach((function(_this) {
return function(options) {
var button;
options.renderTo = _this.buttonsContainer;
button = new spark.components.Button(options);
_this.buttons[options.title] = button;
if (presetButtons.indexOf(buttons) > -1) {
return button.on(goog.events.EventType.CLICK, function() {
return _this.emit('ModalButtonClicked', options.title);
});
}
};
})(this));
};
/**
Sets overlay for modal. By default, modal will be destroyed when overlay is
clicked. To change this behaviour pass `blocking: false` in modal options.
@private
*/
spark.components.Modal.prototype.setOverlay_ = function() {
this.overlay = new spark.components.Overlay({
blocking: this.getOptions().blocking
});
return this.overlay.once(spark.core.Object.EventTypes.DESTROYED, (function(_this) {
return function() {
return _this.destroy();
};
})(this));
};
/**
Sets left and top values to center modal in the viewport.
@export
*/
spark.components.Modal.prototype.setPosition = function() {
var modalElement, modalSize, positionLeft, positionTop, viewportSize;
viewportSize = goog.dom.getViewportSize(window);
modalElement = this.getElement();
modalSize = goog.style.getSize(modalElement);
positionLeft = Math.max(viewportSize.width / 2 - modalSize.width / 2, 0);
positionTop = Math.max(viewportSize.height / 2 - modalSize.height / 2, 0);
return goog.style.setPosition(modalElement, positionLeft, positionTop);
};
/**
Destroys the modal. Removes all elements from DOM and also unlistens resize
event handler binded to window to set positions correctly. If your modal
don't closable or you want to handle close action programatically, when you
want to remove the modal you should call this method to do a proper cleanup.
@export
*/
spark.components.Modal.prototype.destroy = function() {
if (this.overlay) {
this.overlay.destroy();
}
goog.events.unlistenByKey(this.resizeListenerKey);
return spark.components.Modal.superClass_.destroy.apply(this, arguments);
};
/**
Returns Overlay instance if exists.
@export
@return {spark.components.Overlay|null}
*/
spark.components.Modal.prototype.getOverlay = function() {
return this.overlay || null;
};
/**
Returns button instance by its title.
@export
@param {!string} title Button title.
@return {spark.components.Button|null}
*/
spark.components.Modal.prototype.getButtonByTitle = function(title) {
return this.buttons[title] || null;
};
/**
Returns title view.
@export
@return {spark.core.View}
*/
spark.components.Modal.prototype.getTitleView = function() {
return this.titleView;
};
/**
Returns content view.
@export
@return {spark.core.View}
*/
spark.components.Modal.prototype.getContentView = function() {
return this.contentView;
};
/**
Preset button options.
@private
*/
spark.components.Modal.ButtonOptions = {
YES: {
title: 'Yes',
cssClass: 'small green'
},
NO: {
title: 'No',
cssClass: 'small red'
},
CANCEL: {
title: 'Cancel',
cssClass: 'small grey'
}
};
/**
Preset buttons enum. Created buttons will emit 'ModalButtonClicked' event
width button value.
@export
@enum {Array.<string>}
*/
spark.components.Modal.Buttons = {
'YES': [spark.components.Modal.ButtonOptions.YES],
'NO': [spark.components.Modal.ButtonOptions.NO],
'YES_NO': [spark.components.Modal.ButtonOptions.NO, spark.components.Modal.ButtonOptions.YES],
'YES_NO_CANCEL': [spark.components.Modal.ButtonOptions.NO, spark.components.Modal.ButtonOptions.CANCEL, spark.components.Modal.ButtonOptions.YES]
};