From eef2c4d75e6dbb0cdfc301433a7c0eef20f4347c Mon Sep 17 00:00:00 2001 From: Pierre Leresteux Date: Sat, 28 Jul 2012 23:34:50 +0200 Subject: [PATCH 1/3] Add compact system --- scripts/etch.js | 48 ++++++++++++++++++++++++++++++---- styles/etch.css | 11 ++++++-- styles/images/entry_icons.png | Bin 0 -> 3021 bytes tryit.html | 2 +- 4 files changed, 53 insertions(+), 8 deletions(-) create mode 100644 styles/images/entry_icons.png diff --git a/scripts/etch.js b/scripts/etch.js index a0402e9..58eeb59 100644 --- a/scripts/etch.js +++ b/scripts/etch.js @@ -17,6 +17,7 @@ // in the markup as "data-button-class" buttonClasses: { 'default': ['save'], + 'compact': [['format', 'bold','italic','underline'],['list','unordered-list', 'ordered-list'], ['justify','justify-left','justify-center','justify-right'],'link','save'], 'all': ['bold', 'italic', 'underline', 'unordered-list', 'ordered-list', 'link', 'clear-formatting', 'save'], 'title': ['bold', 'italic', 'underline', 'save'] } @@ -51,14 +52,30 @@ 'click .etch-link': 'toggleLink', 'click .etch-image': 'getImage', 'click .etch-save': 'save', - 'click .etch-clear-formatting': 'clearFormatting' + 'click .etch-clear-formatting': 'clearFormatting', + 'click .etch-editor-buttonEntry': 'entryMenu', + 'click .etch-editor-entry': 'closeAllEntryMenu' }, changeEditable: function() { this.setButtonClass(); // Im assuming that Ill add more functionality here }, - + entryMenu: function(e) { + + var $target = $(e.target || e.srcElement); + var entryNumber = $target.data('entry'); + var display = $target.attr('data-display'); + this.closeAllEntryMenu(); + if (display == 'false'){ + $('.etch-editor-entry[data-entry="'+entryNumber+'"]').show('fast'); + $target.attr('data-display','true'); + } + }, + closeAllEntryMenu: function() { + $('.etch-editor-entry').hide('fast'); + $('.etch-editor-buttonEntry span[data-display="true"]').attr('data-display','false'); + }, setButtonClass: function() { // check the button class of the element being edited and set the associated buttons on the model var editorModel = this.model; @@ -71,13 +88,34 @@ this.$el.empty(); var view = this; var buttons = this.model.get('buttons'); - + var entryNumber = 0; + var nbButton = 0; // hide editor panel if there are no buttons in it and exit early if (!buttons.length) { $(this.el).hide(); return; } _.each(this.model.get('buttons'), function(button){ - var $buttonEl = $(''); - view.$el.append($buttonEl); + if (!_.isArray(button)){ + var $buttonEl = $(''); + view.$el.append($buttonEl); + }else{ + var entry; + var nbElement=0; + _.each(button, function(buttonEntry){ + if (entry==undefined) { + entry = buttonEntry; + var $buttonEl = $(''); + view.$el.append($buttonEl); + }else{ + var swiftTop = nbElement * 32 + 5; + var swiftLeft = nbButton * 32 + 5; + var $entryEl = $(''); + view.$el.append($entryEl); + } + nbElement++; + }); + entryNumber++; + } + nbButton++; }); $(this.el).show('fast'); diff --git a/styles/etch.css b/styles/etch.css index 3efe7ce..1e9bd2d 100644 --- a/styles/etch.css +++ b/styles/etch.css @@ -12,7 +12,8 @@ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fFfFfF), to(#f1f1f1)); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } - +.etch-editor-entry { display: none;position: absolute; + } .etch-editor-button:last-child { margin-right: 0; } .etch-editor-button:hover { background: #fff; border-color: #999; } .etch-editor-button span:active { box-shadow: inset 0 0 15px rgba(0,0,0,.5); border-color: #999; } @@ -22,6 +23,10 @@ display: block; height: 100%; width: 100%; } +.etch-editor-buttonEntry span { background: url('images/entry_icons.png') no-repeat; + display: block; height: 100%; width: 100%; +} + .etch-editor-panel .etch-bold span { background-position: 0 0; } .etch-editor-panel .etch-italic span { background-position: -30px 0; } .etch-editor-panel .etch-underline span { background-position: -60px 0; } @@ -36,4 +41,6 @@ .etch-editor-panel .etch-cite span { background-position: -330px 0; } .etch-editor-panel .etch-heading span { background-position: -360px 0; } .etch-editor-panel .etch-clear-formatting span { background-position: -390px 0; } - +.etch-editor-panel .etch-justify span { background-position: 0 0; } +.etch-editor-panel .etch-format span { background-position: -30px 0; } +.etch-editor-panel .etch-list span { background-position: -60px 0; } \ No newline at end of file diff --git a/styles/images/entry_icons.png b/styles/images/entry_icons.png new file mode 100644 index 0000000000000000000000000000000000000000..43b437049939fb43a8f6c73ae2fb90b217b45728 GIT binary patch literal 3021 zcmb_dc|25WA0LLv5^lCct}$dp=42{zW|%8WWX;w{(##k&n8nN)O-b6_;k~(*R1!BO zOW8w2;>wZ~s%t5sWG7|Gm2_vcxw`NB{&VN^Idh)#{e6GG@ALaU&v_2t*>S6kl&TaA z29vS1v2+pKcM2{w354K(?)td~7)(r?W?|uMYhi(OW;6Y0fm9f5^NN%1UCgI$ie`MK z%N1n;lDIWI;%<(+t5=DdYE})xHa2y1n{w)4o1S(rXw1)0TlRFYDAOtAs4-$r3V-GkvC^$3ZE(de;x$7!vK zgOSgg`6#D53?=o@RWr-C-+vrXWT#lM?EMU_81Zak_4p$rG0|(HXG0U^dCj$GQ%6mL zfYNaT@=z^>m68m8f5EWEx_)!jXfjc?keVq6{ zF|~wpQ;z>!f7g!e(L?$gAx%5sC0?Wwrh99Bhr9+BYME;6S=cb95I`+@6CG@t5w62Ukh* zwA4*^i9A{(GtBJvZ0d07$h(|6^ykqgEuBh2o!R}ClAfl_`IPw#M!HY>%Ew(e{}Zcl zSG7a+LiIoBhN44(5B3p|XDRA~w)dIa(HL=)Td&KL*R+M?_>dGjBfR%L2}s_Ac6GcL z(!26i++5jQK3*+XvBc-c*tFjA@e#@C#^oQ>%T*w$0)L0X5Q8^jDjVh2ATAS9z^(>AG<7Q8F*ReS^wOo~9;@LxwdRoA}QAX=PMHnV$1C-*9RYCcwB zJqUKw*V(VB+wkHd8029!DFt0~Z;S9CdoY{Q3LaR>7Ui>0@4&;UBAT!yfy*(iK8Sf0(LJ?Km~= zc&KkfO60Ps(()Jmmu-3x(XL=_*L(FryBD2MaWn78JNJiZOPq$W>c?zjRh$p%qjEEK zg5U`Y;svVdD+rDaNtTT#2L_WCjHMMsU2fP%3Q22jWa3KU?9B04xDEtqU7audc7gGHH1A(2Qt z+t&|tv9$i2E_gCU?Smi|2mt%{@5k)lfMK%t0){3gCct_ufW;aJ7zUgJ42Z-tU~sfP z75P%flFFg5X)K7wWFUogNn|D$GDV?;LSKKM<_XdKz9}&{pW6~N2nZv9A!a@BwYDG? zFGN8XDu)@!6_$5r&>%BI`~rC?{7vmsmIaf}VpBOBLE6`p#n@6l@tcg9G4`{@VsL4K z6PrdA7$Th4SAoUYQoiRu2`mObC*T30iHl5KSTUg+OYr|^HkC*FFJ=oP-rB?;fqx7vYHuNK!3<=wU0EawRp`c2XeoO^#`BvD)_AeZqQJjxiZA8s zPG@o1feZWGmjX}&se+Cnj=&Yezi&Zb3drG-{izh_%Q}48(+jJyg|rt~1ml74+5g&d z3f}myQ~%qm!y~c2UrYfTv|v+75R>i3WCofo7)}>HB9Vp|BaFcBrIi0^^`|xjM~0b{ zAoI)dV(PY4L{n@n&E58ikDjZr>vUGE^$8qK>F(Zli9rrW6-t0yR-o}mG2@dv z-^g@iIMOwk^5(c{AU!VomCP}hA>A!2meJ8G!f?b_Q=FuCWE)16-P_$U(kA1L<^74z z5;+wmCMA5=oL0M&H!B5*_TbDYa*^uIq$ZJ- zxDt`50Rr5s!_Oh0;WGLF>S5)jA*U7sJlQ-azdQv1n)vAxWc!hh>$RuuLT<+rLx5GU z!7+t5lXb%~SJAzAeas{!p><$5C326Kb#m#W1OhfY2z^1LhY)-7m(iFmSG`wx(7CsY zqTF^O>mu@2jMrI=_kPoNH}hR5W-4D$;4xIMV!7T&AJt2Pj?N&g*Vp;mN93|B`-bQ+d|4 nCC-LAi6Z)D#HzGC;qM3*ZAX#*9d%>E52&q`qhVery very basic demo, so developers can play with it while they're developin

