diff --git a/codex-editor.js b/codex-editor.js index 9414bd46..a7b4fc37 100644 --- a/codex-editor.js +++ b/codex-editor.js @@ -20,6 +20,8 @@ var cEditor = (function (cEditor) { textarea : null, wrapper : null, toolbar : null, + show_settings_button : null, + block_settings : null, toolbarButtons : {}, // { type : DomEl, ... } redactor : null, } @@ -160,8 +162,9 @@ cEditor.ui = { var wrapper, toolbar, - tool, - redactor; + redactor, + block_settings, + show_settings_button; /** Make editor wrapper */ wrapper = cEditor.draw.wrapper(); @@ -171,8 +174,13 @@ cEditor.ui = { /** Make toolbar and content-editable redactor */ - toolbar = cEditor.draw.toolbar(); - redactor = cEditor.draw.redactor(); + toolbar = cEditor.draw.toolbar(); + show_settings_button = cEditor.draw.show_settings_button(); + block_settings = cEditor.draw.block_settings(); + redactor = cEditor.draw.redactor(); + + toolbar.appendChild(show_settings_button); + toolbar.appendChild(block_settings); wrapper.appendChild(toolbar); wrapper.appendChild(redactor); @@ -180,6 +188,8 @@ cEditor.ui = { /** Save created ui-elements to static nodes state */ cEditor.nodes.wrapper = wrapper; cEditor.nodes.toolbar = toolbar; + cEditor.nodes.block_settings = block_settings; + cEditor.nodes.show_settings_button = show_settings_button; cEditor.nodes.redactor = redactor; @@ -239,6 +249,13 @@ cEditor.ui = { }, false ); + /** Mouse click to radactor */ + cEditor.nodes.show_settings_button.addEventListener('click', function (event) { + + cEditor.callback.showSettingsButtonClicked(event); + + }, false ); + /** * @deprecated; * Any redactor changes: keyboard input, mouse cut/paste, drag-n-drop text @@ -353,6 +370,7 @@ cEditor.callback = { cEditor.toolbar.move(); cEditor.toolbar.open(); + cEditor.toolbar.settings.close(); }, @@ -549,7 +567,7 @@ cEditor.callback = { && parentOfFocusedNode.childNodes.length == cEditor.caret.focusedNodeIndex + 1) { /** Prevent
creation */ - event.preventDefault(); + // event.preventDefault(); /** Create new Block and append it after current */ var newBlock = cEditor.draw.block('p'); @@ -581,6 +599,15 @@ cEditor.callback = { event.preventDefault(); + }, + + /** + * Clicks on block settings button + */ + showSettingsButtonClicked : function(){ + + cEditor.toolbar.settings.toggle(); + } }; @@ -1070,8 +1097,46 @@ cEditor.toolbar = { }, + /** + * Block settings methods + */ + settings : { + + opened : false, + + open : function(){ + + cEditor.nodes.block_settings.classList.add('opened'); + this.opened = true; + + }, + + close : function(){ + + cEditor.nodes.block_settings.classList.remove('opened'); + this.opened = false; + + }, + + toggle : function(){ + + if ( !this.opened ){ + + this.open(); + + } else { + + this.close(); + + } + + }, + + } + }; + /** * Content parsing module */ @@ -1266,7 +1331,7 @@ cEditor.tools = { paragraph : { type : 'paragraph', - iconClassname : 'ce_icon-smile', + iconClassname : 'ce-icon-paragraph', append : document.createElement('P'), appendCallback : function () { console.log('paragraph added'); @@ -1278,7 +1343,7 @@ cEditor.tools = { header : { type : 'header', - iconClassname : 'ce_icon-header', + iconClassname : 'ce-icon-header', append : document.createElement('H2'), appendCallback : function () { console.log('header added'); @@ -1290,7 +1355,7 @@ cEditor.tools = { quote : { type : 'quote', - iconClassname : 'ce_icon-quote', + iconClassname : 'ce-icon-quote', append : document.createElement('BLOCKQUOTE'), appendCallback : function () { console.log('quote added'); @@ -1302,7 +1367,7 @@ cEditor.tools = { code : { type : 'code', - iconClassname : 'ce_icon-code', + iconClassname : 'ce-icon-code', append : document.createElement('CODE'), appendCallback : function () { console.log('code added'); @@ -1314,7 +1379,7 @@ cEditor.tools = { list : { type : 'code', - iconClassname : 'ce_icon-list', + iconClassname : 'ce-icon-list-bullet', append : document.createElement('LI'), appendCallback : function () { console.log('code added'); @@ -1392,13 +1457,37 @@ cEditor.draw = { bar.className += 'ce_toolbar'; - /** Toggler button*/ - bar.innerHTML = '' + - ''+ - ''; return bar; }, + /** + * Empty toolbar with toggler + */ + block_settings : function () { + + var settings = document.createElement('div'); + + settings.className += 'ce_block_settings'; + settings.innerHTML = 'Настройки блока'; + + return settings; + }, + + /** + * Empty toolbar with toggler + */ + show_settings_button : function () { + + var toggler = document.createElement('span'); + + toggler.className = 'toggler'; + + /** Toggler button*/ + toggler.innerHTML = ''; + + return toggler; + }, + /** * Toolbar button */ diff --git a/editor.css b/editor.css index 68c2bf7b..0b24b5da 100644 --- a/editor.css +++ b/editor.css @@ -1,14 +1,15 @@ @font-face { font-family: 'codex_editor'; - src: url('fonts/codex_editor/codex_editor.eot?52438661'); - src: url('fonts/codex_editor/codex_editor.eot?52438661#iefix') format('embedded-opentype'), - url('fonts/codex_editor/codex_editor.woff?52438661') format('woff'), - url('fonts/codex_editor/codex_editor.ttf?52438661') format('truetype'), - url('fonts/codex_editor/codex_editor.svg?52438661#codex_editor') format('svg'); + src: url('fonts/codex_editor/codex-editor.eot?20895205'); + src: url('fonts/codex_editor/codex-editor.eot?20895205#iefix') format('embedded-opentype'), + url('fonts/codex_editor/codex-editor.woff?20895205') format('woff'), + url('fonts/codex_editor/codex-editor.ttf?20895205') format('truetype'), + url('fonts/codex_editor/codex-editor.svg?20895205#codex_editor') format('svg'); font-weight: normal; font-style: normal; } -[class^="ce_icon-"]:before, [class*="ce_icon-"]:before { +[class^="ce-icon-"]:before, +[class*="ce-icon-"]:before { font-family: "codex_editor"; font-style: normal; font-weight: normal; @@ -31,41 +32,37 @@ -moz-osx-font-smoothing: grayscale; } -.ce_icon-instagram:before { content: '\e800'; } /* '' */ -.ce_icon-minus:before { content: '\e801'; } /* '' */ -.ce_icon-picture:before { content: '\e802'; } /* '' */ -.ce_icon-minus-circled:before { content: '\e803'; } /* '' */ -.ce_icon-cog:before { content: '\e804'; } /* '' */ -.ce_icon-link:before { content: '\e805'; } /* '' */ -.ce_icon-unlink:before { content: '\e806'; } /* '' */ -.ce_icon-code:before { content: '\e807'; } /* '' */ -.ce_icon-quote-right:before { content: '\e808'; } /* '' */ -.ce_icon-comment:before { content: '\e809'; } /* '' */ -.ce_icon-trash-empty:before { content: '\e80a'; } /* '' */ -.ce_icon-down-open:before { content: '\e80b'; } /* '' */ -.ce_icon-up-open:before { content: '\e80c'; } /* '' */ -.ce_icon-up-big:before { content: '\e80d'; } /* '' */ -.ce_icon-down-big:before { content: '\e80e'; } /* '' */ -.ce_icon-header:before { content: '\e80f'; } /* '' */ -.ce_icon-align-center:before { content: '\e810'; } /* '' */ -.ce_icon-align-left:before { content: '\e811'; } /* '' */ -.ce_icon-align-right:before { content: '\e812'; } /* '' */ -.ce_icon-list:before { content: '\e813'; } /* '' */ -.ce_icon-strike:before { content: '\e814'; } /* '' */ -.ce_icon-underline:before { content: '\e815'; } /* '' */ -.ce_icon-table:before { content: '\e816'; } /* '' */ -.ce_icon-columns:before { content: '\e817'; } /* '' */ -.ce_icon-bold:before { content: '\e818'; } /* '' */ -.ce_icon-italic:before { content: '\e819'; } /* '' */ -.ce_icon-smile:before { content: '\e81a'; } /* '' */ -.ce_icon-twitter:before { content: '\e81b'; } /* '' */ -.ce_icon-plus-1:before { content: '\e81c'; } /* '' */ -.ce_icon-plus-circled-1:before { content: '\e81d'; } /* '' */ -.ce_icon-quote:before { content: '\e81e'; } /* '' */ -.ce_icon-code-1:before { content: '\e81f'; } /* '' */ -.ce_icon-trash:before { content: '\e820'; } /* '' */ -.ce_icon-list-add:before { content: '\e821'; } /* '' */ -.ce_icon-list-1:before { content: '\e822'; } /* '' */ +.ce-icon-instagram:before { content: '\e800'; } /* '' */ +.ce-icon-picture:before { content: '\e801'; } /* '' */ +.ce-icon-cog:before { content: '\e802'; } /* '' */ +.ce-icon-link:before { content: '\e803'; } /* '' */ +.ce-icon-unlink:before { content: '\e804'; } /* '' */ +.ce-icon-code:before { content: '\e805'; } /* '' */ +.ce-icon-quote:before { content: '\e806'; } /* '' */ +.ce-icon-trash:before { content: '\e807'; } /* '' */ +.ce-icon-down-big:before { content: '\e808'; } /* '' */ +.ce-icon-up-big:before { content: '\e809'; } /* '' */ +.ce-icon-header:before { content: '\e80a'; } /* '' */ +.ce-icon-paragraph:before { content: '\e80b'; } /* '' */ +.ce-icon-align-left:before { content: '\e80c'; } /* '' */ +.ce-icon-align-center:before { content: '\e80d'; } /* '' */ +.ce-icon-align-right:before { content: '\e80e'; } /* '' */ +.ce-icon-font:before { content: '\e80f'; } /* '' */ +.ce-icon-bold:before { content: '\e810'; } /* '' */ +.ce-icon-medium:before { content: '\e811'; } /* '' */ +.ce-icon-italic:before { content: '\e812'; } /* '' */ +.ce-icon-list-bullet:before { content: '\e813'; } /* '' */ +.ce-icon-list-numbered:before { content: '\e814'; } /* '' */ +.ce-icon-strike:before { content: '\e815'; } /* '' */ +.ce-icon-underline:before { content: '\e816'; } /* '' */ +.ce-icon-table:before { content: '\e817'; } /* '' */ +.ce-icon-ellipsis-vert:before { content: '\e818'; } /* '' */ +.ce-icon-columns:before { content: '\e819'; } /* '' */ +.ce-icon-smile:before { content: '\e81a'; } /* '' */ +.ce-icon-newspaper:before { content: '\e81b'; } /* '' */ +.ce-icon-twitter:before { content: '\e81c'; } /* '' */ +.ce-icon-facebook-squared:before { content: '\e81d'; } /* '' */ +.ce-icon-vkontakte:before { content: '\e81e'; } /* '' */ @@ -86,9 +83,7 @@ position: absolute; z-index: 2; - margin-left: -45px; - - overflow: hidden; + margin-left: -1px; background: #fff; border: 1px solid #e3e7ee; @@ -107,7 +102,9 @@ .ce_toolbar .toggler{ - color: #3e6dd6 + color: #6485d0; + background: #f8f9fd; + cursor: pointer; } .ce_toolbar .toggler, .ce_toolbar li @@ -118,12 +115,42 @@ font-size: 14px; } .ce_toolbar .selected, + .ce_toolbar .toggler:hover, .ce_toolbar li:hover { background: #3e6dd6; color: #e2edff; } + .ce_toolbar .settings_btn{ + font-size: 1.1em; + } + + +/** Block settings panel */ + +.ce_block_settings{ + position: absolute; + z-index: 2; + margin-top: 15px; + margin-left: 4px; + padding: 25px; + + color: #2e394b; + + overflow: hidden; + + background: #fff; + border: 1px solid #e8e9f1; + border-radius: 2px; + box-shadow: 0 2px 11px rgba(27,39,54,.11); + + display: none; +} + .ce_block_settings.opened{ + display: block; + } + /** Typography styles */ @@ -141,12 +168,10 @@ margin: 5px 0; } .ce_redactor blockquote{ - font-size: 1.1em; + font-size: 1.3em; line-height: 1.9em; - margin: 2em 0; - padding: 2em 3.5em; - border-top: 2px solid #EAECF3; - border-bottom: 2px solid #EAECF3; + margin: 2.5em 200px !important; + padding: 2.5em 3.5em !important; } .ce_redactor code{ display: block; @@ -159,10 +184,14 @@ .ce_redactor .ce_block{ padding: 10px; - margin: 5px; + margin: -1px; border: 1px dotted #ccc; background: #fff; + outline: none; } + .ce_redactor .ce_block:focus{ + box-shadow: inset 0 0 0px 2px rgba(148, 158, 191, 0.05); + } @-webkit-keyframes bounceIn { diff --git a/fonts/codex_editor/codex-editor.eot b/fonts/codex_editor/codex-editor.eot new file mode 100755 index 00000000..723ad6ab Binary files /dev/null and b/fonts/codex_editor/codex-editor.eot differ diff --git a/fonts/codex_editor/codex_editor.svg b/fonts/codex_editor/codex-editor.svg old mode 100644 new mode 100755 similarity index 51% rename from fonts/codex_editor/codex_editor.svg rename to fonts/codex_editor/codex-editor.svg index 7e645a9b..1ae6cabc --- a/fonts/codex_editor/codex_editor.svg +++ b/fonts/codex_editor/codex-editor.svg @@ -1,46 +1,72 @@ -Copyright (C) 2015 by original authors @ fontello.com +Copyright (C) 2016 by original authors @ fontello.com - - + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/fonts/codex_editor/codex-editor.ttf b/fonts/codex_editor/codex-editor.ttf new file mode 100755 index 00000000..e6c70265 Binary files /dev/null and b/fonts/codex_editor/codex-editor.ttf differ diff --git a/fonts/codex_editor/codex-editor.woff b/fonts/codex_editor/codex-editor.woff new file mode 100755 index 00000000..5ad5eaa5 Binary files /dev/null and b/fonts/codex_editor/codex-editor.woff differ diff --git a/fonts/codex_editor/codex-editor.woff2 b/fonts/codex_editor/codex-editor.woff2 new file mode 100755 index 00000000..15066535 Binary files /dev/null and b/fonts/codex_editor/codex-editor.woff2 differ diff --git a/fonts/codex_editor/codex_editor.eot b/fonts/codex_editor/codex_editor.eot deleted file mode 100644 index cebfd37c..00000000 Binary files a/fonts/codex_editor/codex_editor.eot and /dev/null differ diff --git a/fonts/codex_editor/codex_editor.ttf b/fonts/codex_editor/codex_editor.ttf deleted file mode 100644 index ba26ec4f..00000000 Binary files a/fonts/codex_editor/codex_editor.ttf and /dev/null differ diff --git a/fonts/codex_editor/codex_editor.woff b/fonts/codex_editor/codex_editor.woff deleted file mode 100644 index 578b3e31..00000000 Binary files a/fonts/codex_editor/codex_editor.woff and /dev/null differ