diff options
| -rw-r--r-- | bookmarklet/ffffallback.css | 9 | ||||
| -rw-r--r-- | bookmarklet/ffffallback.js | 42 | ||||
| -rw-r--r-- | secret.html | 1 |
3 files changed, 40 insertions, 12 deletions
diff --git a/bookmarklet/ffffallback.css b/bookmarklet/ffffallback.css index 70bd992..63c7c9b 100644 --- a/bookmarklet/ffffallback.css +++ b/bookmarklet/ffffallback.css @@ -22,6 +22,7 @@ } #ffffallback-controller .expanded .ffffallback-disclosure span{ + -moz-transform: rotate(-180deg); -webkit-transform:rotate(-180deg); text-shadow:rgba(0,0,0,0.8) 0 1px 0; position:relative; @@ -50,6 +51,8 @@ top:7px; text-decoration: none; text-shadow:rgba(0,0,0,0.8) 0 -1px 0; + -moz-transition-property: -moz-transform; + -moz-transition-duration: 0.125s; -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 0.25s; } @@ -94,6 +97,8 @@ body.ffffallback-hide-original #ffffallback-content-container { #ffffallback-controller h1 { color:#313131; + background-color: #cecece; + background-image: -moz-linear-gradient(0deg, #cecece, #b3b3b3); background-image: -webkit-gradient(linear, 0 top, 0 bottom, from( #cecece ), to( #b3b3b3 )); border-bottom:1px solid rgba(0,0,0,0.2); text-shadow:rgba(255,255,255,0.6) 0 1px 0; @@ -198,7 +203,7 @@ body.ffffallback-hide-original #ffffallback-content-container { margin-top: 0; height: 100% !important; max-height: 500px; - overflow-y: scroll; + overflow-y: auto; -moz-box-shadow: inset 0 2px 5px black; -webkit-box-shadow: inset 0 2px 5px black; -o-box-shadow: inset 0 2px 5px black; @@ -249,7 +254,7 @@ body.ffffallback-hide-original #ffffallback-content-container { color: #eee; font:normal 13px/normal Arial, sans-serif; padding: 5px; - width:160px; + width:150px; margin-top:10px; } input[type=text]::-webkit-input-placeholder { diff --git a/bookmarklet/ffffallback.js b/bookmarklet/ffffallback.js index b75f593..47ac39d 100644 --- a/bookmarklet/ffffallback.js +++ b/bookmarklet/ffffallback.js @@ -1,4 +1,16 @@ (function() { + if(navigator.userAgent.indexOf('MSIE') >= 0) { + return alert('FFFFALLBACK only works in Chrome, Safari, and Firefox right now. :(\n\nSorry,\n - Mark'); + } + + if(typeof(console) == 'undefined') { + var console = { + log: function(message) { + // alert(message); + } + } + } + var $ = { memo: {}, } @@ -18,6 +30,12 @@ }; $.getComputedStyleOfElement = function(elem) { + if(!elem.tagName) { + alert("WHAT THE FUCK"); + window.bum = elem; + return null; + } + /** * Based on this blog entry: * http://blog.stchur.com/2006/06/21/css-computed-style/ @@ -25,6 +43,7 @@ if (typeof elem.currentStyle != 'undefined') { return elem.currentStyle; } + return document.defaultView.getComputedStyle(elem, null); }; @@ -45,7 +64,6 @@ $.getFontsFromDeclaration = function(fontDeclaration) { if($.getFontsFromDeclaration.memo[fontDeclaration]) { - console.log('memo'); return $.getFontsFromDeclaration.memo[fontDeclaration]; } @@ -60,12 +78,14 @@ $.getFontsFromDeclaration.memo = {}; $.getElementFont = function(elem) { - var style = $.getComputedStyleOfElement(elem); - if(style && style['font-family']) { + var style = $.getComputedStyleOfElement(elem) || {}; + if(style['font-family']) { return style['font-family']; - } else { - return null; + } else if(style['fontFamily']) { + return style['fontFamily']; } + + return null; } $.unique = function(array) { @@ -126,6 +146,9 @@ var elemFont = $.getElementFont(elem); var fonts = elemFont ? [elemFont] : []; $.each(elem.childNodes, function(childElem) { + if(!childElem.tagName) { + return; + } fonts = fonts.concat($.getAllFontsInUse(childElem)); }); return $.removeBoringFonts($.unique(fonts)).sort(); @@ -171,7 +194,7 @@ $.addFontClasses = function(elem, parentFont) { parentFont = parentFont || null; - var font = $.getElementFont(elem); + var font = elem.tagName ? $.getElementFont(elem) : false; if(elem.getAttribute) { var className = false; @@ -233,8 +256,8 @@ document.body.appendChild(styleElement); } - styleElement.innerText = cssText; - console.log('Did set', cssText); + styleElement.innerHTML = cssText; + console.log('Did set' + cssText); }; window.$fallback = $; @@ -271,6 +294,7 @@ </form>\ '); controller.setAttribute('id', 'ffffallback-controller'); + console.log('adding controller'); document.body.appendChild(controller); var fontList = document.getElementById('ffffallback-fonts'); fontList.innerHTML = ''; @@ -292,7 +316,7 @@ 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. Ex. Verdana" class="ffffallback-specify-font" data:font-class="' + fontClass + '" /><a href="#" class="ffffallback-disclosure"><span>▼</span></a><textarea class="ffffallback-more-values" placeholder="Adjust styles. Ex. color:red;"></textarea>'); + 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>'); row.setAttribute('class', 'collapsed'); $.event(row.getElementsByClassName('ffffallback-disclosure')[0], 'click', function() { if($.isClassOnElement('collapsed', row)) { diff --git a/secret.html b/secret.html index 3c3b162..f6d6d69 100644 --- a/secret.html +++ b/secret.html @@ -58,6 +58,5 @@ </script> <script src="bookmarklet/ffffallback.js"></script> <link rel="stylesheet" href="bookmarklet/ffffallback.css" /> - </body> </html> |