diff --git a/src/commands/view/ExportTemplate.js b/src/commands/view/ExportTemplate.js
index 5eafadd8a..824621782 100644
--- a/src/commands/view/ExportTemplate.js
+++ b/src/commands/view/ExportTemplate.js
@@ -5,10 +5,10 @@ define(function() {
* */
return {
- run: function(editor, sender){
+ run: function(editor, sender) {
this.sender = sender;
this.components = editor.DomComponents.getComponents();
- this.modal = editor.Dialog || null;
+ this.modal = editor.Modal || null;
this.cm = editor.CodeManager || null;
this.cssc = editor.CssComposer || null;
this.protCss = editor.Config.protectedCss;
@@ -25,8 +25,7 @@ define(function() {
* @return {Object} Editor
* @private
* */
- buildEditor: function(codeName, theme, label)
- {
+ buildEditor: function(codeName, theme, label) {
if(!this.codeMirror)
this.codeMirror = this.cm.getViewer('CodeMirror');
@@ -49,8 +48,7 @@ define(function() {
return { el: editor, $el: $editor };
},
- enable: function()
- {
+ enable: function() {
if(!this.$editors){
var oHtmlEd = this.buildEditor('htmlmixed', 'hopscotch', 'HTML'),
oCsslEd = this.buildEditor('css', 'hopscotch', 'CSS');
@@ -63,7 +61,7 @@ define(function() {
if(this.modal){
this.modal.setTitle('Export template');
this.modal.setContent(this.$editors);
- this.modal.show();
+ this.modal.open();
}
var addCss = this.protCss || '';
this.htmlEditor.setContent( this.cm.getCode(this.components, 'html') );
diff --git a/src/dom_components/view/ComponentImageView.js b/src/dom_components/view/ComponentImageView.js
index 94e236db3..a22cba174 100644
--- a/src/dom_components/view/ComponentImageView.js
+++ b/src/dom_components/view/ComponentImageView.js
@@ -46,9 +46,9 @@ define(['backbone', './ComponentView'],
this.modal.setTitle('Select image');
this.modal.setContent(this.am.render(1));
this.am.setTarget(this.model);
- this.modal.show();
+ this.modal.open();
this.am.onSelect(function(){
- that.modal.hide();
+ that.modal.close();
that.am.setTarget(null);
});
}
diff --git a/src/editor/main.js b/src/editor/main.js
index 075dc0561..7b646806f 100644
--- a/src/editor/main.js
+++ b/src/editor/main.js
@@ -124,9 +124,9 @@ define(function (require){
Commands: em.get('Commands'),
/**
- * @property {Dialog}
+ * @property {Modal}
*/
- Dialog: em.get('Modal'),
+ Modal: em.get('Modal'),
/**
* @property {Panels}
diff --git a/src/modal_dialog/config/config.js b/src/modal_dialog/config/config.js
index 8165804c9..1dd4e6d4e 100644
--- a/src/modal_dialog/config/config.js
+++ b/src/modal_dialog/config/config.js
@@ -1,13 +1,13 @@
define(function () {
return {
- stylePrefix : 'mdl-',
+ stylePrefix: 'mdl-',
- title : '',
+ title: '',
- content : '',
+ content: '',
- backdrop : true,
+ backdrop: true,
};
});
\ No newline at end of file
diff --git a/src/modal_dialog/main.js b/src/modal_dialog/main.js
index f852047ad..02ed8d665 100644
--- a/src/modal_dialog/main.js
+++ b/src/modal_dialog/main.js
@@ -1,6 +1,19 @@
/**
- * @class Modal
- * */
+ * * [open](#open)
+ * * [close](#close)
+ * * [isOpen](#isopen)
+ * * [setTitle](#settitle)
+ * * [getTitle](#gettitle)
+ * * [setContent](#setcontent)
+ * * [getContent](#getcontent)
+ *
+ * Before using the methods you should get first the module from the editor instance, in this way:
+ *
+ * ```js
+ * var modal = editor.Modal;
+ * ```
+ * @module Modal
+ */
define(function(require) {
return function() {
var c = {},
@@ -21,6 +34,7 @@ define(function(require) {
/**
* Initialize module. Automatically called with a new instance of the editor
* @param {Object} config Configurations
+ * @private
*/
init: function(config) {
c = config || {};
@@ -38,43 +52,107 @@ define(function(require) {
model: model,
config: c,
});
- c.em.on('loaded', function(){
- this.render().appendTo(c.em.config.el || 'body');
- }, this);
+
+ if(c.em)
+ c.em.on('loaded', function(){
+ this.render().appendTo(c.em.config.el || 'body');
+ }, this);
+
return this;
},
- getModel: function(){
- return model;
- },
+ /**
+ * Open modal window
+ * @return {this}
+ */
+ open: function(){
+ modal.show();
+ return this;
+ },
- render: function(){
- return modal.render().$el;
- },
+ /**
+ * Close modal window
+ * @return {this}
+ */
+ close: function(){
+ modal.hide();
+ return this;
+ },
- show: function(){
- return modal.show();
- },
+ /**
+ * Checks if modal window is open
+ * @return {Boolean}
+ */
+ isOpen: function(){
+ return !!model.get('open');
+ },
- hide: function(){
- return modal.hide();
+ /**
+ * Set title to the modal window
+ * @param {string} title Title
+ * @return {this}
+ * @example
+ * modal.setTitle('New title');
+ */
+ setTitle: function(title){
+ model.set('title', title);
+ return this;
},
- setTitle: function(v){
- return modal.setTitle(v);
- },
+ /**
+ * Returns title of the modal window
+ * @return {string}
+ */
+ getTitle: function(){
+ return model.get('title');
+ },
- setContent: function(v){
- return modal.setContent(v);
+ /**
+ * Set content of the modal window
+ * @param {string} content Content
+ * @return {this}
+ * @example
+ * modal.setContent('Some HTML content
');
+ */
+ setContent: function(content){
+ model.set('content', content);
+ return this;
},
+ /**
+ * Get content of the modal window
+ * @return {string}
+ */
+ getContent: function(){
+ return model.get('content');
+ },
+
/**
* Returns content element
* @return {HTMLElement}
+ * @private
*/
getContentEl: function(){
return modal.getContent();
- }
+ },
+
+ /**
+ * Returns modal model
+ * @return {Model}
+ * @private
+ */
+ getModel: function(){
+ return model;
+ },
+
+ /**
+ * Render the modal window
+ * @return {HTMLElement}
+ * @private
+ */
+ render: function(){
+ return modal.render().$el;
+ }
};
};
});
\ No newline at end of file
diff --git a/src/modal_dialog/model/Modal.js b/src/modal_dialog/model/Modal.js
index 3f6d027c8..57dd29289 100644
--- a/src/modal_dialog/model/Modal.js
+++ b/src/modal_dialog/model/Modal.js
@@ -1,15 +1,12 @@
define(['backbone'],
function(Backbone) {
- /**
- * @class Modal
- * */
return Backbone.Model.extend({
-
+
defaults: {
- title : '',
- content : '',
- open : false,
+ title: '',
+ content: '',
+ open: false,
}
-
- });
+
+ });
});
\ No newline at end of file
diff --git a/src/modal_dialog/view/ModalView.js b/src/modal_dialog/view/ModalView.js
index ddace4279..499165f6e 100644
--- a/src/modal_dialog/view/ModalView.js
+++ b/src/modal_dialog/view/ModalView.js
@@ -1,20 +1,17 @@
define(['backbone', 'text!./../template/modal.html'],
function (Backbone, modalTemplate) {
- /**
- * @class ModalView
- * */
return Backbone.View.extend({
template: _.template(modalTemplate),
- events : {},
+ events: {},
initialize: function(o){
- this.config = o.config || {};
- this.pfx = this.config.stylePrefix;
- this.listenTo( this.model, 'change:open', this.updateOpen);
- this.listenTo( this.model, 'change:title', this.updateTitle);
- this.listenTo( this.model, 'change:content',this.updateContent);
+ this.config = o.config || {};
+ this.pfx = this.config.stylePrefix || '';
+ this.listenTo(this.model, 'change:open', this.updateOpen);
+ this.listenTo(this.model, 'change:title', this.updateTitle);
+ this.listenTo(this.model, 'change:content', this.updateContent);
this.events['click .'+this.pfx+'btn-close'] = 'hide';
if(this.config.backdrop)
@@ -26,39 +23,48 @@ define(['backbone', 'text!./../template/modal.html'],
/**
* Returns content element
* @return {HTMLElement}
+ * @private
*/
- getContent:function(){
+ getContent: function(){
if(!this.$content)
this.$content = this.$el.find('.'+this.pfx+'content #'+this.pfx+'c');
return this.$content.get(0);
},
+ /**
+ * Returns title element
+ * @return {HTMLElement}
+ * @private
+ */
+ getTitle: function(){
+ if(!this.$title)
+ this.$title = this.$el.find('.'+this.pfx+'title');
+ return this.$title.get(0);
+ },
+
/**
* Update content
- *
- * @return void
+ * @private
* */
updateContent: function(){
- if(!this.$content)
- this.$content = this.$el.find('.'+this.pfx+'content #'+this.pfx+'c');
- this.$content.html(this.model.get('content'));
+ var content = this.getContent();
+ if(content)
+ content.innerHTML = this.model.get('content');
},
/**
* Update title
- *
- * @return void
+ * @private
* */
updateTitle: function(){
- if(!this.$title)
- this.$title = this.$el.find('.'+this.pfx+'title');
- this.$title.html(this.model.get('title'));
+ var title = this.getTitle();
+ if(title)
+ title.innerHTML = this.model.get('title');
},
/**
* Update open
- *
- * @return void
+ * @private
* */
updateOpen: function(){
if(this.model.get('open'))
@@ -69,8 +75,7 @@ define(['backbone', 'text!./../template/modal.html'],
/**
* Hide modal
- *
- * @return void
+ * @private
* */
hide: function(){
this.model.set('open', 0);
@@ -78,42 +83,18 @@ define(['backbone', 'text!./../template/modal.html'],
/**
* Show modal
- *
- * @return void
+ * @private
* */
show: function(){
this.model.set('open', 1);
},
- /**
- * Set title
- * @param {String} v Title
- *
- * @return this
- * */
- setTitle: function(v){
- this.model.set('title',v);
- return this;
- },
-
- /**
- * Set content
- * @param {String} v Title
- *
- * @return this
- * */
- setContent: function(v){
- this.model.set('content',v);
- return this;
- },
-
- render : function(){
- var obj = this.model.toJSON();
- obj.pfx = this.pfx;
+ render: function(){
+ var obj = this.model.toJSON();
+ obj.pfx = this.pfx;
this.$el.html( this.template(obj) );
this.$el.attr('class', this.pfx + 'container');
this.updateOpen();
-
return this;
},
diff --git a/src/style_manager/view/PropertyFileView.js b/src/style_manager/view/PropertyFileView.js
index 6d4d52d07..ab7224f70 100644
--- a/src/style_manager/view/PropertyFileView.js
+++ b/src/style_manager/view/PropertyFileView.js
@@ -120,9 +120,9 @@ define(['backbone','./PropertyView', 'text!./../templates/propertyFile.html'],
this.modal.setTitle('Select image');
this.modal.setContent(this.am.render());
this.am.setTarget(null);
- this.modal.show();
+ this.modal.open();
this.am.onSelect(function(model){
- that.modal.hide();
+ that.modal.close();
that.spreadUrl(model.get('src'));
that.valueChanged(e);
});
diff --git a/test/runner/main.js b/test/runner/main.js
index cacd720e6..1a3bb0750 100644
--- a/test/runner/main.js
+++ b/test/runner/main.js
@@ -5,6 +5,7 @@ require(['../src/config/require-config.js', 'config/config.js'], function() {
'specs/main.js',
'specs/asset_manager/main.js',
'specs/dom_components/main.js',
+ 'specs/modal/main.js',
'specs/selector_manager/main.js',
'specs/css_composer/main.js',
'specs/code_manager/main.js',
diff --git a/test/specs/modal/main.js b/test/specs/modal/main.js
new file mode 100644
index 000000000..c720b62d3
--- /dev/null
+++ b/test/specs/modal/main.js
@@ -0,0 +1,69 @@
+var modulePath = './../../../test/specs/modal';
+
+define([ 'ModalDialog',
+ modulePath + '/view/ModalView',
+ ],
+ function(Modal, ModalView) {
+
+ describe('Modal dialog', function() {
+
+ describe('Main', function() {
+
+ var obj;
+
+ beforeEach(function () {
+ obj = new Modal().init();
+ });
+
+ afterEach(function () {
+ delete obj;
+ });
+
+ it('Object exists', function() {
+ obj.should.be.exist;
+ });
+
+ it('Is close by default', function() {
+ obj.isOpen().should.equal(false);
+ });
+
+ it('Title is empty', function() {
+ obj.getTitle().should.equal('');
+ });
+
+ it('Content is empty', function() {
+ obj.getContent().should.equal('');
+ });
+
+ it('Set title', function() {
+ obj.setTitle('Test');
+ obj.getTitle().should.equal('Test');
+ });
+
+ it('Set content', function() {
+ obj.setContent('Test');
+ obj.getContent().should.equal('Test');
+ });
+
+ it('Set HTML content', function() {
+ obj.setContent('Test
');
+ obj.getContent().should.equal('Test
');
+ });
+
+ it('Open modal', function() {
+ obj.open();
+ obj.isOpen().should.equal(true);
+ });
+
+ it('Close modal', function() {
+ obj.open();
+ obj.close();
+ obj.isOpen().should.equal(false);
+ });
+
+ });
+
+ ModalView.run();
+
+ });
+});
\ No newline at end of file
diff --git a/test/specs/modal/view/ModalView.js b/test/specs/modal/view/ModalView.js
new file mode 100644
index 000000000..60eba5bd5
--- /dev/null
+++ b/test/specs/modal/view/ModalView.js
@@ -0,0 +1,74 @@
+var path = 'ModalDialog/view/';
+define([path + 'ModalView', 'ModalDialog/model/Modal'],
+ function(ModalView, Modal) {
+
+ return {
+ run : function(){
+ describe('ModalView', function() {
+
+ var $fixtures;
+ var $fixture;
+ var model;
+ var view;
+ var editorModel;
+
+ before(function () {
+ $fixtures = $("#fixtures");
+ $fixture= $('');
+ });
+
+ beforeEach(function () {
+ model = new Modal();
+ view = new ModalView({
+ model: model
+ });
+ $fixture.empty().appendTo($fixtures);
+ $fixture.html(view.render().el);
+ });
+
+ afterEach(function () {
+ delete view;
+ delete model;
+ });
+
+ after(function () {
+ $fixture.remove();
+ });
+
+ it("The content is not empty", function (){
+ view.el.innerHTML.should.be.not.empty;
+ });
+
+ it("Get content", function (){
+ view.getContent().should.be.ok;
+ });
+
+ it("Update content", function (){
+ model.set('content', 'test');
+ view.getContent().innerHTML.should.equal('test');
+ });
+
+ it("Get title", function (){
+ view.getTitle().should.be.ok;
+ });
+
+ it("Update title", function (){
+ model.set('title', 'test');
+ view.getTitle().innerHTML.should.equal('test');
+ });
+
+ it("Close by default", function (){
+ view.updateOpen();
+ view.el.style.display.should.equal('none');
+ });
+
+ it("Open dialog", function (){
+ model.set('open', 1);
+ view.el.style.display.should.equal('');
+ });
+
+ });
+ }
+ };
+
+});
\ No newline at end of file