").append(m.parseHTML(a)).find(d):a)}).complete(c&&function(a,b){g.each(c,e||[a.responseText,b,a])}),this},m.expr.filters.animated=function(a){return m.grep(m.timers,function(b){return a===b.elem}).length};var cd=a.document.documentElement;function dd(a){return m.isWindow(a)?a:9===a.nodeType?a.defaultView||a.parentWindow:!1}m.offset={setOffset:function(a,b,c){var d,e,f,g,h,i,j,k=m.css(a,"position"),l=m(a),n={};"static"===k&&(a.style.position="relative"),h=l.offset(),f=m.css(a,"top"),i=m.css(a,"left"),j=("absolute"===k||"fixed"===k)&&m.inArray("auto",[f,i])>-1,j?(d=l.position(),g=d.top,e=d.left):(g=parseFloat(f)||0,e=parseFloat(i)||0),m.isFunction(b)&&(b=b.call(a,c,h)),null!=b.top&&(n.top=b.top-h.top+g),null!=b.left&&(n.left=b.left-h.left+e),"using"in b?b.using.call(a,n):l.css(n)}},m.fn.extend({offset:function(a){if(arguments.length)return void 0===a?this:this.each(function(b){m.offset.setOffset(this,a,b)});var b,c,d={top:0,left:0},e=this[0],f=e&&e.ownerDocument;if(f)return b=f.documentElement,m.contains(b,e)?(typeof e.getBoundingClientRect!==K&&(d=e.getBoundingClientRect()),c=dd(f),{top:d.top+(c.pageYOffset||b.scrollTop)-(b.clientTop||0),left:d.left+(c.pageXOffset||b.scrollLeft)-(b.clientLeft||0)}):d},position:function(){if(this[0]){var a,b,c={top:0,left:0},d=this[0];return"fixed"===m.css(d,"position")?b=d.getBoundingClientRect():(a=this.offsetParent(),b=this.offset(),m.nodeName(a[0],"html")||(c=a.offset()),c.top+=m.css(a[0],"borderTopWidth",!0),c.left+=m.css(a[0],"borderLeftWidth",!0)),{top:b.top-c.top-m.css(d,"marginTop",!0),left:b.left-c.left-m.css(d,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var a=this.offsetParent||cd;while(a&&!m.nodeName(a,"html")&&"static"===m.css(a,"position"))a=a.offsetParent;return a||cd})}}),m.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(a,b){var c=/Y/.test(b);m.fn[a]=function(d){return V(this,function(a,d,e){var f=dd(a);return void 0===e?f?b in f?f[b]:f.document.documentElement[d]:a[d]:void(f?f.scrollTo(c?m(f).scrollLeft():e,c?e:m(f).scrollTop()):a[d]=e)},a,d,arguments.length,null)}}),m.each(["top","left"],function(a,b){m.cssHooks[b]=Lb(k.pixelPosition,function(a,c){return c?(c=Jb(a,b),Hb.test(c)?m(a).position()[b]+"px":c):void 0})}),m.each({Height:"height",Width:"width"},function(a,b){m.each({padding:"inner"+a,content:b,"":"outer"+a},function(c,d){m.fn[d]=function(d,e){var f=arguments.length&&(c||"boolean"!=typeof d),g=c||(d===!0||e===!0?"margin":"border");return V(this,function(b,c,d){var e;return m.isWindow(b)?b.document.documentElement["client"+a]:9===b.nodeType?(e=b.documentElement,Math.max(b.body["scroll"+a],e["scroll"+a],b.body["offset"+a],e["offset"+a],e["client"+a])):void 0===d?m.css(b,c,g):m.style(b,c,d,g)},b,f?d:void 0,f,null)}})}),m.fn.size=function(){return this.length},m.fn.andSelf=m.fn.addBack,"function"==typeof define&&define.amd&&define("jquery",[],function(){return m});var ed=a.jQuery,fd=a.$;return m.noConflict=function(b){return a.$===m&&(a.$=fd),b&&a.jQuery===m&&(a.jQuery=ed),m},typeof b===K&&(a.jQuery=a.$=m),m});
5 |
--------------------------------------------------------------------------------
/js/jquery.animate-colors.js:
--------------------------------------------------------------------------------
1 | /**!
2 | * @preserve Color animation 1.6.0
3 | * http://www.bitstorm.org/jquery/color-animation/
4 | * Copyright 2011, 2013 Edwin Martin
5 | * Released under the MIT and GPL licenses.
6 | */
7 |
8 | (function($) {
9 | /**
10 | * Check whether the browser supports RGBA color mode.
11 | *
12 | * Author Mehdi Kabab
13 | * @return {boolean} True if the browser support RGBA. False otherwise.
14 | */
15 | function isRGBACapable() {
16 | var $script = $('script:first'),
17 | color = $script.css('color'),
18 | result = false;
19 | if (/^rgba/.test(color)) {
20 | result = true;
21 | } else {
22 | try {
23 | result = ( color != $script.css('color', 'rgba(0, 0, 0, 0.5)').css('color') );
24 | $script.css('color', color);
25 | } catch (e) {
26 | }
27 | }
28 |
29 | return result;
30 | }
31 |
32 | $.extend(true, $, {
33 | support: {
34 | 'rgba': isRGBACapable()
35 | }
36 | });
37 |
38 | var properties = ['color', 'backgroundColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor', 'outlineColor'];
39 | $.each(properties, function(i, property) {
40 | $.Tween.propHooks[ property ] = {
41 | get: function(tween) {
42 | return $(tween.elem).css(property);
43 | },
44 | set: function(tween) {
45 | var style = tween.elem.style;
46 | var p_begin = parseColor($(tween.elem).css(property));
47 | var p_end = parseColor(tween.end);
48 | tween.run = function(progress) {
49 | style[property] = calculateColor(p_begin, p_end, progress);
50 | }
51 | }
52 | }
53 | });
54 |
55 | // borderColor doesn't fit in standard fx.step above.
56 | $.Tween.propHooks.borderColor = {
57 | set: function(tween) {
58 | var style = tween.elem.style;
59 | var p_begin = [];
60 | var borders = properties.slice(2, 6); // All four border properties
61 | $.each(borders, function(i, property) {
62 | p_begin[property] = parseColor($(tween.elem).css(property));
63 | });
64 | var p_end = parseColor(tween.end);
65 | tween.run = function(progress) {
66 | $.each(borders, function(i, property) {
67 | style[property] = calculateColor(p_begin[property], p_end, progress);
68 | });
69 | }
70 | }
71 | }
72 |
73 | // Calculate an in-between color. Returns "#aabbcc"-like string.
74 | function calculateColor(begin, end, pos) {
75 | var color = 'rgb' + ($.support['rgba'] ? 'a' : '') + '('
76 | + parseInt((begin[0] + pos * (end[0] - begin[0])), 10) + ','
77 | + parseInt((begin[1] + pos * (end[1] - begin[1])), 10) + ','
78 | + parseInt((begin[2] + pos * (end[2] - begin[2])), 10);
79 | if ($.support['rgba']) {
80 | color += ',' + (begin && end ? parseFloat(begin[3] + pos * (end[3] - begin[3])) : 1);
81 | }
82 | color += ')';
83 | return color;
84 | }
85 |
86 | // Parse an CSS-syntax color. Outputs an array [r, g, b]
87 | function parseColor(color) {
88 | var match, quadruplet;
89 |
90 | // Match #aabbcc
91 | if (match = /#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})/.exec(color)) {
92 | quadruplet = [parseInt(match[1], 16), parseInt(match[2], 16), parseInt(match[3], 16), 1];
93 |
94 | // Match #abc
95 | } else if (match = /#([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])/.exec(color)) {
96 | quadruplet = [parseInt(match[1], 16) * 17, parseInt(match[2], 16) * 17, parseInt(match[3], 16) * 17, 1];
97 |
98 | // Match rgb(n, n, n)
99 | } else if (match = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color)) {
100 | quadruplet = [parseInt(match[1]), parseInt(match[2]), parseInt(match[3]), 1];
101 |
102 | } else if (match = /rgba\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9\.]*)\s*\)/.exec(color)) {
103 | quadruplet = [parseInt(match[1], 10), parseInt(match[2], 10), parseInt(match[3], 10),parseFloat(match[4])];
104 |
105 | // No browser returns rgb(n%, n%, n%), so little reason to support this format.
106 | } else {
107 | quadruplet = colors[color];
108 | }
109 | return quadruplet;
110 | }
111 |
112 | // Some named colors to work with, added by Bradley Ayers
113 | // From Interface by Stefan Petre
114 | // http://interface.eyecon.ro/
115 | var colors = {
116 | 'aqua': [0,255,255,1],
117 | 'azure': [240,255,255,1],
118 | 'beige': [245,245,220,1],
119 | 'black': [0,0,0,1],
120 | 'blue': [0,0,255,1],
121 | 'brown': [165,42,42,1],
122 | 'cyan': [0,255,255,1],
123 | 'darkblue': [0,0,139,1],
124 | 'darkcyan': [0,139,139,1],
125 | 'darkgrey': [169,169,169,1],
126 | 'darkgreen': [0,100,0,1],
127 | 'darkkhaki': [189,183,107,1],
128 | 'darkmagenta': [139,0,139,1],
129 | 'darkolivegreen': [85,107,47,1],
130 | 'darkorange': [255,140,0,1],
131 | 'darkorchid': [153,50,204,1],
132 | 'darkred': [139,0,0,1],
133 | 'darksalmon': [233,150,122,1],
134 | 'darkviolet': [148,0,211,1],
135 | 'fuchsia': [255,0,255,1],
136 | 'gold': [255,215,0,1],
137 | 'green': [0,128,0,1],
138 | 'indigo': [75,0,130,1],
139 | 'khaki': [240,230,140,1],
140 | 'lightblue': [173,216,230,1],
141 | 'lightcyan': [224,255,255,1],
142 | 'lightgreen': [144,238,144,1],
143 | 'lightgrey': [211,211,211,1],
144 | 'lightpink': [255,182,193,1],
145 | 'lightyellow': [255,255,224,1],
146 | 'lime': [0,255,0,1],
147 | 'magenta': [255,0,255,1],
148 | 'maroon': [128,0,0,1],
149 | 'navy': [0,0,128,1],
150 | 'olive': [128,128,0,1],
151 | 'orange': [255,165,0,1],
152 | 'pink': [255,192,203,1],
153 | 'purple': [128,0,128,1],
154 | 'violet': [128,0,128,1],
155 | 'red': [255,0,0,1],
156 | 'silver': [192,192,192,1],
157 | 'white': [255,255,255,1],
158 | 'yellow': [255,255,0,1],
159 | 'transparent': [255,255,255,0]
160 | };
161 | })(jQuery);
--------------------------------------------------------------------------------
/js/main.js:
--------------------------------------------------------------------------------
1 | $(function () {
2 | var doc = document;
3 | var win = window;
4 | var fonts = ['sans-serif', 'serif'];
5 | var colors = ['darker', 'lighter'];
6 | var defaultTexts = {
7 | headerContent: 'My Great Document',
8 | bodyContent: 'Your text here. Delete me to get started!'
9 | };
10 |
11 | var $body = $('body');
12 | var $contentEditable = $('[contenteditable]');
13 | var $btnToggleContrast = $('.js-toggle-contrast');
14 | var $btnToggleFonts = $('.js-toggle-fonts');
15 | var $btnDownload = $('.js-download-content');
16 | var $btnOpenGithub = $('.js-open-github');
17 |
18 | var Storage = {
19 | get: function (val, cb) {
20 | var val = win.localStorage.getItem(val);
21 | if (cb) cb();
22 | return val;
23 | },
24 | set: function (key, val, cb) {
25 | win.localStorage.setItem(key, val);
26 | if (cb) cb();
27 | }
28 | };
29 |
30 | var toggleColors = function (evt, val) {
31 | // evt is automatically send when doing
32 | // $btnToggleContrast.on('click', toggleColors);
33 |
34 | // if a specific color is send, apply it
35 | // else, juste toggle
36 |
37 | var newColor = val ? val : colors[0];
38 |
39 | // tricky part
40 | if (!val || val === colors[0]){
41 | colors.reverse();
42 | }
43 |
44 | Storage.set('color', newColor, function(){
45 | $body.attr('data-color', newColor);
46 | });
47 | };
48 |
49 | var toggleFonts = function (evt, val) {
50 | // evt is automatically send when doing
51 | // $btnToggleFonts.on('click', toggleFonts);
52 |
53 | // if a specific font is send, apply it
54 | // else, juste toggle
55 |
56 | var newFont = val ? val : fonts[0];
57 |
58 | // tricky part
59 | if (!val || val === fonts[0]){
60 | fonts.reverse();
61 | }
62 |
63 | Storage.set('font', newFont, function(){
64 | $body.attr('data-font', newFont);
65 | });
66 | };
67 |
68 | /*
69 | * This function change some of the code from the block's of text.
70 | * @var str string writen from the page
71 | * @var type allow programmer to specify more than one type of enhancement
72 | * to diferent types of text like: title, body,...
73 | * @return the new string.
74 | */
75 | var codeEnhancement = function(str, type) {
76 | switch(type){
77 | // you can add new types here...
78 | default:
79 | return String(str).replace(//g, '\n').replace(/<\/div>/g, '');
80 | break;
81 | }
82 | }
83 |
84 |
85 | $btnToggleContrast.on('click', toggleColors);
86 |
87 | $btnToggleFonts.on('click', toggleFonts);
88 |
89 | $btnDownload.on('click', function () {
90 | var headerContent = codeEnhancement(Storage.get('headerContent'), "title");
91 | var bodyContent = codeEnhancement(Storage.get('bodyContent'), "body");
92 | var blob = new Blob([headerContent + '\n \n' + bodyContent], {
93 | type: "text/plain;charset=utf-8"
94 | });
95 | saveAs(blob, "slight.txt");
96 | });
97 |
98 | $btnOpenGithub.on('click', function () {
99 | window.open('https://github.com/pixelmack/slight','_blank');
100 | });
101 |
102 | $contentEditable
103 | .each(function (i, el) {
104 | var $this = $(el);
105 | var scope = $this.attr('data-scope');
106 | var storageContent = Storage.get(scope);
107 | var content;
108 | if (storageContent != null && storageContent != "null") {
109 | content = storageContent;
110 | }
111 | else {
112 | Storage.set(scope, defaultTexts[scope]);
113 | content = defaultTexts[scope];
114 | }
115 |
116 | $this.html(content);
117 | })
118 | .on('paste', function (e) {
119 | e.preventDefault();
120 | var text = (e.originalEvent || e).clipboardData.getData('text/plain') || prompt('Your text here! Delete me to get started.');
121 | console.log(text);
122 | document.execCommand('insertText', false, text);
123 | })
124 | .on('keyup', function () {
125 | var $this = $(this);
126 | var scope = $this.attr('data-scope');
127 | var content = $this.html();
128 |
129 | Storage.set(scope, content);
130 | });
131 |
132 |
133 | // if user has settings, apply
134 | var userFont = Storage.get('font');
135 | var userColor = Storage.get('color');
136 |
137 | if (userFont !== 'null') {
138 | toggleFonts(null, userFont);
139 | }
140 | if (userColor !== 'null') {
141 | toggleColors(null, userColor);
142 | }
143 |
144 | });
145 |
--------------------------------------------------------------------------------