diff options
| -rw-r--r-- | bookmarklet/ffffallback.css | 36 | ||||
| -rw-r--r-- | bookmarklet/ffffallback.js | 43 | ||||
| -rw-r--r-- | secret.html | 3 |
3 files changed, 70 insertions, 12 deletions
diff --git a/bookmarklet/ffffallback.css b/bookmarklet/ffffallback.css index 67707c5..c72138c 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">►</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> |