editor settings, new paragrath and new line, one instance add buttons

.gitignore

@@ -0,0 +1,6 @@
+# --- proj files ---
+.DS_Store
+Thumbs.db
+/.idea/
+/*.sublime-project
+/*.sublime-workspace

ce_interface.js

@@ -3,67 +3,75 @@
 * @author Savchenko Peter (vk.com/specc)
 */
 
-var ce = function(textareaId) {
+var ce = function(settings) {
 
-    this.resultTextarea = document.getElementById(textareaId);
+    this.resultTextarea = document.getElementById("codex_editor");
 
     if (typeof this.resultTextarea == undefined || this.resultTextarea == null ){
-
-        console.warn('Textarea not found with ID %o', textareaId);
+        console.warn('Textarea not found with ID %o', this.textareaId);
         return this;
+    }
 
+    /* Prepare settings */
+    if ("undefined" == typeof settings) settings = this.defaultSettings;
+    else {
+        // todo just merge settings with defaults
     }
 
-    this.toolbarOpened = false;
-    this.tools = ['header', 'picture', 'list', 'quote', 'code', 'twitter', 'instagram', 'smile'];
+    settings.tools = settings.tools || this.allTools;
+    this.settings  = settings;
 
-    /** Some configurations */
-    this.BUTTONS_TOGGLED_CLASSNANE = 'buttons_toggled';
-    this.key = { TAB: 9, ENTER: 13, BACKSPACE: 8, DELETE: 46, DOWN: 40, SPACE: 32, ESC: 27, CTRL: 17, META: 91, SHIFT: 16, ALT: 18 };
 
     /** Making a wrapper and interface */
     this.makeInterface();
 
     /** Bind all events */
     this.bindEvents();
 
-}
+};
+
+// All posible tools
+ce.prototype.allTools = ['header', 'picture', 'list', 'quote', 'code', 'twitter', 'instagram', 'smile'];
+
+// Default settings configuration
+ce.prototype.defaultSettings = {
+
+};
+
+// Add this class when open tool bar for css animation
+ce.prototype.BUTTONS_TOGGLED_CLASSNANE = 'buttons_toggled';
+
+// Default tool bar is closed
+ce.prototype.toolbarOpened = false;
+
+// Key event constants
+ce.prototype.key = { TAB: 9, ENTER: 13, BACKSPACE: 8, DELETE: 46, DOWN: 40, SPACE: 32, ESC: 27, CTRL: 17, META: 91, SHIFT: 16, ALT: 18 };
 
 /**
-* Editor interface drawing
-* @use this.tools to get necessary items
-* @todo get tools from user inital-settings
+ * Editor interface drawing
+ * calls one time in editor constructor
 */
 ce.prototype.makeInterface = function () {
 
     var wrapper   = this.make.editorWrapper(),
-        firstNode = this.make.node(null, 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro quia nihil repellendus aut cupiditate reprehenderit sapiente magnam nobis doloremque eaque! Sint nobis assumenda nisi ducimus minima illo tenetur, cumque facilis.' ),
-        toolbar   = this.make.toolbar(),
-        button;
+        firstNode = this.make.textNode('Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro quia nihil repellendus aut cupiditate reprehenderit sapiente magnam nobis doloremque eaque! Sint nobis assumenda nisi ducimus minima illo tenetur, cumque facilis.' ),
+        toolbar   = this.make.toolbar();
 
-    for (var i = 0; i < this.tools.length; i++) {
-        button = this.make.toolbarButton(this.tools[i]);
-        toolbar.appendChild(button);
-    };
+    this.wrapper = wrapper;
+    this.toolbar = toolbar;
 
-    /**
-    * Add toolbar to node
-    * @todo make toolbar rendering once
-    */
-    firstNode.appendChild(toolbar);
+    this.toolbarButtons = this.make.toolbarButtons(this.allTools, this.settings.tools);
 
-    /** Add first node */
+    /** Add first node  and tool bar*/
     wrapper.appendChild(firstNode);
+    wrapper.appendChild(toolbar);
 
     /** Insert Editor after initial textarea. Hide textarea */
     this.resultTextarea.parentNode.insertBefore(wrapper, this.resultTextarea.nextSibling);
     this.resultTextarea.hidden = true;
 
-    /** Set auto focus */
-    var contentEditable = firstNode.getElementsByClassName('ce_node_content');
-    contentEditable.length && contentEditable[0].focus();
-
-}
+    this.focusNode(firstNode);
+};
 
 /**
 * All events binds in one place
@@ -77,7 +85,18 @@ ce.prototype.bindEvents = function () {
         _this.globalKeydownCallback(event);
     }, false );
 
-}
+};
+
+/**
+ * Sets focus to node conteneditable child
+ * todo depending on node type
+*/
+ce.prototype.focusNode = function (node) {
+
+    var contentEditable = node.getElementsByClassName('ce_node_content');
+    contentEditable.length && contentEditable[0].focus();
+
+};
 
 /**
 * All window keydowns handles here
@@ -89,40 +108,69 @@ ce.prototype.globalKeydownCallback = function (event) {
         case this.key.ENTER : this.enterKeyPressed(event); break; // Enter
     }
 
-}
+};
 
 /**
-* @todo: check if currently focused in contenteditable element
+*
 */
 ce.prototype.tabKeyPressed = function(event) {
 
-    var toolbar = document.getElementsByClassName('add_buttons');
+    // check if currently focused in contenteditable element
+    if ("BODY" == event.target.tagName) return;
 
-    if ( !toolbar[0].className.includes(this.BUTTONS_TOGGLED_CLASSNANE) ){
-        toolbar[0].className += ' ' + this.BUTTONS_TOGGLED_CLASSNANE;
-        this.toolbarOpened = true;
-    } else {
-        toolbar[0].className = toolbar[0].className.replace(this.BUTTONS_TOGGLED_CLASSNANE, '');
-        this.toolbarOpened = false
-    }
+    var toolbar = event.target.parentNode.nextSibling,
+        _this = this;
+
+    toolbar.appendChild(this.toolbarButtons);
+
+    // repair buttons animation - just add css class async
+    setTimeout(function () {
+
+        if ( !toolbar.className.includes(_this.BUTTONS_TOGGLED_CLASSNANE) ){
+            toolbar.className += ' ' + _this.BUTTONS_TOGGLED_CLASSNANE;
+            _this.toolbarOpened = true;
+        } else {
+            toolbar.className = toolbar.className.replace(_this.BUTTONS_TOGGLED_CLASSNANE, '');
+            _this.toolbarOpened = false
+        }
+
+    });
 
     event.preventDefault();
 
-}
+};
 
 /**
 * Handle Enter key. Adds new Node;
 */
 ce.prototype.enterKeyPressed = function(event) {
 
-      console.log('ENTER');
+    if (event.shiftKey){
+        document.execCommand('insertHTML', false, '<br><br>');
+    } else {
+        var newNode = this.make.textNode(),
+            toolbar = this.make.toolbar();
+
+        /** Add node */
+        this.wrapper.insertBefore(newNode, event.target.parentNode.nextSibling);
+
+        /** Add toolbar to node */
+        this.wrapper.insertBefore(toolbar, newNode);
 
-}
+        /** Set auto focus */
+        var contentEditable = newNode.getElementsByClassName('ce_node_content');
+        contentEditable.length && contentEditable[0].focus();
+    }
+
+    event.preventDefault();
+};
 
 /**
 * Creates HTML elements
 */
