editore - npm Package Compare versions

Comparing version 1.2.0 to 1.2.1

bower.json

 {
   "name": "editore",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "main": "src/editore.js",
@@ -5,0 +5,0 @@ "ignore": [],

package.json

 {
   "name": "editore",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "author": "Evandro Eisinger <[e-mail]>",
@@ -5,0 +5,0 @@ "license": "MIT",

README.md

 # editore.js [![Build Status](https://travis-ci.org/evandroeisinger/editore.js.svg?branch=master)](https://travis-ci.org/evandroeisinger/editore.js) [![npm version](https://badge.fury.io/js/editore.svg)](http://badge.fury.io/js/editore) [![Bower version](https://badge.fury.io/bo/editore.svg)](http://badge.fury.io/bo/editore)
 
-> It's a magnific javascript editor! It's easy to create and valitade fields and get data from them, even better is that you don't need to handle contenteditable yourself :8ball: 
+> A magnific javascript editor! It's easy to create and valitade fields and get data from them, even better is that you don't need to handle contenteditable yourself :8ball: 
 
+#### install
+Available on npm and bower:
+`npm install editore`, `bower install editore` or [directly download](https://github.com/evandroeisinger/editore.js/raw/master/src/editore.js)
+
 #### basic usage
-It's easy to use! Load editor.js into your application, create the editor wrapper element, set some fields and instantiate a new editor to use it.
+It's easy to use! Load editor.js into your application, create the editor wrapper element, set some fields and instantiate a new Editore to use it.
 
-Let's load editor.js:
 ```html
-<script src="editor.js"></script>
-```
-
-Enable pseudo fields placeholder:
-```css
-.placeholder::after { 
-  content: attr(data-placeholder);
-  position: absolute;
-  top: 0;
-}
-```
-
-Create editor wrapper element and some fields:
-```html
+<!-- Create editor wrapper element and some fields: -->
 <form id="editor">
-  <h1 data-field="title" data-placeholder="Title" data-require="true" data-length="60"></h1>
-  <article data-field="article" data-placeholder="Article" data-type="rich" data-require="true"></article>
+  <h1 data-field="title" data-placeholder="Title" data-require="true" data-length="60">Example title</h1>
+  <article data-field="articleBody" data-placeholder="Write here..." data-type="rich" data-require="true">
+    <p>Article body example.</p>
+  </article>
 </form>
 ```
 
-Instantiate a new editor passing its wrapper element:
 ```javascript
-var editor = new Editor(document.getElementById('editor'));
-```
+// Instantiate a new Editore passing its wrapper element:
+var editore = new Editore(document.getElementById('editor'));
 
-Subscribe for editor input events:
-```javascript
-editor.subscribe('input', function(field) {
-  console.log('Current editing field:', field);
-});
-```
+//Get values from fields:
+var values = editore.values();
 
-To register insert plugin into its components collection:
-```javascript
-editor.register('insert', SampleActionPlugin);
+// show values
+console.log(values);
+// {
+//   title: {
+//     name: 'title',
+//     length: 13,
+//     value: 'Example title',
+//     valid: false
+//   },
+//   articleBody: {
+//     name: 'articleBody',
+//     length: 21,
+//     value: '<p>Article body example.</p>',
+//     valid: true
+//   }
+// }
 ```
-
-To tegister edition plugin into its components collection:
-```javascript
-editor.register('edition', SampleEditionPlugin);
-```
-
-If you need to remove editor elements and listeners:
-```javascript
-editor.destroy();
-```
 ---
-#### API
-##### constructor
+### constructor
 ```javascript
@@ -63,17 +52,63 @@ new Editor(element);
 ###### parameters
-- *element*: is the element from where the editor should get its child elements to transform in fields according with their data-attributes. *Child elements that don't have the required data-attributes will not be converted into editor fields.*
+  - **element**: is the element from where the editor should get its child elements to transform in fields according with their data-attributes. *Child elements that don't have the required data-attributes will not be converted into editor fields.*
 
-##### field
+### field element
 ```html
   <h1 data-field="title" data-placeholder="Title" data-require="true" data-length="60"></h1>
 ```
-###### data-attributes
-- *data-field*:
-- *data-placeholder*:
-- *data-required* (optional):
-- *data-type* (optional):
-- *data-length* (optional):
+###### data attributes
+  - **data-field**=*"String"*
+  - **data-placeholder**=*"String"*
+  - **data-required**=*"Boolean" (optional)*: toggle class: required
+  - **data-length**=*"Number" (optional)*: toggle class: invalid
+  - **data-type**=*"String" (optional)*
+    - **simple** *(default)*: It's a single-line field, without any text manipulation
+    - **rich**: It's a multi-line field, with text manipulation support
 
+### methods
+###### editore.values()
+  - return a object with all fields values.
+```
+{
+  fieldName: {
+    name: String,
+    length: Number,
+    value: String,
+    valid: Boolean
+  }
+}
+```
+
+###### editore.fields()
+  - return a object with all fields internal attributes.
+```
+{
+  fieldName: {
+    element: DOMElement,
+    maxLength: Number,
+    name: String,
+    placeholder: String,
+    required: Boolean,
+    type: String
+  }
+}
+```
+
+###### editore.destroy()
+  - unset editable and remove all fields listeners.
+
+###### editore.subscribeInput( *eventType, callback* )
+  - parameters
+    - **callback**=*"Function[currentField]"*
+
+###### editore.registerEditionComponent( *pluginConstructor* )
+  - parameters  
+    - **pluginConstructor**=*"Plugin Constructor"*
+
+###### editore.registerInsertComponent( *pluginConstructor* )
+  - parameters  
+    - **pluginConstructor**=*"Plugin Constructor"*
+
 ---
-#### support
+## support
 - chrome:
@@ -84,5 +119,4 @@ - firefox:
 
-
 ---
-#### contribute
+## contribute
 Everyone can contribute! Finding bugs, creating issues, improving editor it self or creating components.
@@ -89,0 +123,0 @@ Every contribution will be welcomed! :santa:

src/editore.js

@@ -24,4 +24,5 @@ (function (global, editore) {
     // editor events
-    self.eventTypes = {};
-    self.eventTypes.INPUT = [];
+    self.eventTypes = {
+      'INPUT': []
+    };
 
@@ -109,7 +110,8 @@ // editor components
 
-    // register plugins
-    function register(component, Plugin) {
-      if (!self.components[component] || !Plugin)
-        return new Error('invalid component type or plugin');
-      Plugin.prototype.component = self.components[component];
+    // register edition plugins
+    function registerEditionComponent(Plugin) {
+      if (!Plugin)
+        return new Error('invalid plugin');
+      
+      Plugin.prototype.component = self.components.edition;
       // instance a new plugin
@@ -120,6 +122,21 @@ var plugin = new Plugin();
       // add plugin into his component
-      self.components[component].plugins[plugin.name] = plugin;
-      self.components[component].element.appendChild(plugin.button);
+      self.components.edition.plugins[plugin.name] = plugin;
+      self.components.edition.element.appendChild(plugin.button);
     }
 
+    // register edition plugins
+    function registerInsertComponent(Plugin) {
+      if (!Plugin)
+        return new Error('invalid plugin');
+
+      Plugin.prototype.component = self.components.insert;
+      // instance a new plugin
+      var plugin = new Plugin();
+      // set plugin name into button class
+      plugin.button.classList.add(plugin.name);
+      // add plugin into his component
+      self.components.insert.plugins[plugin.name] = plugin;
+      self.components.insert.element.appendChild(plugin.button);
+    }
+
     // destroy editor listeners
@@ -158,7 +175,5 @@ function destroy() {
 
-    // register callbacks to editor events
-    function subscribe(type, callback) {
-      if (!self.eventTypes[type.toUpperCase()])
-        return new Error('cant subscribe to a invalid event!');
-      self.eventTypes[type.toUpperCase()].push(callback);
+    // register callbacks to editor input event
+    function subscribeInput(callback) {
+      self.eventTypes['INPUT'].push(callback);
     }
@@ -247,5 +262,6 @@
       values: values,
-      register: register,
       destroy: destroy,
-      subscribe: subscribe
+      subscribeInput: subscribeInput,
+      registerInsertComponent: registerInsertComponent,
+      registerEditionComponent: registerEditionComponent
     };
@@ -252,0 +268,0 @@ }

test/editore.js

@@ -26,4 +26,5 @@ describe('editore.js', function() {
     expect(editore.destroy).toBeDefined();
-    expect(editore.register).toBeDefined();
-    expect(editore.subscribe).toBeDefined();
+    expect(editore.registerInsertComponent).toBeDefined();
+    expect(editore.registerEditionComponent).toBeDefined();
+    expect(editore.subscribeInput).toBeDefined();
   });
@@ -30,0 +31,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

40535

increased by4.1%

Lines of code

859

increased by1.66%

Number of lines in readme file

124

increased by37.78%

No dependency changes