diff options
| -rw-r--r-- | bookmarklet/ffffallback.js | 40 |
1 files changed, 23 insertions, 17 deletions
diff --git a/bookmarklet/ffffallback.js b/bookmarklet/ffffallback.js index 11f5650..11bcb60 100644 --- a/bookmarklet/ffffallback.js +++ b/bookmarklet/ffffallback.js @@ -230,7 +230,7 @@ $.each(cssObject, function(declarations, selector) { cssText += '#ffffallback-content-container ' + selector + ' {\n'; - cssText += 'color: magenta !important;'; + cssText += ' color: magenta !important;\n'; $.each(declarations, function(value, key) { if(key === 'x-more') { cssText += ' ' + value + ';\n'; @@ -313,26 +313,31 @@ window.addEventListener('resize', resizeController, false); resizeController(); - var fontClass, row; - $.each($.getAllFontsInUse(document.body), function(font) { - fontClass = $.getClassForFont(font); - row = $.createElementWithContent('li', '<b>' + font + '</b><input type="text" value="" placeholder="Fallback font" class="ffffallback-specify-font" data:font-class="' + fontClass + '" /><a href="#" class="ffffallback-disclosure"><span>▼</span></a><textarea class="ffffallback-more-values" placeholder="e.g. line-height: 1.75;"></textarea>'); + function addRowWithContent(content) { + var row = $.createElementWithContent('li', content); row.setAttribute('class', 'collapsed'); - (function(row) { - $.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); - } - }); - })(row); + $.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); + + return row; + } + + var fontClass, row; + $.each($.getAllFontsInUse(document.body), function(font) { + fontClass = $.getClassForFont(font); + addRowWithContent('<b>' + font + '</b><input type="text" value="" placeholder="Fallback font" class="ffffallback-specify-font" data:font-class="' + fontClass + '" /><a href="#" class="ffffallback-disclosure"><span>▼</span></a><textarea class="ffffallback-more-values" placeholder="e.g. line-height: 1.75;"></textarea>'); }); + addRowWithContent('<b>Entire fallback body</b><input type="text" value="" placeholder="Fallback font" class="ffffallback-specify-font" data:font-class="*" /><a href="#" class="ffffallback-disclosure"><span>▼</span></a><textarea class="ffffallback-more-values" placeholder="e.g. line-height: 1.75;"></textarea>'); $.event(document.getElementById('ffffallback-display-mode-original'), 'click', function() { $.removeClassFromElement('ffffallback-hide-original', document.body); @@ -378,12 +383,13 @@ } var moreTextArea = fontInput.parentNode.getElementsByClassName('ffffallback-more-values')[0]; var className = fontInput.getAttribute('data:font-class'); + var selector = (className === '*') ? '*' : ('.' + className); var value = $.trimString(fontInput.value); var moreValues = $.trimString(moreTextArea.value); if(!value && !moreValues) { return; } - cssDeclarations['.' + className] = { + cssDeclarations[selector] = { // TODO: 'font' instead of font-family? 'font-family': value, 'x-more': moreValues |