-ce.prototype.make = function (window) {
+ce.prototype.make = function () {
+
+    var _this = this;
 
     /** Empty toolbar with toggler */
     function toolbar () {
@@ -133,12 +181,13 @@ ce.prototype.make = function (window) {
 
         /** Toggler button*/
         bar.innerHTML = '<span class="toggler">' +
-                            '<i class="ce_icon-plus-circled-1"></i>'+
+                            '<i class="plus_btn ce_icon-plus-circled-1"></i>'+
                         '</span>';
         return bar;
 
     }
 
+    // Creates one button with given type
     function toolbarButton (type) {
 
         var button = document.createElement('button');
@@ -147,13 +196,33 @@ ce.prototype.make = function (window) {
         button.innerHTML    = '<i class="ce_icon-' + type + '"></i>';
 
         return button;
+
+    }
+
+    // Creates all tool bar buttons from editor settings
+    // allTools, usedTools - needs becose cant get them from editor object - bad context
+    function toolbarButtons (allTools, usedTools) {
+
+        var toolbarButtons = document.createElement("span");
+
+        toolbarButtons.classList.add("buttons");
+
+        // Walk base buttons list - save buttons origin sorting
+        allTools.forEach(function(item) {
+
+            if (usedTools.indexOf(item) >= 0) toolbarButtons.appendChild( this.toolbarButton(item) );
+
+        }, this);
+
+        return toolbarButtons;
+
     }
 
     /**
     * Paragraph node
     * @todo set unique id with prefix
     */
-    function node (id, content){
+    function textNode (content){
 
         var node = document.createElement('div');
 
@@ -173,15 +242,16 @@ ce.prototype.make = function (window) {
     }
 
     var ceMake = function () {
-        this.toolbar       = toolbar;
-        this.toolbarButton = toolbarButton;
-        this.node          = node;
-        this.editorWrapper = editorWrapper;
-    }
+        this.toolbar        = toolbar;
+        this.toolbarButtons = toolbarButtons;
+        this.toolbarButton  = toolbarButton;
+        this.textNode       = textNode;
+        this.editorWrapper  = editorWrapper;
+    };
 
     return new ceMake();
 
-}(this)
+}();