diff --git a/node/utils/tar.json b/node/utils/tar.json index 8813b776..aeafe23f 100644 --- a/node/utils/tar.json +++ b/node/utils/tar.json @@ -21,6 +21,7 @@ , "chat.js" , "excanvas.js" , "farbtastic.js" + , "prefixfree.js" ] , "timeslider.js": [ "jquery.js" diff --git a/static/css/pad.css b/static/css/pad.css index a71c5d59..e407b3a4 100644 --- a/static/css/pad.css +++ b/static/css/pad.css @@ -15,7 +15,6 @@ iframe {position:absolute;} top: 40px; color: #fff; padding: 5px; - -moz-border-radius: 6px; border-radius: 6px; } @@ -39,10 +38,7 @@ a img #editbar { background: #f7f7f7; - background: -moz-linear-gradient(#f7f7f7, #f1f1f1 80%); - background: -ms-linear-gradient(#f7f7f7, #f1f1f1 80%); - background: -o-linear-gradient(#f7f7f7, #f1f1f1 80%); - background: -webkit-linear-gradient(#f7f7f7, #f1f1f1 80%); + background: linear-gradient(#f7f7f7, #f1f1f1 80%); border-bottom: 1px solid #ccc; height: 32px; overflow: hidden; @@ -53,10 +49,7 @@ a img #editbar ul li { background: #fff; - background: -moz-linear-gradient(#fff, #f0f0f0); - background: -ms-linear-gradient(#fff, #f0f0f0); - background: -o-linear-gradient(#fff, #f0f0f0); - background: -webkit-linear-gradient(#fff, #f0f0f0); + background: linear-gradient(#fff, #f0f0f0); border: 1px solid #ccc; border-radius: 4px; cursor: pointer; @@ -86,10 +79,7 @@ a img #editbar ul li:active { background: #eee; - background: -moz-linear-gradient(#ddd, #fff); - background: -ms-linear-gradient(#ddd, #fff); - background: -o-linear-gradient(#ddd, #fff); - background: -webkit-linear-gradient(#ddd, #fff); + background: linear-gradient(#ddd, #fff); } #editbar ul li.separator @@ -190,7 +180,6 @@ a#backtoprosite { padding-left: 20px; left: 6px; #alertbar { margin-top: 6px; opacity: 0; - filter: alpha(opacity = 0); /* IE */ display: none; position:absolute; left:0; @@ -384,10 +373,7 @@ a#hidetopmsg { position: absolute; right: 5px; bottom: 5px; } #mycolorpickersave, #mycolorpickercancel { background: #fff; - background: -moz-linear-gradient(#fff, #ccc); - background: -ms-linear-gradient(#fff, #ccc); - background: -o-linear-gradient(#fff, #ccc); - background: -webkit-linear-gradient(#fff, #ccc); + background: linear-gradient(#fff, #ccc); border: 1px solid #ccc; border-radius: 4px; font-size:12px; @@ -725,14 +711,7 @@ a#topbarmaximize { text-decoration: none; padding: 50pt; font-size: 20pt; - -moz-border-radius-topleft: 3pt; - -moz-border-radius-topright: 3pt; - -moz-border-radius-bottomleft: 3pt; - -moz-border-radius-bottomright: 3pt; - -webkit-border-top-left-radius: 3pt; - -webkit-border-top-right-radius: 3pt; - -webkit-border-bottom-left-radius: 3pt; - -webkit-border-bottom-right-radius: 3pt; + border-radius: 3pt; } .modaldialog .bigbutton { @@ -953,7 +932,7 @@ position: relative; } .impexpbutton{ - background-image: -moz-linear-gradient(center top , #EEEEEE, white 20%, white 20%); + background-image: linear-gradient(center top , #EEEEEE, white 20%, white 20%); padding:3px; } @@ -1021,7 +1000,6 @@ color: white; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.7); padding: 10px; --moz-border-radius: 6px; border-radius: 6px; opacity:.8; } @@ -1118,14 +1096,12 @@ width:33px !important; #embedreadonlyqr { box-shadow: 0 0 10px #000; border-radius: 3px; - -webkit-transition: all .2s ease-in-out; - -moz-transition: all .2s ease-in-out; + transition: all .2s ease-in-out; } #embedreadonlyqr:hover { cursor: none; - -moz-transform: scale(1.5); - -webkit-transform: scale(1.5); + transform: scale(1.5); } @media screen and (max-width: 960px) { @@ -1166,10 +1142,7 @@ width:33px !important; } #editbar ul#menu_right { background: #f7f7f7; - background: -moz-linear-gradient(#f7f7f7, #f1f1f1 80%); - background: -ms-linear-gradient(#f7f7f7, #f1f1f1 80%); - background: -o-linear-gradient(#f7f7f7, #f1f1f1 80%); - background: -webkit-linear-gradient(#f7f7f7, #f1f1f1 80%); + background: linear-gradient(#f7f7f7, #f1f1f1 80%); width: 100%; overflow: hidden; height: 32px; @@ -1193,10 +1166,7 @@ width:33px !important; border-right: none; border-radius: 0; background: #f7f7f7; - background: -moz-linear-gradient(#f7f7f7, #f1f1f1 80%); - background: -ms-linear-gradient(#f7f7f7, #f1f1f1 80%); - background: -o-linear-gradient(#f7f7f7, #f1f1f1 80%); - background: -webkit-linear-gradient(#f7f7f7, #f1f1f1 80%); + background: linear-gradient(#f7f7f7, #f1f1f1 80%); border: 0; } #chatbox { @@ -1237,8 +1207,7 @@ label { border-radius: 6px; background: #222; background: rgba(0,0,0,.7); - background: -webkit-linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.7) 35px, rgba(0,0,0,.6)); - background: -moz-linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.7) 35px, rgba(0,0,0,.6)); + background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.7) 35px, rgba(0,0,0,.6)); box-shadow: 0 0 8px #888; color: #fff; } @@ -1247,7 +1216,6 @@ label { width: 100%; padding: 5px; box-sizing: border-box; - -moz-box-sizing: border-box; display:block; margin-top: 10px; } @@ -1292,8 +1260,5 @@ label { .selected { background: #eee !important; - background: -webkit-linear-gradient(#EEE, #F0F0F0) !important; - background: -moz-linear-gradient(#EEE, #F0F0F0) !important; - background: -ms-linear-gradient(#EEE, #F0F0F0) !important; - background: -o-linear-gradient(#EEE, #F0F0F0) !important; + background: linear-gradient(#EEE, #F0F0F0) !important; } diff --git a/static/js/pad.js b/static/js/pad.js index 47b1635b..c7a740cb 100644 --- a/static/js/pad.js +++ b/static/js/pad.js @@ -31,6 +31,7 @@ require('/farbtastic'); require('/excanvas'); JSON = require('/json2'); require('/undo-xpopup'); +require('prefixfree'); var chat = require('/chat').chat; var getCollabClient = require('/collab_client').getCollabClient; diff --git a/static/js/prefixfree.js b/static/js/prefixfree.js new file mode 100644 index 00000000..1b0d5246 --- /dev/null +++ b/static/js/prefixfree.js @@ -0,0 +1,419 @@ +/** + * StyleFix 1.0.1 + * @author Lea Verou + * MIT license + */ + +(function(){ + +if(!window.addEventListener) { + return; +} + +var self = window.StyleFix = { + link: function(link) { + try { + // Ignore stylesheets with data-noprefix attribute as well as alternate stylesheets + if(link.rel !== 'stylesheet' || !link.sheet.cssRules || link.hasAttribute('data-noprefix')) { + return; + } + } + catch(e) { + return; + } + + var url = link.href || link.getAttribute('data-href'), + base = url.replace(/[^\/]+$/, ''), + parent = link.parentNode, + xhr = new XMLHttpRequest(); + + xhr.open('GET', url); + + xhr.onreadystatechange = function() { + if(xhr.readyState === 4) { + var css = xhr.responseText; + + if(css && link.parentNode) { + css = self.fix(css, true, link); + + // Convert relative URLs to absolute, if needed + if(base) { + css = css.replace(/url\((?:'|")?(.+?)(?:'|")?\)/gi, function($0, url) { + if(!/^([a-z]{3,10}:|\/|#)/i.test(url)) { // If url not absolute & not a hash + // May contain sequences like /../ and /./ but those DO work + return 'url("' + base + url + '")'; + } + + return $0; + }); + + // behavior URLs shoudn’t be converted (Issue #19) + css = css.replace(RegExp('\\b(behavior:\\s*?url\\(\'?"?)' + base, 'gi'), '$1'); + } + + var style = document.createElement('style'); + style.textContent = css; + style.media = link.media; + style.disabled = link.disabled; + style.setAttribute('data-href', link.getAttribute('href')); + + parent.insertBefore(style, link); + parent.removeChild(link); + } + } + }; + + xhr.send(null); + + link.setAttribute('data-inprogress', ''); + }, + + styleElement: function(style) { + var disabled = style.disabled; + + style.textContent = self.fix(style.textContent, true, style); + + style.disabled = disabled; + }, + + styleAttribute: function(element) { + var css = element.getAttribute('style'); + + css = self.fix(css, false, element); + + element.setAttribute('style', css); + }, + + process: function() { + // Linked stylesheets + $('link[rel="stylesheet"]:not([data-inprogress])').forEach(StyleFix.link); + + // Inline stylesheets + $('style').forEach(StyleFix.styleElement); + + // Inline styles + $('[style]').forEach(StyleFix.styleAttribute); + }, + + register: function(fixer, index) { + (self.fixers = self.fixers || []) + .splice(index === undefined? self.fixers.length : index, 0, fixer); + }, + + fix: function(css, raw) { + for(var i=0; i 3) { + parts.pop(); + + var shorthand = parts.join('-'); + + if(supported(shorthand) && properties.indexOf(shorthand) === -1) { + properties.push(shorthand); + } + } + } + }, + supported = function(property) { + return StyleFix.camelCase(property) in dummy; + } + + // Some browsers have numerical indices for the properties, some don't + if(style.length > 0) { + for(var i=0; i