diff --git a/scripts/etch.js b/scripts/etch.js index a0402e9..6ea5496 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'],['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'] } @@ -51,14 +52,31 @@ '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', + 'click .etch-size': 'changeFontSize' }, 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 +89,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'); @@ -187,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 3efe7ce..4de8fff 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-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; } @@ -22,6 +23,13 @@ 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-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; } @@ -36,4 +44,32 @@ .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; } +.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; +} +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 diff --git a/styles/images/entry_icons.png b/styles/images/entry_icons.png new file mode 100644 index 0000000..43b4370 Binary files /dev/null and b/styles/images/entry_icons.png differ diff --git a/styles/images/font_size_icons.png b/styles/images/font_size_icons.png new file mode 100644 index 0000000..4286399 Binary files /dev/null and b/styles/images/font_size_icons.png differ diff --git a/tryit.html b/tryit.html index dc7aa90..cc03417 100644 --- a/tryit.html +++ b/tryit.html @@ -10,7 +10,7 @@

Very 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.