diff --git a/main.css b/main.css
index df46bd2..9cd71c0 100644
--- a/main.css
+++ b/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;
}
diff --git a/summerHTMLImageMapCreator.js b/summerHTMLImageMapCreator.js
index c5f5967..a27be00 100644
--- a/summerHTMLImageMapCreator.js
+++ b/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,7 +1048,7 @@ 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;
@@ -1055,7 +1056,6 @@ var summerHtmlImageMapCreator = (function() {
};
})();
-
/* 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 */
@@ -148,7 +149,7 @@