diff --git a/codex-editor.js b/codex-editor.js index 25ad6ae5..8ea60238 100644 --- a/codex-editor.js +++ b/codex-editor.js @@ -12,7 +12,8 @@ var cEditor = (function (cEditor) { textareaId : 'codex-editor', // First-level tags viewing as separated blocks. Other'll be inserted as child - blockTags : ['P','BLOCKQUOTE','UL','CODE','OL','H1','H2','H3','H4','H5','H6'] + blockTags : ['P','BLOCKQUOTE','UL','CODE','OL','H1','H2','H3','H4','H5','H6'], + uploadImagesUrl : '/upload/save.php', }; // Static nodes @@ -49,6 +50,7 @@ var cEditor = (function (cEditor) { .then(this.ui.make) .then(this.ui.addTools) .then(this.ui.bindEvents) + .then(this.transport.prepare) // .then(this.parser.parseTextareaContent) .then(this.renderer.makeBlocksFromData) .catch(function (error) { @@ -1562,6 +1564,95 @@ cEditor.toolbar = { }; +/** +* File transport module +*/ +cEditor.transport = { + + input : null, + + prepare : function(){ + + var input = document.createElement('INPUT'); + + input.type = 'file'; + input.addEventListener('change', cEditor.transport.fileSelected); + + cEditor.transport.input = input; + + }, + + /** + * Callback for file selection + */ + fileSelected : function(event){ + + var input = this, + files = input.files, + filesLength = files.length, + formdData = new FormData(), + file, + i; + + for (i = 0; i < filesLength; i++) { + + file = files[i]; + + /** + * Uncomment if need file type checking + * if (!file.type.match('image.*')) { + * continue; + * } + */ + + formdData.append('files[]', file, file.name); + } + + cEditor.transport.ajax({ + data : formdData + }); + + console.log("files: %o", files); + + }, + + /** + * @todo use callback for success and error + */ + selectAndUpload : function (callback) { + + this.input.click(); + + }, + + /** + * Ajax requests module + */ + ajax : function(params){ + + var xhr = new XMLHttpRequest(), + success = typeof params.success == 'function' ? params.success : function(){}, + error = typeof params.error == 'function' ? params.error : function(){}; + + xhr.open('POST', cEditor.settings.uploadImagesUrl, true); + + xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); + + xhr.onload = function () { + if (xhr.status === 200) { + console.log("success request: %o", xhr); + success(xhr.responseText); + } else { + console.log("request error: %o", xhr); + } + }; + + xhr.send(params.data); + + } + +}; + /** * Content parsing module diff --git a/plugins/images/plugin.css b/plugins/images/plugin.css index add050a5..795aca83 100644 --- a/plugins/images/plugin.css +++ b/plugins/images/plugin.css @@ -5,18 +5,43 @@ * @version 0.0.1 */ .ce-plugin-image__holder{ + position: relative; background: #FEFEFE; border: 2px dashed #E8EBF5; border-radius: 55px; margin: 30px 0; - padding: 30px 40px; - white-space: nowrap; - color: #A5ABBC; - font-size: 1.2em; + padding: 30px 110px 30px 40px; } + .ce-plugin-image__holder input{ + border: 0; + background: transparent; + outline: none; + -webkit-appearance: none; + font-size: 1.2em; + color: #A5ABBC; + } + /* Placeholder color for Chrome */ + .ce-plugin-image__holder input::-webkit-input-placeholder { + color: #A5ABBC; + } + /* Placeholder color for IE 10+ */ + .ce-plugin-image__holder input:-ms-input-placeholder { + color: #A5ABBC; + } + /* Placeholder color for Firefox 19+ */ + .ce-plugin-image__holder input::-moz-placeholder { + color: #A5ABBC; + opacity: 1; + } .ce-plugin-image__button{ - float: right; + position: absolute; + z-index: 2; + right: 40px; + cursor: pointer; font-family: "codex_editor"; font-size: 1.5em; color: #8990AA; -} \ No newline at end of file +} + .ce-plugin-image__button:hover{ + color: #393F52; + } \ No newline at end of file diff --git a/plugins/images/plugin.js b/plugins/images/plugin.js index a735eaa9..b18caf04 100644 --- a/plugins/images/plugin.js +++ b/plugins/images/plugin.js @@ -9,12 +9,15 @@ var ceImage = { make : function ( data ) { var holder = ceImage.ui.holder(), - uploadButton = ceImage.ui.uploadButton(); + uploadButton = ceImage.ui.uploadButton(), + input = ceImage.ui.input(); + + input.placeholder = 'Past image URL or file'; - holder.textContent = 'Past image URL or file'; holder.appendChild(uploadButton); + holder.appendChild(input); - holder.contentEditable = true; + uploadButton.addEventListener('click', ceImage.uploadButtonClicked, false ); return holder; @@ -26,11 +29,16 @@ var ceImage = { }, - /** */ save : function ( block ){ }, + uploadButtonClicked : function(event){ + + cEditor.transport.selectAndUpload(); + + }, + ui : { holder : function(){ @@ -43,6 +51,14 @@ var ceImage = { }, + input : function(){ + + var input = document.createElement('INPUT'); + + return input; + + }, + uploadButton : function(){ var button = document.createElement('SPAN');