Change image loading form

Author: summerstyle

index.htm

@@ -94,6 +94,7 @@ <h5>Loading areas</h5>
 <!-- Get image form -->
 <div id="get_image_wrapper">
     <div id="get_image">
+        <span title="close" class="close_button"></span>
         <div id="logo_get_image">
             <a href="http://github.com/summerstyle/summer">
                 <img src="data:image/png;base64,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" alt="Summer html image map creator" />
@@ -148,7 +149,7 @@ <h2>Editing mode</h2>
     </div>
     <footer>
         <a href="http://github.com/summerstyle/summer">Summer html image map creator 0.5</a><br />
-        &copy; 2014 Vera Lobatcheva<br />
+        &copy; 2016 Vera Lobatcheva<br />
         MIT License
     </footer>
 </div>

main.css

@@ -36,6 +36,7 @@ body {
     min-height: 100%;
     background: #FFF url(data:image/gif;base64,R0lGODlhCgAKAIABANzc3P///yH+EUNyZWF0ZWQgd2l0aCBHSU1QACwAAAAACgAKAAACEYQdmYcaDNxjEspKndVZbc8UADs=);
     line-height: 1;
+    overflow-y: scroll;
 }
 img {
     border: 0;
@@ -131,7 +132,6 @@ a:link, a:visited {
 }
 #wrapper {
     position: relative;
-    display: none;
 }
 #image_wrapper {
     padding: 45px 0 10px;
@@ -143,6 +143,7 @@ a:link, a:visited {
     margin: 0 auto;
     border-radius: 3px;
     box-shadow: rgba(0,0,0,0.2) 0 0 2px 2px;
+    display: none;
 }
 .draw#image {
     cursor: crosshair;
@@ -207,6 +208,9 @@ a:link, a:visited {
 }
 #get_image_wrapper {
     padding: 35px 0;
+    position: relative;
+    z-index: 1002;
+    display: none;
 }
 #get_image {
     width: 200px;
@@ -219,6 +223,11 @@ a:link, a:visited {
     box-shadow: rgba(0,0,0,0.2) 0 0 2px 2px;
     position: relative;
 }
+#get_image .close_button {
+    background: #000 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAACbgAAAm4Bt/774AAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABKSURBVAiZdc2xDYAwAAPBA0ViiQxKR6hgCMZjCSpTEAkavnxL7yHJgRPNQ0MtXS6Y+jBjlUSSLS9bEqMfSm/O2D+pq6Bi/ZxfqDfkbiIp0Zzd1AAAAABJRU5ErkJggg==) 50% 50% no-repeat;
+    box-shadow: 0 0 1px #EEE inset;
+    border-radius: 2px;
+}
 #logo_get_image {
     margin-bottom: 20px;
 }

summerHTMLImageMapCreator.js

@@ -496,11 +496,11 @@ var summerHtmlImageMapCreator = (function() {
             saveInLocalStorage : localStorageWrapper.save,
             loadFromLocalStorage : localStorageWrapper.restore,
             hide : function() {
-                utils.hide(domElements.wrapper);
+                utils.hide(domElements.container);
                 return this;
             },
             show : function() {
-                utils.show(domElements.wrapper);
+                utils.show(domElements.container);
                 return this;
             },
             recalcOffsetValues: function() {
@@ -971,6 +971,7 @@ var summerHtmlImageMapCreator = (function() {
     /* Get image form */
     var get_image = (function() {
         var block = utils.id('get_image_wrapper'),
+            close_button = block.querySelector('.close_button'),
             loading_indicator = utils.id('loading'),
             button = utils.id('button'),
             filename = null,
@@ -1047,15 +1048,14 @@ var summerHtmlImageMapCreator = (function() {
                          .hide(dropzone_clear_button);
                 },
                 test : function() {
-                    return sm_img.src ? true : false;
+                    return Boolean(sm_img.src);
                 },
                 getImage : function() {
                     return sm_img.src;
                 }
             };
         })();
 
-        
         /* Set a url - the second way to loading an image */
         var url_input = (function() {
             var url = utils.id('url'),
@@ -1158,16 +1158,28 @@ var summerHtmlImageMapCreator = (function() {
 
         button.addEventListener('click', onButtonClick, false);
 
+        close_button.addEventListener('click', hide, false);
+        
+        function show() {
+            clear();
+            utils.show(block);
+        }
+        
+        function hide() {
+            utils.hide(block);
+        }
+        
         /* Returned object */
         return {
             show : function() {
-                clear();
-                utils.show(block);
+                app.hide();
+                show();
 
                 return this;
             },
             hide : function() {
-                utils.hide(block);
+                app.show();
+                hide();
 
                 return this;
             },
@@ -1183,6 +1195,7 @@ var summerHtmlImageMapCreator = (function() {
             }
         };
     })();
+    get_image.show();
 
 
     /* Buttons and actions */