Merge pull request #1 from tutorjs/develop

Adiatma Kamarudin · web-flow · commit 11fb4898052f · 2017-11-04T18:53:12.000+08:00
MODIFIED: new style
diff --git a/README.md b/README.md
@@ -1 +1,35 @@
 # Simple Modal
+
+## Getting Started
+
+### HTML
+
+```html
+
+  // Button Trigger
+  <button class="your-trigger-selector">Show Modal</button>
+
+  // Modal
+  <div class="your-modal-selector">
+    <div class="your-modal-content-selector">
+      <h1> Hello World </h1>
+    </div>
+  </div>
+
+
+```
+
+### Javascript
+
+```javascript
+
+  new SimpleModal({
+    modal: '.your-modal-selector', // root class selector
+    content: '.your-modal-content-selector', // children of modal
+    trigger: '.your-trigger-selector' // button action
+  })
+
+```
+
+
+Thanks.
diff --git a/index.html b/index.html
@@ -3,25 +3,111 @@
 <head>
   <meta charset="UTF-8">
   <title>Simple Modal</title>
-  <link rel="stylesheet" href="src/css/style.css">
+  <link rel="stylesheet" href="src/css/simple-modal.css">
+  <style>   
+    
+    .container {
+      max-width: 1020px;
+      margin: 0 auto;
+    }
+
+    .show-modal {
+      padding: 10px 15px;
+      border: none;
+      background: #eee;
+      cursor: pointer;
+      font-size: 15px;
+    }
+
+    .show-modal:hover {
+      box-shadow: 2px 2px 2px #ddd;
+    }
+
+    .show-outher-modal {
+      padding: 10px 15px;
+      border: none;
+      background: #ddd;
+      cursor: pointer;
+      font-size: 15px;
+    }
+
+    .show-outher-modal:hover {
+      box-shadow: 2px 2px 2px #ddd;
+    }
+
+    pre {
+      background: #eee;
+    }
+
+  </style>
 </head>
 <body>
   
   <div class="container">
     <!-- button show modal -->
     <h1>Example Show Modal</h1>
     <button class="show-modal">Show Modal</button>
+    <button class="show-outher-modal">Show Outher Modal</button>
+
+    <pre>
+      <code>
+        
+        // Show Modal (Default Width 400px)
+        new SimpleModal({
+          modal: '.my-modal',
+          content: '.my-content',
+          trigger: '.show-modal',
+        })
+        
+        // Show Outher Modal (With 800px)
+        new SimpleModal({
+          modal: '.my-outher-modal',
+          content: '.my-outher-content',
+          trigger: '.show-outher-modal',
+          width: 800 // 800px
+        })
+
+      </code>
+    </pre>
+
   </div>
   
   <!-- modal element -->
-  <div class="modal">
-    <div class="modal-content">
-      <span class="close">&times;</span>
+  <div class="my-modal">
+    <div class="my-content">
       <h1>Hello World</h1>
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro totam tempora expedita ipsa. Quas dolorem, dolor tenetur inventore, cum excepturi ea ratione unde id, numquam natus blanditiis provident suscipit dolorum.</p>  
+    </div>
+  </div>
+
+
+  <div class="my-outher-modal">
+    <div class="my-outher-content">
+      <h1>Halo Dunia</h1>
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro totam tempora expedita ipsa. Quas dolorem, dolor tenetur inventore, cum excepturi ea ratione unde id, numquam natus blanditiis provident suscipit dolorum.</p>  
     </div>
   </div>
 
-  <script src="src/js/index.js"></script>
+  <script src="src/js/simple-modal.js"></script>
+
+  <script>
+    
+    // My Modal
+    new SimpleModal({
+      modal: '.my-modal',
+      content: '.my-content',
+      trigger: '.show-modal'
+    })
+
+    // My Outher Modal
+    new SimpleModal({
+      modal: '.my-outher-modal',
+      content: '.my-outher-content',
+      trigger: '.show-outher-modal',
+      width: 800 // width 800px
+    })
+
+  </script>
 
 </body>
 </html>
