Merge pull request #10 from tutorjs/develop

Adiatma Kamarudin · web-flow · commit 871839ec6f1a · 2017-11-05T16:23:48.000+08:00
MODIFIED: tydi and add comment
diff --git a/index.html b/index.html
@@ -97,7 +97,6 @@ <h1>Halo Dunia</h1>
       modal: '.my-modal',
       content: '.my-content',
       trigger: '.show-modal',
-      background: 'tranparent'
     })
 
     // My Outher Modal
diff --git a/src/css/simple-modal.css b/src/css/simple-modal.css
@@ -4,8 +4,8 @@
 */
 
 *,
-*:after,
-*:before {
+*::after,
+*::before {
   box-sizing: border-box;
 }
 
@@ -43,6 +43,8 @@ body {
   color: #ddd;
 }
 
-.clear {
+.clear::after {
+  content: " ";
   clear: both;
+  display: table;
 }
diff --git a/src/js/simple-modal.js b/src/js/simple-modal.js
@@ -19,40 +19,44 @@
     return element.querySelectorAll(selector);
   }
 
-  function createModalContent() {
+  function createModalContentElement() {
     var modalContent = document.createElement('div');
     modalContent.classList.add('modal-content');
     return modalContent;
   }
 
-  function createSpanClose() {
+  function createSpanCloseElement() {
     var spanClose = document.createElement('span');
     spanClose.classList.add('close');
     spanClose.innerHTML = '&times;';
     return spanClose;
   }
 
-  function createClear() {
+  function createClearElement() {
     var clear = document.createElement('div');
     clear.classList.add('clear');
     return clear;
   }
 
   function configModal(options) {
-  
+    
+    // Get all options
     this.options = Object.assign({}, options);
 
+    // Get width options
     this.width = this.options.width || 400;
 
+    // Get background options
     this.background = this.options.background || '#FFF';
 
     this.wrapModalContent = this.wrapModalContent.bind(this);
   
-    this.makeModal();
+    // render modal
+    this.renderModal();
   
   };
 
-  configModal.prototype.makeModal = function makeModal() {
+  configModal.prototype.renderModal = function renderModal() {
     
     // Add class modal
     var modal = el(this.options.modal);
@@ -80,13 +84,15 @@
 
   configModal.prototype.wrapModalContent = function wrapModalContent(children) {
     var fragmentModalContent = document.createDocumentFragment();
-    var modalContent = createModalContent();
+    var modalContent = createModalContentElement();
+
+    // Styling
     modalContent.style.width = this.width + 'px';
     modalContent.style.background = this.background;
 
     Array.prototype.forEach.call(children, function(e) {  
-      modalContent.appendChild(createSpanClose());
-      modalContent.appendChild(createClear());
+      modalContent.appendChild(createSpanCloseElement());
+      modalContent.appendChild(createClearElement());
       modalContent.appendChild(e);
       fragmentModalContent.appendChild(modalContent);
     });

Original file line number	Diff line number	Diff line change
`@@ -4,8 +4,8 @@`
`4`	`4`	`*/`
`5`	`5`
`6`	`6`	`*,`
`7`		`-*:after,`
`8`		`-*:before {`
	`7`	`+*::after,`
	`8`	`+*::before {`
`9`	`9`	`box-sizing: border-box;`
`10`	`10`	`}`
`11`	`11`
`@@ -43,6 +43,8 @@ body {`
`43`	`43`	`color: #ddd;`
`44`	`44`	`}`
`45`	`45`
`46`		`-.clear {`
	`46`	`+.clear::after {`
	`47`	`+ content: " ";`
`47`	`48`	`clear: both;`
	`49`	`+ display: table;`
`48`	`50`	`}`