Just click on text below to see Etch in action.

-
+
Text with a light blue background is editable. You will find it easy to use etch to underline text as well as bold and italic. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
From 8966dc5e4096fa00999407b52647cea062df0ae2 Mon Sep 17 00:00:00 2001 From: Pierre Leresteux Date: Sun, 29 Jul 2012 17:21:41 +0200 Subject: [PATCH 2/3] Add font-size with compact menu --- scripts/etch.js | 22 ++++++++++++++++++++-- styles/etch.css | 29 ++++++++++++++++++++++++++++- 2 files changed, 48 insertions(+), 3 deletions(-) diff --git a/scripts/etch.js b/scripts/etch.js index 58eeb59..6ea5496 100644 --- a/scripts/etch.js +++ b/scripts/etch.js @@ -17,7 +17,7 @@ // in the markup as "data-button-class" buttonClasses: { 'default': ['save'], - 'compact': [['format', 'bold','italic','underline'],['list','unordered-list', 'ordered-list'], ['justify','justify-left','justify-center','justify-right'],'link','save'], + 'compact': [['format', 'bold','italic','underline'],['list','unordered-list', 'ordered-list'], ['justify','justify-left','justify-center','justify-right'],['font-size','size xs', 'size s', 'size m', 'size l', 'size xl'],'link','save'], 'all': ['bold', 'italic', 'underline', 'unordered-list', 'ordered-list', 'link', 'clear-formatting', 'save'], 'title': ['bold', 'italic', 'underline', 'save'] } @@ -54,7 +54,8 @@ 'click .etch-save': 'save', 'click .etch-clear-formatting': 'clearFormatting', 'click .etch-editor-buttonEntry': 'entryMenu', - 'click .etch-editor-entry': 'closeAllEntryMenu' + 'click .etch-editor-entry': 'closeAllEntryMenu', + 'click .etch-size': 'changeFontSize' }, changeEditable: function() { @@ -225,6 +226,23 @@ document.execCommand('justifyRight', false, null); }, + changeFontSize : function(e) { + e.preventDefault(); + var size = 0; + var $target = $(e.target || e.srcElement).parent(); + if ($target.hasClass('xs')){ + size = 1; + } else if ($target.hasClass('s')){ + size = 2; + } else if ($target.hasClass('m')){ + size = 3; + } else if ($target.hasClass('l')){ + size = 4; + } else if ($target.hasClass('xl')){ + size = 5; + } + document.execCommand('fontSize', false, size); + }, getImage: function(e) { e.preventDefault(); diff --git a/styles/etch.css b/styles/etch.css index 1e9bd2d..f07202c 100644 --- a/styles/etch.css +++ b/styles/etch.css @@ -43,4 +43,31 @@ .etch-editor-panel .etch-clear-formatting span { background-position: -390px 0; } .etch-editor-panel .etch-justify span { background-position: 0 0; } .etch-editor-panel .etch-format span { background-position: -30px 0; } -.etch-editor-panel .etch-list span { background-position: -60px 0; } \ No newline at end of file +.etch-editor-panel .etch-list span { background-position: -60px 0; } +.etch-editor-panel .etch-size span { + background-position: 30px 0; +} +.xs span { + content: "XS"; +} +font[size="1"] { + font-size: 6px; +} +font[size="2"] { + font-size: 10px; +} +font[size="3"] { + font-size: 13px; +} +font[size="4"] { + font-size: 18px; +} +font[size="5"] { + font-size: 24px; +} +font[size="6"] { + font-size: 42px; +} +font[size="7"] { + font-size: 64px; +} \ No newline at end of file From 8b33fea1b628d72be50ed2840124ccbaed0c31da Mon Sep 17 00:00:00 2001 From: Pierre Leresteux Date: Sun, 29 Jul 2012 23:21:01 +0200 Subject: [PATCH 3/3] Add font_size_icon --- styles/etch.css | 18 ++++++++++-------- styles/images/font_size_icons.png | Bin 0 -> 3906 bytes 2 files changed, 10 insertions(+), 8 deletions(-) create mode 100644 styles/images/font_size_icons.png diff --git a/styles/etch.css b/styles/etch.css index f07202c..4de8fff 100644 --- a/styles/etch.css +++ b/styles/etch.css @@ -12,8 +12,8 @@ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fFfFfF), to(#f1f1f1)); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } -.etch-editor-entry { display: none;position: absolute; - } +.etch-editor-entry { display: none;position: absolute;} +.etch-editor-input { display: none;position: absolute;} .etch-editor-button:last-child { margin-right: 0; } .etch-editor-button:hover { background: #fff; border-color: #999; } .etch-editor-button span:active { box-shadow: inset 0 0 15px rgba(0,0,0,.5); border-color: #999; } @@ -27,6 +27,9 @@ display: block; height: 100%; width: 100%; } +.etch-font-size span, .etch-size span{ background: url('images/font_size_icons.png') no-repeat; +} + .etch-editor-panel .etch-bold span { background-position: 0 0; } .etch-editor-panel .etch-italic span { background-position: -30px 0; } .etch-editor-panel .etch-underline span { background-position: -60px 0; } @@ -44,12 +47,11 @@ .etch-editor-panel .etch-justify span { background-position: 0 0; } .etch-editor-panel .etch-format span { background-position: -30px 0; } .etch-editor-panel .etch-list span { background-position: -60px 0; } -.etch-editor-panel .etch-size span { - background-position: 30px 0; -} -.xs span { - content: "XS"; -} +.xs span {background-position: -30px 0; } +.s span {background-position: -60px 0; } +.m span {background-position: -90px 0; } +.l span {background-position: -120px 0; } +.xl span {background-position: -150px 0; } font[size="1"] { font-size: 6px; } diff --git a/styles/images/font_size_icons.png b/styles/images/font_size_icons.png new file mode 100644 index 0000000000000000000000000000000000000000..42863990a504896b5aaba42404c437face83fa23 GIT binary patch literal 3906 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 literal 0 HcmV?d00001