Expand-o-matic more style thingie

3 files changed, 70 insertions, 12 deletions

diff --git a/bookmarklet/ffffallback.css b/bookmarklet/ffffallback.css
index 9659c2f..c8f1fd6 100644
--- a/bookmarklet/ffffallback.css
+++ b/bookmarklet/ffffallback.css
@@ -11,6 +11,31 @@
   z-index: 999999;
 }
 
+#ffffallback-controller .ffffallback-more-values {
+  background: #666;
+  color: #ccc;
+  margin-left: 30px;
+  width: 141px;
+}
+
+#ffffallback-controller .collapsed .ffffallback-more-values {
+  display: none;
+}
+
+#ffffallback-controller .expanded .ffffallback-disclosure {
+  -webkit-transform:rotate(90deg);
+}
+
+#ffffallback-controller .ffffallback-disclosure {
+  color: #ccc;
+  display: inline-block;
+  text-decoration: none;
+  width: 16px;
+  -webkit-transition-property: -webkit-transform;
+  -webkit-transition-duration: 0.125s;
+
+}
+
 #ffffallback-content-container * {
   color:rgb(255,0,255) !important;
 }
@@ -132,7 +157,7 @@ body.ffffallback-hide-original #ffffallback-content-container {
   -moz-border-radius-topright:        3px;
   -moz-border-radius-bottomright:     3px;
   border-top-right-radius:            3px;
-  border-bottom-right-radius:         3px;  
+  border-bottom-right-radius:         3px;
 }
 #ffffallback-radios label:active, #ffffallback-update:active {
   background-image: -moz-linear-gradient(-90deg, #b9b9b9 , #969696 );
@@ -152,6 +177,7 @@ body.ffffallback-hide-original #ffffallback-content-container {
 #ffffallback-fonts {
   list-style: none;
   margin-top: 0;
+  height: 100% !important;
   max-height: 500px;
   overflow-y: scroll;
   -moz-box-shadow:    inset 0 2px 5px black;
@@ -191,8 +217,12 @@ body.ffffallback-hide-original #ffffallback-content-container {
   padding:0 1em 1em 1em;
 }
 
-#ffffallback-fonts li input {
+#ffffallback-fonts li b {
   display: block;
+}
+
+#ffffallback-fonts li input {
+  display: inline-block;
   -webkit-box-shadow: rgb(68, 68, 68) 0px 1px 0px;
   background: rgb(102, 102, 102);
   border: 1px solid black;
@@ -200,7 +230,7 @@ body.ffffallback-hide-original #ffffallback-content-container {
   color: rgb(204, 204, 204);
   font:normal 13px/normal Arial, sans-serif;
   padding: 5px;
-  width:160px;
+  width:150px;
   margin-top:10px;
 }
 #ffffallback-update {
diff --git a/bookmarklet/ffffallback.js b/bookmarklet/ffffallback.js
index c3ac131..d071612 100644
--- a/bookmarklet/ffffallback.js
+++ b/bookmarklet/ffffallback.js
@@ -153,6 +153,11 @@
     element.setAttribute('class', elementClassName);
   };
 
+  $.isClassOnElement = function(className, element) {
+    var classes = (element.getAttribute('class') || '').split(' ');
+    return (classes.indexOf(className) >= 0);
+  }
+
   $.removeClassFromElement = function(classNameToRemove, element) {
     var elementClassName = '';
     var classes = (element.getAttribute('class') || '').split(' ');
@@ -212,7 +217,11 @@
       cssText += '#ffffallback-content-container ' + selector + ' {\n';
       cssText += 'color: magenta !important;';
       $.each(declarations, function(value, key) {
-        cssText += '  ' + key + ': ' + value + ';\n';
+        if(key === 'x-more') {
+          cssText += '  ' + value + ';\n';
+        } else {
+          cssText += '  ' + key + ': ' + value + ';\n';
+        }
       });
       cssText += '}\n\n';
     });
@@ -273,15 +282,28 @@
       var fonts = document.getElementById('ffffallback-fonts');
       var toggles = document.getElementById('ffffallback-toggles');
 
-      fonts.style.maxHeight = (controller.offsetHeight - (title.offsetHeight + toggles.offsetHeight + 40)) + 'px';
+      var maxHeight = controller.offsetHeight - (title.offsetHeight + toggles.offsetHeight);
+      fonts.style.maxHeight = maxHeight + 'px';
     }
+    $.r = resizeController;
     window.addEventListener('resize', resizeController, false);
     resizeController();
 
-    var fontClass;
+    var fontClass, row;
     $.each($.getAllFontsInUse(document.body), function(font) {
       fontClass = $.getClassForFont(font);
-      fontList.appendChild($.createElementWithContent('li', '<b>' + font + '</b><input type="text" value="" placeholder="Fallback font" class="ffffallback-specify-font" data:font-class="' + fontClass + '" />'));
+      row = $.createElementWithContent('li', '<b>' + font + '</b><a href="#" class="ffffallback-disclosure">&#x25BA;</a><input type="text" value="" placeholder="Fallback font" class="ffffallback-specify-font" data:font-class="' + fontClass + '" /><textarea class="ffffallback-more-values" placeholder="More CSS styles"></textarea>');
+      row.setAttribute('class', 'collapsed');
+      $.event(row.getElementsByClassName('ffffallback-disclosure')[0], 'click', function() {
+        if($.isClassOnElement('collapsed', row)) {
+          $.addClassToElement('expanded', row);
+          $.removeClassFromElement('collapsed', row);
+        } else {
+          $.addClassToElement('collapsed', row);
+          $.removeClassFromElement('expanded', row);
+        }
+      });
+      fontList.appendChild(row);
     });
 
     $.event(document.getElementById('ffffallback-display-mode-original'), 'click', function() {
@@ -329,14 +351,17 @@
         if(!fontInput.getAttribute) {
           return;
         }
+        var moreTextArea = fontInput.parentNode.getElementsByClassName('ffffallback-more-values')[0];
         var className = fontInput.getAttribute('data:font-class');
         var value = $.trimString(fontInput.value);
-        if(!value) {
+        var moreValues = $.trimString(moreTextArea.value);
+        if(!value && !moreValues) {
           return;
         }
         cssDeclarations['.' + className] = {
           //  TODO: 'font' instead of font-family?
-          'font-family': value
+          'font-family': value,
+          'x-more': moreValues
         };
       });
       console.log(cssDeclarations);
@@ -344,11 +369,11 @@
     });
   }
 
+  if(document.body) {
+    $.init();
+  } else {
   window.addEventListener('load', function() {
     $.init();
   }, false);
-
-  if(document.body) {
-    $.init();
   }
 })();
\ No newline at end of file
diff --git a/secret.html b/secret.html
index 1106daa..3c3b162 100644
--- a/secret.html
+++ b/secret.html
@@ -56,5 +56,8 @@
       var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
     })();
   </script>
+  <script src="bookmarklet/ffffallback.js"></script>
+  <link rel="stylesheet" href="bookmarklet/ffffallback.css" />
+
 </body>
 </html>