Update and add tests to the Dialog module

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') );

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);
 				});
 			}

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}

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,
 
 	};
 });

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');
+        if(c.em)
-				}, this);
+  				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('<div>Some HTML content</div>');
+       */
+			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;
+      }
 		};
 	};
 });

src/modal_dialog/model/Modal.js

@@ -1,15 +1,12 @@
 define(['backbone'],
 	function(Backbone) {
-		/** 
-		 * @class Modal
-		 * */
 		return Backbone.Model.extend({
-			
+
 			defaults: {
-				title 		: '',
+				title: '',
-				content		: '',
+				content: '',
-				open 		: false,
+				open: false,
 			}
-		
+
-        });
+    });
 	});

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.config = o.config || {};
-				this.pfx		= this.config.stylePrefix;
+				this.pfx = this.config.stylePrefix || '';
-				this.listenTo( this.model, 'change:open', 	this.updateOpen);
+				this.listenTo(this.model, 'change:open', this.updateOpen);
-				this.listenTo( this.model, 'change:title', 	this.updateTitle);
+				this.listenTo(this.model, 'change:title', this.updateTitle);
-				this.listenTo( this.model, 'change:content',this.updateContent);
+				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
-			 *
+			 * @private
-			 * @return	void
 			 * */
 			updateContent: function(){
-				if(!this.$content)
+				var content = this.getContent();
-					this.$content	= this.$el.find('.'+this.pfx+'content #'+this.pfx+'c');
+				if(content)
-				this.$content.html(this.model.get('content'));
+					content.innerHTML = this.model.get('content');
 			},
 
 			/**
 			 * Update title
-			 *
+			 * @private
-			 * @return	void
 			 * */
 			updateTitle: function(){
-				if(!this.$title)
+				var title = this.getTitle();
-					this.$title	= this.$el.find('.'+this.pfx+'title');
+				if(title)
-				this.$title.html(this.model.get('title'));
+					title.innerHTML = this.model.get('title');
 			},
 
 			/**
 			 * Update open
-			 *
+			 * @private
-			 * @return	void
 			 * */
 			updateOpen: function(){
 				if(this.model.get('open'))
@@ -69,8 +75,7 @@ define(['backbone', 'text!./../template/modal.html'],
 
 			/**
 			 * Hide modal
-			 *
+			 * @private
-			 * @return void
 			 * */
 			hide: function(){
 				this.model.set('open', 0);
@@ -78,42 +83,18 @@ define(['backbone', 'text!./../template/modal.html'],
 
 			/**
 			 * Show modal
-			 *
+			 * @private
-			 * @return void
 			 * */
 			show: function(){
 				this.model.set('open', 1);
 			},
 
-			/**
+			render: function(){
-			 * Set title
+				var	obj = this.model.toJSON();
-			 * @param	{String}	v Title
+				obj.pfx = this.pfx;
-			 *
-			 * @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;
 				this.$el.html( this.template(obj) );
 				this.$el.attr('class', this.pfx + 'container');
 				this.updateOpen();
-
 				return this;
 			},
 

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);
 				});

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',

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('<h1>Test</h1>');
+          obj.getContent().should.equal('<h1>Test</h1>');
+        });
+
+        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();
+
+    });
+});

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= $('<div class="modal-fixture"></div>');
+            });
+
+            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('');
+            });
+
+        });
+      }
+    };
+
+});