Merge pull request #53 from Geet06/v.3

V.3

README.md

@@ -13,8 +13,7 @@
 3. [Integration](#integration)
    1. [With Aurelia CLI](#with-aurelia-cli)
    2. [With Webpack](#with-webpack)
-   3. [With Easy Webpack](#with-easy-webpack)
-   4. [With JSPM](#with-jspm)
+   3. [With JSPM](#with-jspm)
 4. [Usage](#usage)
 5. [License](#license)
 
@@ -58,9 +57,6 @@ npm install aurelia-froala-editor --save
 
 
 ```javascript
-// Editor files.
-import "froala-editor/js/froala_editor.pkgd.min";
-
 ...
 
 // Use the aurelia-froala-editor plugin.
@@ -117,16 +113,7 @@ aurelia.use.plugin('aurelia-froala-editor');
   "path": "../node_modules/font-awesome/css",
   "main": "font-awesome.css"
 },
-"jquery",
-{
-  "name": "froala-editor",
-  "path": "../node_modules/froala-editor",
-  "main": "js/froala_editor.min",
-  "resources": [
-    "./js/**/*.{js}",
-    "./css/**/*.{css}"
-  ]
-},
+
 {
   "name": "aurelia-froala-editor",
   "path": "../node_modules/aurelia-froala-editor/dist/amd",
@@ -136,7 +123,6 @@ aurelia.use.plugin('aurelia-froala-editor');
     "froala-editor.html"
   ],
   "deps": [
-    "jquery",
     "froala-editor",
     "font-awesome"
   ]
@@ -256,9 +242,20 @@ aurelia.use.plugin(PLATFORM.moduleName('aurelia-froala-editor'));
 
 ```js
 const { AureliaPlugin, ModuleDependenciesPlugin } = require('aurelia-webpack-plugin');
-
+  resolve: {
+    extensions: ['.js'],
+    modules:[srcDir,'../node_modules/froala-editor/js','node_modules'],
+     alias: {
+       "FroalaEditor": 'froala_editor.pkgd.min.js'
+     }
+  },
 plugins: [
   new AureliaPlugin(),
+   new ProvidePlugin({
+      FroalaEditor: 'froala_editor.pkgd.min.js',
+      'Promise': 'bluebird',
+      Popper: ['popper.js', 'default'] // Bootstrap 4 Dependency.
+    }),
   new ModuleDependenciesPlugin({
     "aurelia-froala-editor": [ './froala-editor' ],
     "parent-module": [ "child-module" ],
@@ -274,68 +271,6 @@ npm run start
 
 
 
-### With Easy Webpack
-
-To configure your project with Easy Webpack, follow the resources from Aurelia Docs: http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/setup-webpack/2 .
-
-```bash
-git clone [email protected]:aurelia/skeleton-navigation.git
-cd skeleton-navigation/skeleton-esnext-webpack
-git reset --hard 8997a6f87339a2702f77aeaab7ede5bffe94437f
-npm install
-```
-
-#### Add aurelia-froala-editor
-
-- Install the aurelia plugin
-
-```bash
-npm install aurelia-froala-editor --save
-```
-
-- In your `src/main.js` or `src/main.ts` file add:
-
-```javascript
-import { PLATFORM } from "aurelia-pal";
-
-// Editor files.
-import "froala-editor/js/froala_editor.pkgd.min";
-
-...
-
-// Use the aurelia-froala-editor plugin.
-aurelia.use.plugin(PLATFORM.moduleName('aurelia-froala-editor'));
-```
-
-- In your `src/app.html` include CSS files and Froala Editor component:
-
-```html
-<require from="froala-editor/css/froala_editor.pkgd.min.css"></require>
-<require from="froala-editor/css/froala_style.min.css"></require>
-
-<froala-editor></froala-editor>
-```
-
-- In `package.json` file include the Aurelia Froala Editor plugin:
-
-```json
-"aurelia": {
-  "build": {
-    "resources": [
-      "aurelia-froala-editor/froala-editor"
-    ]
-  }
-}
-```
-
-#### Run application
-
-```bash
-npm run start
-```
-
-
-
 ### With JSPM
 
 #### Installing aurelia-cli
@@ -365,13 +300,6 @@ jspm install npm:froala-editor -o "{format: 'global'}"
 - In your `src/main.js` or `src/main.ts` file add:
 
 ```javascript
-// Import jQuery
-import * as $ from 'jquery';
-
-// Import Editor.
-import * as froala from 'froala-editor/js/froala_editor.pkgd.min.js';
-
-...
 
 // Use the aurelia-froala-editor plugin.
 aurelia.use.plugin('aurelia-froala-editor');

dist/amd/froala-editor.html

@@ -1 +1,4 @@
-<template><div></div></template>
+<template>
+    <div if.bind='!config.iframe'></div>
+    <textarea if.bind='config.iframe'></textarea>
+</template>

dist/amd/froala-editor.js

@@ -1,10 +1,18 @@
-define(['exports', 'aurelia-framework', 'aurelia-binding', './froala-editor-config'], function (exports, _aureliaFramework, _aureliaBinding, _froalaEditorConfig) {
+define(['exports', 'aurelia-framework', 'aurelia-binding', './froala-editor-config', 'froala-editor/js/froala_editor.pkgd.min.js'], function (exports, _aureliaFramework, _aureliaBinding, _froalaEditorConfig, _froala_editorPkgdMin) {
 	'use strict';
 
 	Object.defineProperty(exports, "__esModule", {
 		value: true
 	});
-	exports.FroalaEditor = undefined;
+	exports.FroalaEditor1 = undefined;
+
+	var _froala_editorPkgdMin2 = _interopRequireDefault(_froala_editorPkgdMin);
+
+	function _interopRequireDefault(obj) {
+		return obj && obj.__esModule ? obj : {
+			default: obj
+		};
+	}
 
 	function _initDefineProp(target, property, descriptor, context) {
 		if (!descriptor) return;
@@ -57,11 +65,11 @@ define(['exports', 'aurelia-framework', 'aurelia-binding', './froala-editor-conf
 
 	var _dec, _dec2, _class, _desc, _value, _class2, _descriptor, _descriptor2, _descriptor3;
 
-	var FroalaEditor = exports.FroalaEditor = (_dec = (0, _aureliaFramework.customElement)('froala-editor'), _dec2 = (0, _aureliaFramework.inject)(Element, _froalaEditorConfig.Config, _aureliaBinding.ObserverLocator), _dec(_class = _dec2(_class = (_class2 = function () {
-		function FroalaEditor(element, config, observerLocator) {
+	var FroalaEditor1 = exports.FroalaEditor1 = (_dec = (0, _aureliaFramework.customElement)('froala-editor'), _dec2 = (0, _aureliaFramework.inject)(Element, _froalaEditorConfig.Config, _aureliaBinding.ObserverLocator), _dec(_class = _dec2(_class = (_class2 = function () {
+		function FroalaEditor1(element, config, observerLocator) {
 			var _this = this;
 
-			_classCallCheck(this, FroalaEditor);
+			_classCallCheck(this, FroalaEditor1);
 
 			_initDefineProp(this, 'value', _descriptor, this);
 
@@ -74,27 +82,31 @@ define(['exports', 'aurelia-framework', 'aurelia-binding', './froala-editor-conf
 			this.config = config.options();
 
 			this.subscriptions = [observerLocator.getObserver(this, 'value').subscribe(function (newValue, oldValue) {
-				if (_this.instance && _this.instance.froalaEditor('html.get') != newValue) {
-					_this.instance.froalaEditor('html.set', newValue);
+				if (_this.instance && _this.instance.html.get() != newValue) {
+					_this.instance.html(newValue);
 				}
 			})];
 		}
 
-		FroalaEditor.prototype.tearUp = function tearUp() {
+		FroalaEditor1.prototype.tearUp = function tearUp() {
 			var _this2 = this;
 
-			this.instance = $(this.element.getElementsByTagName("div")[0]);
+			if (this.config.iframe) {
+				this.instance = this.element.getElementsByTagName('textarea')[0];
+			} else {
+				this.instance = this.element.getElementsByTagName('div')[0];
+			}
 
-			if (this.instance.data('froala.editor')) {
+			if (this.instance['data-froala.editor']) {
 				return;
 			}
 
-			this.instance.html(this.value);
+			this.instance.innerHTML = this.value;
 
 			if (this.eventHandlers && this.eventHandlers.length != 0) {
 				var _loop = function _loop(eventHandlerName) {
 					var handler = _this2.eventHandlers[eventHandlerName];
-					_this2.instance.on('froalaEditor.' + eventHandlerName, function () {
+					_this2.instance.addEventListener('' + eventHandlerName, function () {
 						var p = arguments;
 						return handler.apply(this, p);
 					});
@@ -104,30 +116,33 @@ define(['exports', 'aurelia-framework', 'aurelia-binding', './froala-editor-conf
 					_loop(eventHandlerName);
 				}
 			}
-			this.instance.on('froalaEditor.contentChanged froalaEditor.blur', function (e, editor) {
+			this.instance.addEventListener('contentChanged', function (e, editor) {
+				return _this2.value = editor.html.get();
+			});
+			this.instance.addEventListener('blur', function (e, editor) {
 				return _this2.value = editor.html.get();
 			});
 
-			this.instance.froalaEditor(Object.assign({}, this.config));
+			this.instance = new _froala_editorPkgdMin2.default('#' + this.element.id, Object.assign({}, this.config));
 		};
 
-		FroalaEditor.prototype.tearDown = function tearDown() {
-			if (this.instance && this.instance.data('froala.editor')) {
-				this.instance.froalaEditor('destroy');
+		FroalaEditor1.prototype.tearDown = function tearDown() {
+			if (this.instance && this.instance['data-froala.editor']) {
+				this.instance.destroy();
 			}
 
 			this.instance = null;
 		};
 
-		FroalaEditor.prototype.attached = function attached() {
+		FroalaEditor1.prototype.attached = function attached() {
 			this.tearUp();
 		};
 
-		FroalaEditor.prototype.detached = function detached() {
+		FroalaEditor1.prototype.detached = function detached() {
 			this.tearDown();
 		};
 
-		return FroalaEditor;
+		return FroalaEditor1;
 	}(), (_descriptor = _applyDecoratedDescriptor(_class2.prototype, 'value', [_aureliaFramework.bindable], {
 		enumerable: true,
 		initializer: null
@@ -142,4 +157,4 @@ define(['exports', 'aurelia-framework', 'aurelia-binding', './froala-editor-conf
 			return {};
 		}
 	})), _class2)) || _class) || _class);
-});
+});

dist/commonjs/froala-editor.html

@@ -1 +1,4 @@
-<template><div></div></template>
+<template>
+    <div if.bind='!config.iframe'></div>
+    <textarea if.bind='config.iframe'></textarea>
+</template>