diff --git a/index.js b/index.js
@@ -0,0 +1 @@
+module.exports = reqiure('./src/js/index.js');
diff --git a/package.json b/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "simple-modal",
+  "version": "0.1.0",
+  "description": "Simple Modal",
+  "main": "index.js",
+  "repository": "https://github.com/tutorjs/simple-modal.git",
+  "author": "adiatma <adiatma9024@gmail.com>",
+  "license": "MIT"
+}
diff --git a/src/css/simple-modal.css b/src/css/simple-modal.css
@@ -1,3 +1,8 @@
+/**
+* Simple Modal
+* Author adiatma9024@gmail.com
+*/
+
 *,
 *:after,
 *:before {
@@ -10,23 +15,6 @@ body {
   margin: 0;
 }
 
-.container {
-  max-width: 1020px;
-  margin: 0 auto;
-}
-
-.show-modal {
-  padding: 10px 15px;
-  border: none;
-  background: #eee;
-  cursor: pointer;
-  font-size: 15px;
-}
-
-.show-modal:hover {
-  box-shadow: 2px 2px 2px #ddd;
-}
-
 .modal {
   display: none;
   position: fixed;
@@ -43,7 +31,6 @@ body {
   background: #fff;
   padding: 10px;
   margin: 15% auto;
-  width: 80%;
 }
 
 .close {
diff --git a/src/js/index.js b/src/js/index.js
diff --git a/src/js/simple-modal.js b/src/js/simple-modal.js
@@ -0,0 +1,89 @@
+/**
+* Simple Modal
+* Author adiatma9024@gmail.com
+*/
+
+;(function(root, factory) {
+  root.SimpleModal = factory();
+})(this, function () {
+
+  /**
+  * write with es2015
+  */
+
+  function el(selector) {
+    return document.querySelector(selector);
+  }
+
+  function findChildren(element, selector) {
+    return element.querySelectorAll(selector);
+  }
+
+  function createModalContent() {
+    var modalContent = document.createElement('div');
+    modalContent.classList.add('modal-content');
+    return modalContent;
+  }
+
+  function createSpanClose() {
+    var spanClose = document.createElement('span');
+    spanClose.classList.add('close');
+    spanClose.innerHTML = '&times;';
+    return spanClose;
+  }
+
+  function configModal(options) {
+  
+    this.options = Object.assign({}, options);
+
+    this.width = this.options.width || 400;
+
+    this.wrapModalContent = this.wrapModalContent.bind(this);
+  
+    this.makeModal();
+  
+  };
+
+  configModal.prototype.makeModal = function makeModal() {
+    
+    // Add class modal
+    var modal = el(this.options.modal);
+    modal.classList.add('modal');
+    
+    // Add modal content
+    var content = findChildren(modal, this.options.content);
+    var modalContent = this.wrapModalContent(content);
+
+    // Add action close 
+    var close = findChildren(modalContent, '.close')[0];
+    close.addEventListener('click', function() {
+      modal.style.display = 'none';
+    });
+    
+    // Add trigger action
+    var trigger = el(this.options.trigger);
+    trigger.addEventListener('click', function() {
+      modal.style.display = 'block';
+    }); 
+
+    modal.appendChild(modalContent);
+  
+  }
+
+  configModal.prototype.wrapModalContent = function wrapModalContent(children) {
+    var fragmentModalContent = document.createDocumentFragment();
+    var modalContent = createModalContent();
+    modalContent.style.width = this.width + 'px';
+
+    Array.prototype.forEach.call(children, function(e) {  
+      modalContent.appendChild(createSpanClose());
+      modalContent.appendChild(e);
+      fragmentModalContent.appendChild(modalContent);
+    });
+
+    return fragmentModalContent;
+  }
+
+  return configModal;
+
+});

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+module.exports = reqiure('./src/js/index.js');`