summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--node/utils/tar.json1
-rw-r--r--static/css/pad.css59
-rw-r--r--static/js/pad.js1
-rw-r--r--static/js/prefixfree.js419
4 files changed, 433 insertions, 47 deletions
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<self.fixers.length; i++) {
+ css = self.fixers[i](css, raw) || css;
+ }
+
+ return css;
+ },
+
+ camelCase: function(str) {
+ return str.replace(/-([a-z])/g, function($0, $1) { return $1.toUpperCase(); }).replace('-','');
+ },
+
+ deCamelCase: function(str) {
+ return str.replace(/[A-Z]/g, function($0) { return '-' + $0.toLowerCase() });
+ }
+};
+
+/**************************************
+ * Process styles
+ **************************************/
+(function(){
+ setTimeout(function(){
+ $('link[rel="stylesheet"]').forEach(StyleFix.link);
+ }, 10);
+
+ document.addEventListener('DOMContentLoaded', StyleFix.process, false);
+})();
+
+function $(expr, con) {
+ return [].slice.call((con || document).querySelectorAll(expr));
+}
+
+})();
+
+/**
+ * PrefixFree 1.0.4
+ * @author Lea Verou
+ * MIT license
+ */
+(function(root, undefined){
+
+if(!window.StyleFix || !window.getComputedStyle) {
+ return;
+}
+
+var self = window.PrefixFree = {
+ prefixCSS: function(css, raw) {
+ var prefix = self.prefix;
+
+ function fix(what, before, after, replacement) {
+ what = self[what];
+
+ if(what.length) {
+ var regex = RegExp(before + '(' + what.join('|') + ')' + after, 'gi');
+
+ css = css.replace(regex, replacement);
+ }
+ }
+
+ fix('functions', '(\\s|:|,)', '\\s*\\(', '$1' + prefix + '$2(');
+ fix('keywords', '(\\s|:)', '(\\s|;|\\}|$)', '$1' + prefix + '$2$3');
+ fix('properties', '(^|\\{|\\s|;)', '\\s*:', '$1' + prefix + '$2:');
+
+ // Prefix properties *inside* values (issue #8)
+ if (self.properties.length) {
+ var regex = RegExp('\\b(' + self.properties.join('|') + ')(?!:)', 'gi');
+
+ fix('valueProperties', '\\b', ':(.+?);', function($0) {
+ return $0.replace(regex, prefix + "$1")
+ });
+ }
+
+ if(raw) {
+ fix('selectors', '', '\\b', self.prefixSelector);
+ fix('atrules', '@', '\\b', '@' + prefix + '$1');
+ }
+
+ // Fix double prefixing
+ css = css.replace(RegExp('-' + prefix, 'g'), '-');
+
+ return css;
+ },
+
+ // Warning: prefixXXX functions prefix no matter what, even if the XXX is supported prefix-less
+ prefixSelector: function(selector) {
+ return selector.replace(/^:{1,2}/, function($0) { return $0 + self.prefix })
+ },
+
+ prefixProperty: function(property, camelCase) {
+ var prefixed = self.prefix + property;
+
+ return camelCase? StyleFix.camelCase(prefixed) : prefixed;
+ }
+};
+
+/**************************************
+ * Properties
+ **************************************/
+(function() {
+ var prefixes = {},
+ properties = [],
+ shorthands = {},
+ style = getComputedStyle(document.documentElement, null),
+ dummy = document.createElement('div').style;
+
+ // Why are we doing this instead of iterating over properties in a .style object? Cause Webkit won't iterate over those.
+ var iterate = function(property) {
+ if(property.charAt(0) === '-') {
+ properties.push(property);
+
+ var parts = property.split('-'),
+ prefix = parts[1];
+
+ // Count prefix uses
+ prefixes[prefix] = ++prefixes[prefix] || 1;
+
+ // This helps determining shorthands
+ while(parts.length > 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<style.length; i++) {
+ iterate(style[i])
+ }
+ }
+ else {
+ for(var property in style) {
+ iterate(StyleFix.deCamelCase(property));
+ }
+ }
+
+ // Find most frequently used prefix
+ var highest = {uses:0};
+ for(var prefix in prefixes) {
+ var uses = prefixes[prefix];
+
+ if(highest.uses < uses) {
+ highest = {prefix: prefix, uses: uses};
+ }
+ }
+
+ self.prefix = '-' + highest.prefix + '-';
+ self.Prefix = StyleFix.camelCase(self.prefix);
+
+ self.properties = [];
+
+ // Get properties ONLY supported with a prefix
+ for(var i=0; i<properties.length; i++) {
+ var property = properties[i];
+
+ if(property.indexOf(self.prefix) === 0) { // we might have multiple prefixes, like Opera
+ var unprefixed = property.slice(self.prefix.length);
+
+ if(!supported(unprefixed)) {
+ self.properties.push(unprefixed);
+ }
+ }
+ }
+
+ // IE fix
+ if(self.Prefix == 'Ms'
+ && !('transform' in dummy)
+ && !('MsTransform' in dummy)
+ && ('msTransform' in dummy)) {
+ self.properties.push('transform', 'transform-origin');
+ }
+
+ self.properties.sort();
+})();
+
+/**************************************
+ * Values
+ **************************************/
+(function() {
+// Values that might need prefixing
+var functions = {
+ 'linear-gradient': {
+ property: 'backgroundImage',
+ params: 'red, teal'
+ },
+ 'calc': {
+ property: 'width',
+ params: '1px + 5%'
+ },
+ 'element': {
+ property: 'backgroundImage',
+ params: '#foo'
+ }
+};
+
+
+functions['repeating-linear-gradient'] =
+functions['repeating-radial-gradient'] =
+functions['radial-gradient'] =
+functions['linear-gradient'];
+
+var keywords = {
+ 'initial': 'color',
+ 'zoom-in': 'cursor',
+ 'zoom-out': 'cursor',
+ 'box': 'display',
+ 'flexbox': 'display',
+ 'inline-flexbox': 'display'
+};
+
+self.functions = [];
+self.keywords = [];
+
+var style = document.createElement('div').style;
+
+function supported(value, property) {
+ style[property] = '';
+ style[property] = value;
+
+ return !!style[property];
+}
+
+for (var func in functions) {
+ var test = functions[func],
+ property = test.property,
+ value = func + '(' + test.params + ')';
+
+ if (!supported(value, property)
+ && supported(self.prefix + value, property)) {
+ // It's supported, but with a prefix
+ self.functions.push(func);
+ }
+}
+
+for (var keyword in keywords) {
+ var property = keywords[keyword];
+
+ if (!supported(keyword, property)
+ && supported(self.prefix + keyword, property)) {
+ // It's supported, but with a prefix
+ self.keywords.push(keyword);
+ }
+}
+
+})();
+
+/**************************************
+ * Selectors and @-rules
+ **************************************/
+(function() {
+
+var
+selectors = {
+ ':read-only': null,
+ ':read-write': null,
+ ':any-link': null,
+ '::selection': null
+},
+
+atrules = {
+ 'keyframes': 'name',
+ 'viewport': null,
+ 'document': 'regexp(".")'
+};
+
+self.selectors = [];
+self.atrules = [];
+
+var style = root.appendChild(document.createElement('style'));
+
+function supported(selector) {
+ style.textContent = selector + '{}'; // Safari 4 has issues with style.innerHTML
+
+ return !!style.sheet.cssRules.length;
+}
+
+for(var selector in selectors) {
+ var test = selector + (selectors[selector]? '(' + selectors[selector] + ')' : '');
+
+ if(!supported(test) && supported(self.prefixSelector(test))) {
+ self.selectors.push(selector);
+ }
+}
+
+for(var atrule in atrules) {
+ var test = atrule + ' ' + (atrules[atrule] || '');
+
+ if(!supported('@' + test) && supported('@' + self.prefix + test)) {
+ self.atrules.push(atrule);
+ }
+}
+
+root.removeChild(style);
+
+})();
+
+// Properties that accept properties as their value
+self.valueProperties = [
+ 'transition',
+ 'transition-property'
+]
+
+// Add class for current prefix
+root.className += ' ' + self.prefix;
+
+StyleFix.register(self.prefixCSS);
+
+
+})(document.documentElement);