Add background color clear control to map options

davgit · Jul 31, 2014 · e3de3b7 · e3de3b7
1 parent 104cdf3
commit e3de3b7
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 55 deletions.
diff --git a/website/static/css/editor.css b/website/static/css/editor.css
@@ -144,18 +144,22 @@ a.help:hover {text-decoration: none;}
 
 #progress_modal i {margin-right: 10px;}
 
+.text-input-clear { 
+    float: none;
+    height: 32px;
+/*    margin-top: -10px;*/
+    margin-left: -20px;
+} 
+
+
 #opt_modal {width: 660px;margin-left: -330px;max-height: none;height: auto;}
 #opt_modal .modal-body {max-height: none;height: auto;overflow-y: visible;}
+#map_background_color {padding-right: 44px;}
 
 #slide_opt_modal {max-height: none;height: auto;}
 #slide_opt_modal .modal-body {max-height: none;height: auto;overflow-y: visible;}
 #background_color {width: 50%;padding-right: 44px;}
-#background_color_clear { 
-    float: none;
-    height: 32px;
-    margin-top: -10px;
-    margin-left: -20px;
-} 
+#background_color_clear {margin-top: -10px;}
 #background_url {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
@@ -168,31 +172,7 @@ a.help:hover {text-decoration: none;}
     height: 32px;
 }
 
-/*#slide_opt_modal*/ .minicolors-theme-bootstrap .minicolors-swatch {width: 24px;height: 24px;}
-/*
-#share_modal textarea  {
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    -ms-box-sizing: border-box;
-    -o-box-sizing: border-box;
-    box-sizing: border-box;
-    margin-left: 0;
-    margin-right: 0;
-    width: 100%;
-}
-.share-link-label {display: inline-block;font-weight: bold;}
-.share-link-icons {display: inline-block;float: right;}
-.share-link-icons a:hover {text-decoration: none;}
-.share-link-icons i {margin-left: 6px;}
-.share-link-icons img {border: 0;}
-
-.share-link-reddit {display: inline-block;margin-left: 6px;}
-.share-link-reddit img {margin-bottom: 12px;}
-
-.share-embed-label {display: inline-block;font-weight: bold;}
-.share-embed-params {display: inline-block;float: right;}
-
-*/
+.minicolors-theme-bootstrap .minicolors-swatch {width: 24px;height: 24px;}
 #share_modal label {
 	font-weight:bold;
 } 

diff --git a/website/templates/edit.html b/website/templates/edit.html
@@ -504,10 +504,37 @@
                 storymap_dirty(1);   
 
                 document.getElementById('map').style.backgroundColor = 
-                    color || _default_data.storymap.map_background_color;
+                    color || _default_data.storymap.map_background_color;              
             }
+            if(color) {
+                $('#map_background_color_clear').show();
+            } else {
+                $('#map_background_color_clear').hide();                
+            }
+        },
+        change: function(hex, opacity) {
+            if(hex) {
+                $('#map_background_color_clear').show();            
+            } else {
+                $('#map_background_color_clear').hide();                            
+            }        
         }
     });    
+
+    $('<button id="map_background_color_clear" type="button" class="close text-input-clear">&times;</button>')
+        .insertAfter('#map_background_color')
+        .click(function(event) {
+            $('#map_background_color').minicolors('value', '');
+            $('#map_background_color_clear').hide();
+
+            _storymap_data.storymap.map_background_color = '';
+            storymap_dirty(1);
+
+            if($(this).siblings('.minicolors-panel').is(':hidden')) {
+                document.getElementById('map').style.backgroundColor = _default_data.storymap.map_background_color;
+            }
+        });
+
     $('#map_background_color').minicolors('value', _storymap_data.storymap.map_background_color || '');
 
     font_update();
@@ -697,9 +724,9 @@
 
     $('.slide:first').click(slide_select); 
 
-    //------------------------------------------------------------
-    // Menu bar
-    //------------------------------------------------------------
+//------------------------------------------------------------
+// Menu bar
+//------------------------------------------------------------
 
     $('#storymap_list').click(function(event) {
         $('#storymap_list')
@@ -758,9 +785,9 @@
         }
     });
 
-    //------------------------------------------------------------
-    // StoryMap Options
-    //------------------------------------------------------------
+//------------------------------------------------------------
+// StoryMap Options
+//------------------------------------------------------------
 
     $('#width, #height, #font_css').change(function(event) {
         var id = $(this).attr('id');
@@ -935,9 +962,9 @@
         }
     });
 
-    // ------------------------------------------------------------
-    // Tab toggle
-    // ------------------------------------------------------------
+// ------------------------------------------------------------
+// Tab toggle
+// ------------------------------------------------------------
 
     $('a[data-toggle="tab"][href="#edit"]').on('shown', function(event) {
         $('.slide.selected').click();   // reselect current slide
@@ -952,9 +979,9 @@
         preview_refresh();
     });
 
-    // ------------------------------------------------------------
-    // Slide sorting
-    // ------------------------------------------------------------
+// ------------------------------------------------------------
+// Slide sorting
+// ------------------------------------------------------------
 
     var sortable_i = 0;
     var sortable_j = 0;
@@ -985,9 +1012,9 @@
         }
     });
 
-    // ------------------------------------------------------------
-    // Uploads
-    // ------------------------------------------------------------ 
+// ------------------------------------------------------------
+// Uploads
+// ------------------------------------------------------------ 
 
     $('#upload_media').click(function(event) {
         $('#upload_modal').modal('show');
@@ -1013,17 +1040,16 @@
             $(this).trigger('modal_show');
         });    
 
-    // ------------------------------------------------------------
-    // Slide options
-    // ------------------------------------------------------------
+// ------------------------------------------------------------
+// Slide options
+// ------------------------------------------------------------
 
     $('#background_color').minicolors({
         control: 'hue',
         opacity: true,
         theme: 'bootstrap',
         hide: function() {
             var color = $(this).val();
-            console.log('color', color);
 
             if(color) {
                 var rgb = $(this).minicolors('rgbObject');
@@ -1049,7 +1075,7 @@
         }
     });
 
-    $('<button id="background_color_clear" type="button" class="close">&times;</button>')
+    $('<button id="background_color_clear" type="button" class="close text-input-clear">&times;</button>')
         .insertAfter('#background_color')
         .click(function(event) {
             $('#background_color').minicolors('value', '');
@@ -1125,9 +1151,9 @@
             $(this).trigger('modal_show');
         });    
 
-    // ------------------------------------------------------------
-    // Sharing
-    // ------------------------------------------------------------
+// ------------------------------------------------------------
+// Sharing
+// ------------------------------------------------------------
 
     $('#share_publish').click(function(event) {       
         $('#share_modal').trigger('progress_show', 'Publishing StoryMap');