diff --git a/LICENSE b/LICENSE deleted file mode 100644 index 9c8f3ea..0000000 --- a/LICENSE +++ /dev/null @@ -1,201 +0,0 @@ - Apache License - Version 2.0, January 2004 - http://www.apache.org/licenses/ - - TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION - - 1. Definitions. - - "License" shall mean the terms and conditions for use, reproduction, - and distribution as defined by Sections 1 through 9 of this document. - - "Licensor" shall mean the copyright owner or entity authorized by - the copyright owner that is granting the License. - - "Legal Entity" shall mean the union of the acting entity and all - other entities that control, are controlled by, or are under common - control with that entity. For the purposes of this definition, - "control" means (i) the power, direct or indirect, to cause the - direction or management of such entity, whether by contract or - otherwise, or (ii) ownership of fifty percent (50%) or more of the - outstanding shares, or (iii) beneficial ownership of such entity. - - "You" (or "Your") shall mean an individual or Legal Entity - exercising permissions granted by this License. - - "Source" form shall mean the preferred form for making modifications, - including but not limited to software source code, documentation - source, and configuration files. - - "Object" form shall mean any form resulting from mechanical - transformation or translation of a Source form, including but - not limited to compiled object code, generated documentation, - and conversions to other media types. - - "Work" shall mean the work of authorship, whether in Source or - Object form, made available under the License, as indicated by a - copyright notice that is included in or attached to the work - (an example is provided in the Appendix below). - - "Derivative Works" shall mean any work, whether in Source or Object - form, that is based on (or derived from) the Work and for which the - editorial revisions, annotations, elaborations, or other modifications - represent, as a whole, an original work of authorship. For the purposes - of this License, Derivative Works shall not include works that remain - separable from, or merely link (or bind by name) to the interfaces of, - the Work and Derivative Works thereof. - - "Contribution" shall mean any work of authorship, including - the original version of the Work and any modifications or additions - to that Work or Derivative Works thereof, that is intentionally - submitted to Licensor for inclusion in the Work by the copyright owner - or by an individual or Legal Entity authorized to submit on behalf of - the copyright owner. For the purposes of this definition, "submitted" - means any form of electronic, verbal, or written communication sent - to the Licensor or its representatives, including but not limited to - communication on electronic mailing lists, source code control systems, - and issue tracking systems that are managed by, or on behalf of, the - Licensor for the purpose of discussing and improving the Work, but - excluding communication that is conspicuously marked or otherwise - designated in writing by the copyright owner as "Not a Contribution." - - "Contributor" shall mean Licensor and any individual or Legal Entity - on behalf of whom a Contribution has been received by Licensor and - subsequently incorporated within the Work. - - 2. Grant of Copyright License. Subject to the terms and conditions of - this License, each Contributor hereby grants to You a perpetual, - worldwide, non-exclusive, no-charge, royalty-free, irrevocable - copyright license to reproduce, prepare Derivative Works of, - publicly display, publicly perform, sublicense, and distribute the - Work and such Derivative Works in Source or Object form. - - 3. Grant of Patent License. Subject to the terms and conditions of - this License, each Contributor hereby grants to You a perpetual, - worldwide, non-exclusive, no-charge, royalty-free, irrevocable - (except as stated in this section) patent license to make, have made, - use, offer to sell, sell, import, and otherwise transfer the Work, - where such license applies only to those patent claims licensable - by such Contributor that are necessarily infringed by their - Contribution(s) alone or by combination of their Contribution(s) - with the Work to which such Contribution(s) was submitted. If You - institute patent litigation against any entity (including a - cross-claim or counterclaim in a lawsuit) alleging that the Work - or a Contribution incorporated within the Work constitutes direct - or contributory patent infringement, then any patent licenses - granted to You under this License for that Work shall terminate - as of the date such litigation is filed. - - 4. Redistribution. You may reproduce and distribute copies of the - Work or Derivative Works thereof in any medium, with or without - modifications, and in Source or Object form, provided that You - meet the following conditions: - - (a) You must give any other recipients of the Work or - Derivative Works a copy of this License; and - - (b) You must cause any modified files to carry prominent notices - stating that You changed the files; and - - (c) You must retain, in the Source form of any Derivative Works - that You distribute, all copyright, patent, trademark, and - attribution notices from the Source form of the Work, - excluding those notices that do not pertain to any part of - the Derivative Works; and - - (d) If the Work includes a "NOTICE" text file as part of its - distribution, then any Derivative Works that You distribute must - include a readable copy of the attribution notices contained - within such NOTICE file, excluding those notices that do not - pertain to any part of the Derivative Works, in at least one - of the following places: within a NOTICE text file distributed - as part of the Derivative Works; within the Source form or - documentation, if provided along with the Derivative Works; or, - within a display generated by the Derivative Works, if and - wherever such third-party notices normally appear. The contents - of the NOTICE file are for informational purposes only and - do not modify the License. You may add Your own attribution - notices within Derivative Works that You distribute, alongside - or as an addendum to the NOTICE text from the Work, provided - that such additional attribution notices cannot be construed - as modifying the License. - - You may add Your own copyright statement to Your modifications and - may provide additional or different license terms and conditions - for use, reproduction, or distribution of Your modifications, or - for any such Derivative Works as a whole, provided Your use, - reproduction, and distribution of the Work otherwise complies with - the conditions stated in this License. - - 5. Submission of Contributions. Unless You explicitly state otherwise, - any Contribution intentionally submitted for inclusion in the Work - by You to the Licensor shall be under the terms and conditions of - this License, without any additional terms or conditions. - Notwithstanding the above, nothing herein shall supersede or modify - the terms of any separate license agreement you may have executed - with Licensor regarding such Contributions. - - 6. Trademarks. This License does not grant permission to use the trade - names, trademarks, service marks, or product names of the Licensor, - except as required for reasonable and customary use in describing the - origin of the Work and reproducing the content of the NOTICE file. - - 7. Disclaimer of Warranty. Unless required by applicable law or - agreed to in writing, Licensor provides the Work (and each - Contributor provides its Contributions) on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or - implied, including, without limitation, any warranties or conditions - of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A - PARTICULAR PURPOSE. You are solely responsible for determining the - appropriateness of using or redistributing the Work and assume any - risks associated with Your exercise of permissions under this License. - - 8. Limitation of Liability. In no event and under no legal theory, - whether in tort (including negligence), contract, or otherwise, - unless required by applicable law (such as deliberate and grossly - negligent acts) or agreed to in writing, shall any Contributor be - liable to You for damages, including any direct, indirect, special, - incidental, or consequential damages of any character arising as a - result of this License or out of the use or inability to use the - Work (including but not limited to damages for loss of goodwill, - work stoppage, computer failure or malfunction, or any and all - other commercial damages or losses), even if such Contributor - has been advised of the possibility of such damages. - - 9. Accepting Warranty or Additional Liability. While redistributing - the Work or Derivative Works thereof, You may choose to offer, - and charge a fee for, acceptance of support, warranty, indemnity, - or other liability obligations and/or rights consistent with this - License. However, in accepting such obligations, You may act only - on Your own behalf and on Your sole responsibility, not on behalf - of any other Contributor, and only if You agree to indemnify, - defend, and hold each Contributor harmless for any liability - incurred by, or claims asserted against, such Contributor by reason - of your accepting any such warranty or additional liability. - - END OF TERMS AND CONDITIONS - - APPENDIX: How to apply the Apache License to your work. - - To apply the Apache License to your work, attach the following - boilerplate notice, with the fields enclosed by brackets "{}" - replaced with your own identifying information. (Don't include - the brackets!) The text should be enclosed in the appropriate - comment syntax for the file format. We also recommend that a - file or class name and description of purpose be included on the - same "printed page" as the copyright notice for easier - identification within third-party archives. - - Copyright {yyyy} {name of copyright owner} - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. \ No newline at end of file diff --git a/README.md b/README.md index d9441ab..5ea2f0a 100644 --- a/README.md +++ b/README.md @@ -2,53 +2,322 @@ >This package provides a custom element for the [Froala editor](https://www.froala.com/wysiwyg-editor) in [Aurelia](http://aurelia.io/). -## Install +## Installation instructions + +Install `aurelia-froala-editor` from `npm` -### With Webpack -Run: ```bash -npm install aurelia-froala-editor +npm install angular-froala-editor --save ``` -In your main.js or main.ts file: +## Integration + +### With Aurelia CLI + +#### Installing aurelia-cli + +*Note*: you can skip this part if you already have application generated. + +```bash +npm install aurelia-cli -g +au new my-app +cd my-app +``` + +#### 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 -// Font Awesome. -import 'font-awesome/css/font-awesome.css'; +// Editor files. +import "froala-editor/js/froala_editor.pkgd.min"; + +... + +// Use the aurelia-froala-editor plugin. +aurelia.use.plugin('aurelia-froala-editor'); +``` +- In your `src/app.html` include CSS files and Froala Editor component: + +```html + + + + + +``` + +- In `aurelia_project/aurelia.json` file set the builder loader plugins stub to `false` + +```javascript // Editor files. -import "froala-editor/js/froala_editor.pkgd.min.js"; -import "froala-editor/css/froala_editor.pkgd.min.css"; +import "froala-editor/js/froala_editor.pkgd.min"; ... +// Use the aurelia-froala-editor plugin. aurelia.use.plugin('aurelia-froala-editor'); ``` +- ​ + +```json +"loader": { + "type": "require", + "configTarget": "vendor-bundle.js", + "includeBundleMetadataInConfig": "auto", + "plugins": [ + { + "name": "text", + "extensions": [ + ".html", + ".css" + ], + "stub": false + } + ] +} +``` + +- In `aurelia_project/aurelia.json` add to `vendor_bundle` + +```javascript +{ + "name": "font-awesome", + "path": "../node_modules/font-awesome/css", + "main": "font-awesome.css" +}, +{ + "name": "aurelia-froala-wysiwyg", + "path": "../node_modules/aurelia-froala-wysiwyg/dist/amd", + "main": "index", + "resources": [ + "froala-editor.js", + "froala-editor.html" + ], + "deps": [ + "jquery", + "font-awesome" + ] +} +``` + +- Create a task to copy Font Awesome fonts: + +```javascript +au generate task copy-assets +``` + +- Add Font Awesome paths to `aurelia_project/aurelia.json` file: + +```javascript +{ + "paths": { + "root": "src", + "resources": "resources", + "elements": "resources/elements", + "attributes": "resources/attributes", + "valueConverters": "resources/value-converters", + "bindingBehaviors": "resources/binding-behaviors", + "assets": [ + { + "src": "./node_modules/font-awesome/fonts/**/*.*", + "dest": "./fonts" + } + ] + } +} +``` + +#### Run aurelia-cli + +```bash +au start --watch +``` + + + +### With Webpack + +To configure your project with Webpack, follow the resources from Aurelia Docs: http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/setup-webpack/2 . + +#### 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 + + + + +``` + +- In `webpack.config.js` file include the Aurelia Froala Editor plugin: + +```json +plugins: [ + new AureliaPlugin(), + new ModuleDependenciesPlugin({ + "aurelia-froala-wysiwyg": [ './froala-editor' ], + "parent-module": [ "child-module" ], + }), +] +``` + +#### Run application + +```bash +npm run start +``` + + ### With JSPM -Run: + +#### Installing aurelia-cli + +To configure your project with JSPM, follow the resources from Aurelia Docs: http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/setup-jspm/1 . + + + +#### Add aurelia-froala-editor + +- Install the aurelia plugin + ```bash -jspm install aurelia-froala-editor +jspm install aurelia-froala-editor ``` -In your main.js or main.ts file: +- In your `src/main.js` or `src/main.ts` file add: ```javascript -// Font Awesome. -import 'font-awesome/css/font-awesome.css!'; +// Import jQuery +import * as $ from 'jquery'; -// Editor JS. +// Import Editor. import * as froala from 'froala-editor/js/froala_editor.pkgd.min.js'; -import 'froala-editor/css/froala_editor.pkgd.min.css!'; ... -froala.default(); +// Use the aurelia-froala-editor plugin. aurelia.use.plugin('aurelia-froala-editor'); ``` -## Usage +- In your `src/app.html` include CSS files and Froala Editor component: + +```html + + + + +``` + +- In `package.json` file add the following overrides to the `jspm` entry: + +```json +"overrides": { + "npm:froala-editor@^2.6.0": { + "main": "js/froala-editor.min", + "format": "global", + "shim": { + "js/froala-editor.min": { + "deps": [ + "jquery" + ] + } + } + } +} +``` + +- In `build/bundles.js` add `aurelia-froala-editor` to `dist/aurelia` bundles: + +```javascript +module.exports = { + "bundles": { + ... + "dist/aurelia": { + "includes": [ + ... + "froala/aurelia-froala-wysiwyg", + ... + ], + "options": { + "inject": true, + "minify": true, + "depCache": false, + "rev": false + } + } + } +} +``` + +- Create a task to copy Font Awesome fonts: + +```javascript +au generate task copy-assets +``` + +- Add Font Awesome paths to `aurelia_project/aurelia.json` file: + +```javascript +{ + "paths": { + "root": "src", + "resources": "resources", + "elements": "resources/elements", + "attributes": "resources/attributes", + "valueConverters": "resources/value-converters", + "bindingBehaviors": "resources/binding-behaviors", + "assets": [ + { + "src": "./node_modules/font-awesome/fonts/**/*.*", + "dest": "./fonts" + } + ] + } +} +``` + +#### Run application + +```bash +gulp watch +``` + + + +- ### Usage + In an Aurelia template, just use the aurelia-froala custom element to instantiate an editor. ```html @@ -59,7 +328,8 @@ In an Aurelia template, just use the aurelia-froala custom element to instantiat All [configuration options](https://www.froala.com/wysiwyg-editor/docs/options) can be set via the config attribute. ```html - - + }"> +``` + +A custom config can also be passed when the plugin is loaded in `src/main.js` or `src/main.ts`file: + +```javascript +// Use the aurelia-froala-editor plugin. +aurelia.use.plugin('aurelia-froala-editor', config => { + config.options({ + toolbarInline: true + }) +}); ``` ### Events + All the [event handlers](https://www.froala.com/wysiwyg-editor/docs/events) are also available: ```html - + ``` ## License diff --git a/build/babel-options.js b/build/babel-options.js index b26717d..35ebb21 100644 --- a/build/babel-options.js +++ b/build/babel-options.js @@ -1,5 +1,4 @@ var path = require('path'); -var paths = require('./paths'); exports.base = function() { return { @@ -11,15 +10,15 @@ exports.base = function() { moduleIds: false, comments: false, compact: false, - code:true, - presets: [ 'es2015-loose', 'stage-1'], + code: true, + presets: [['es2015', { loose: true }], 'stage-1'], plugins: [ 'syntax-flow', 'transform-decorators-legacy', 'transform-flow-strip-types' ] }; -} +}; exports.commonjs = function() { var options = exports.base(); @@ -41,6 +40,6 @@ exports.system = function() { exports.es2015 = function() { var options = exports.base(); - options.presets = ['stage-1'] + options.presets = ['stage-1']; return options; }; diff --git a/build/paths.js b/build/paths.js index 4434d80..ce4791f 100644 --- a/build/paths.js +++ b/build/paths.js @@ -1,25 +1,5 @@ var appRoot = 'src/'; var outputRoot = 'dist/'; -<<<<<<< HEAD -var exporSrvtRoot = 'export/'; -var jspmPackages = 'jspm_packages/'; -var typings = 'typings/'; - -module.exports = { - root: appRoot, - source: appRoot + '**/*.js', - sourceMaps: "../maps", - html: appRoot + '**/*.html', - css: appRoot + '**/*.css', - sass: 'styles/**/*.scss', - cssOutput: outputRoot, - style: 'styles/**/*.css', - output: outputRoot, - exportSrv: exporSrvtRoot, - doc: './doc', - e2eSpecsSrc: 'test/e2e/src/*.js', - e2eSpecsDist: 'test/e2e/dist/', -======= module.exports = { root: appRoot, @@ -31,5 +11,4 @@ module.exports = { doc: './doc', e2eSpecsSrc: 'test/e2e/src/*.js', e2eSpecsDist: 'test/e2e/dist/' ->>>>>>> webpack_compatible }; diff --git a/build/tasks/build.js b/build/tasks/build.js index afd2d27..69afe0f 100644 --- a/build/tasks/build.js +++ b/build/tasks/build.js @@ -1,55 +1,9 @@ -<<<<<<< HEAD -'use strict' - -var gulp = require('gulp'); -var bump = require('gulp-bump') -var babel = require('gulp-babel'); -var sourcemaps = require('gulp-sourcemaps'); -var changed = require('gulp-changed'); -var runSequence = require('run-sequence'); -var paths = require("../paths") - -var compilerOptions = { - moduleIds: false, - comments: false, - compact: false, - presets: ["es2015", "stage-0"], - plugins: ["transform-es2015-modules-commonjs", "transform-decorators-legacy", "transform-decorators", ] -}; - -gulp.task('build-html', function() { - return gulp.src(paths.html) - .pipe(gulp.dest(paths.output)); -}); - -gulp.task('build-js', function() { - return gulp.src(paths.source) - .pipe(changed(paths.output), {extension: '.js'}) -// .pipe(sourcemaps.init({loadMaps: true})) - .pipe(babel(compilerOptions)) -// .pipe(sourcemaps.write({includeContent: true})) - .pipe(gulp.dest(paths.output)); -}); - -gulp.task('bump-version', function() { - return gulp.src('./package.json') - .pipe(bump({type: 'patch'})) - .pipe(gulp.dest('./')); - -}) - gulp.task('build', function(callback) { - return runSequence( - ['build-html', 'build-js'], - callback - )}); -======= let gulp = require('gulp'); let runSequence = require('run-sequence'); let to5 = require('gulp-babel'); let paths = require('../paths'); let compilerOptions = require('../babel-options'); let assign = Object.assign || require('object.assign'); -let replace = require('gulp-replace'); gulp.task('build-html', function() { return gulp.src(paths.html) @@ -75,7 +29,6 @@ gulp.task('build-es2015', function() { gulp.task('build-commonjs', function() { return gulp.src(paths.source) - .pipe(replace(/\.css\!/g, '.css')) .pipe(to5(assign({}, compilerOptions.commonjs()))) .pipe(gulp.dest(paths.output + 'commonjs')); }); @@ -99,4 +52,3 @@ gulp.task('build', function(callback) { callback ); }); ->>>>>>> webpack_compatible diff --git a/build/tasks/watch.js b/build/tasks/watch.js deleted file mode 100644 index c60c2a9..0000000 --- a/build/tasks/watch.js +++ /dev/null @@ -1,16 +0,0 @@ -var gulp = require('gulp'); -var paths = require('../paths'); - -// outputs changes to files to the console -function reportChange(event) { - console.log('File ' + event.path + ' was ' + event.type + ', running tasks...'); -} - -// this task wil watch for changes -// to js, html, and css files and call the -// reportChange method. Also, by depending on the -// serve task, it will instantiate a browserSync session -gulp.task('watch', ['build'], function() { - gulp.watch(paths.source, ['build-js']).on('change', reportChange); - gulp.watch(paths.html, ['build-html']).on('change', reportChange); -}); diff --git a/config.js b/config.js index 9302dbc..e0f5b0a 100644 --- a/config.js +++ b/config.js @@ -1,6 +1,14 @@ System.config({ defaultJSExtensions: true, - transpiler: false, + transpiler: "babel", + babelOptions: { + "optional": [ + "runtime", + "optimisation.modules.system", + "es7.decorators", + "es7.classProperties" + ] + }, paths: { "github:*": "jspm_packages/github/*", "npm:*": "jspm_packages/npm/*" @@ -12,4 +20,4 @@ System.config({ "aurelia-pal": "npm:aurelia-pal@1.0.0" } } -}); \ No newline at end of file +}); diff --git a/gulpfile.js b/gulpfile.js index 4577bb2..4b28ec1 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -1,11 +1,3 @@ -<<<<<<< HEAD -/// // all gulp tasks are located in the ./build/tasks directory // gulp configuration is in files in ./build directory -//require('require-dir')('build/tasks'); - -======= -// all gulp tasks are located in the ./build/tasks directory -// gulp configuration is in files in ./build directory ->>>>>>> webpack_compatible require('require-dir')('build/tasks'); diff --git a/karma.conf.js b/karma.conf.js deleted file mode 100644 index 03e0ca2..0000000 --- a/karma.conf.js +++ /dev/null @@ -1,76 +0,0 @@ -// Karma configuration -// Generated on Fri Dec 05 2014 16:49:29 GMT-0500 (EST) - -module.exports = function(config) { - config.set({ - - // base path that will be used to resolve all patterns (eg. files, exclude) - basePath: '', - - // frameworks to use - // available frameworks: https://npmjs.org/browse/keyword/karma-adapter - frameworks: ['jspm', 'jasmine'], - - jspm: { - // Edit this to your needs - loadFiles: ['test/setup.js', 'test/unit/**/*.js'], - serveFiles: ['src/**/*.js'], - paths: { - '*': '*', - 'github:*': 'jspm_packages/github/*', - 'npm:*': 'jspm_packages/npm/*' - } - }, - - // list of files / patterns to load in the browser - files: [], - - // list of files to exclude - exclude: [], - - - // preprocess matching files before serving them to the browser - // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor - preprocessors: { - 'test/**/*.js': ['babel'], - 'src/**/*.js': ['babel'] - }, - 'babelPreprocessor': { - options: { - sourceMap: 'inline', - presets: [ 'es2015-loose', 'stage-1'], - plugins: [ - 'syntax-flow', - 'transform-decorators-legacy', - 'transform-flow-strip-types' - ] - } - }, - - // test results reporter to use - // possible values: 'dots', 'progress' - // available reporters: https://npmjs.org/browse/keyword/karma-reporter - reporters: ['progress'], - - // web server port - port: 9876, - - // enable / disable colors in the output (reporters and logs) - colors: true, - - // level of logging - // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG - logLevel: config.LOG_INFO, - - // enable / disable watching file and executing tests whenever any file changes - autoWatch: true, - - // start these browsers - // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher - browsers: ['Chrome'], - - // Continuous Integration mode - // if true, Karma captures browsers, runs the tests and exits - singleRun: false - }); -}; diff --git a/package.json b/package.json index 15cb8fe..31c8e9e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "aurelia-froala-editor", - "version": "2.6.0", + "version": "2.7.0", "description": "Aurelia plugin for Froala WYSIWYG HTML rich text editor.", "keywords": [ "aurelia", @@ -23,65 +23,56 @@ "type": "git", "url": "https://github.com/froala/aurelia-froala-editor" }, - "dependencies": { - "froala-editor": "^2.6.0" - }, "devDependencies": { - "aurelia-tools": "^0.2.4", - "babel-eslint": "^6.1.2", - "babel-plugin-syntax-flow": "^6.8.0", + "aurelia-tools": "^1.0.0", + "babel-eslint": "^7.1.1", + "babel-plugin-syntax-flow": "^6.18.0", "babel-plugin-transform-decorators-legacy": "^1.3.4", - "babel-plugin-transform-es2015-modules-amd": "^6.8.0", - "babel-plugin-transform-es2015-modules-commonjs": "^6.11.5", - "babel-plugin-transform-es2015-modules-systemjs": "^6.11.6", - "babel-plugin-transform-flow-strip-types": "^6.8.0", - "babel-preset-es2015": "^6.9.0", - "babel-preset-es2015-loose": "^7.0.0", - "babel-preset-stage-1": "^6.5.0", - "conventional-changelog": "1.1.0", - "del": "^2.2.1", + "babel-plugin-transform-es2015-modules-amd": "^6.24.0", + "babel-plugin-transform-es2015-modules-commonjs": "^6.24.0", + "babel-plugin-transform-es2015-modules-systemjs": "^6.23.0", + "babel-plugin-transform-flow-strip-types": "^6.22.0", + "babel-preset-es2015": "^6.24.0", + "babel-preset-stage-1": "^6.22.0", + "conventional-changelog": "1.1.3", + "del": "^2.2.2", "gulp": "^3.9.1", "gulp-babel": "^6.1.2", - "gulp-bump": "^2.2.0", + "gulp-bump": "^2.7.0", "gulp-eslint": "^3.0.1", "gulp-yuidoc": "^0.1.2", - "gulp-replace": "^0.5.4", "isparta": "^4.0.0", "istanbul": "^1.0.0-alpha.2", - "jasmine-core": "^2.4.1", - "karma": "^1.1.2", + "jasmine-core": "^2.5.2", + "karma": "^1.5.0", "karma-babel-preprocessor": "^6.0.1", - "karma-chrome-launcher": "^1.0.1", + "karma-chrome-launcher": "^2.0.0", "karma-coverage": "^1.1.1", - "karma-jasmine": "^1.0.2", - "karma-jspm": "2.2.0", + "karma-jasmine": "^1.1.0", + "karma-jspm": "2.2.2", "object.assign": "^4.0.4", - "require-dir": "^0.3.0", + "require-dir": "^0.3.1", "run-sequence": "^1.2.2", "vinyl-paths": "^2.1.0", - "yargs": "^4.8.1" + "yargs": "^7.0.2" + }, + "dependencies": { + "froala-editor": "^2.6.0", + "aurelia-binding": "1.0.0", + "aurelia-dependency-injection": "^1.0.0" }, "jspm": { - "registry": "npm", - "jspmPackage": true, "main": "index", - "format": "amd", "directories": { - "dist": "dist/amd" - }, - "peerDependencies": {}, - "devDependencies": { - "aurelia-polyfills": "^1.0.0-beta.1.1.0" + "lib": "dist/system" }, "dependencies": { + "aurelia-polyfills": "^1.0.0", "jquery": "npm:jquery", "font-awesome": "npm:font-awesome", - "froala-editor": "npm:froala-editor@^2.6.0", - "aurelia-binding": "npm:aurelia-binding@^1.0.1", - "aurelia-event-aggregator": "npm:aurelia-event-aggregator@^1.0.0", - "aurelia-i18n": "npm:aurelia-i18n@^1.0.0", - "aurelia-dependency-injection": "npm:aurelia-dependency-injection@^1.0.0", - "aurelia-loader": "npm:aurelia-loader@^1.0.0" + "froala-editor": "npm:froala-editor^2.6.0", + "aurelia-binding": "npm:aurelia-binding@^1.0.0", + "aurelia-dependency-injection": "npm:aurelia-dependency-injection@^1.0.0" } } } diff --git a/src/froala-editor-config.js b/src/froala-editor-config.js new file mode 100644 index 0000000..bd59f80 --- /dev/null +++ b/src/froala-editor-config.js @@ -0,0 +1,26 @@ +// PUBLIC CLASS +export class Config { + _config; + + constructor() { + this._config = {}; + } + + get(key) { + return this._config[key]; + } + + options(obj) { + if (typeof obj != 'undefined') { + Object.assign(this._config, obj); + } + else { + return this._config; + } + } + + set(key, value) { + this._config[key] = value; + return this._config[key]; + } +} \ No newline at end of file diff --git a/src/froala-editor.html b/src/froala-editor.html index be964eb..0ada1d8 100644 --- a/src/froala-editor.html +++ b/src/froala-editor.html @@ -1 +1 @@ - \ No newline at end of file + diff --git a/src/froala-editor.js b/src/froala-editor.js index e38aa71..99703e2 100644 --- a/src/froala-editor.js +++ b/src/froala-editor.js @@ -1,12 +1,11 @@ -'use strict' - -import {customElement, bindable, inject} from 'aurelia-framework'; +import {inject, customElement, bindable} from 'aurelia-framework'; import {ObserverLocator} from "aurelia-binding"; -import {I18N} from "aurelia-i18n"; import {EventAggregator} from 'aurelia-event-aggregator'; -customElement('froala-editor') -@inject(Element, ObserverLocator, I18N, EventAggregator) +import {Config} from './froala-editor-config'; + +@customElement('froala-editor') +@inject(Element, Config, ObserverLocator, EventAggregator) export class FroalaEditor { @bindable value; @bindable config = {} @@ -14,44 +13,40 @@ export class FroalaEditor { element; instance; - i18n; - i18nInitialized = false; - constructor(element, observerLocator, i18n, eventAggregator) { + constructor (element, config, observerLocator, eventAggregator) { + // Store element. this.element = element; + + // Read config. + this.config = config.options(); + + // Observe value. this.subscriptions = [ observerLocator .getObserver(this, 'value') .subscribe((newValue, oldValue) => { if (this.instance && this.instance.froalaEditor('html.get') != newValue) { this.instance.froalaEditor('html.set', newValue); - this.updateEmptyStatus(); } }) ]; - this.i18n = i18n; - eventAggregator.subscribe('i18n:locale:changed', payload => { - this.processLanguageChanged(); - }); } - processLanguageChanged() { - this.tearDownFroala(); - this.setupFroala(); - } - - - setupFroala() { + // Starting poing. + tearUp () { + // Get element. this.instance = $(this.element.getElementsByTagName("div")[0]); + // Check if editor isn't already initialized. if (this.instance.data('froala.editor')) { return; } - let c = {} - c.language = this.i18n.getLocale(); - Object.assign(c, this.config); - this.instance.froalaEditor(c); - this.instance.froalaEditor('html.set', this.value); + + // Set the HTML for the inner element. + this.instance.html(this.value); + + // Set events. if (this.eventHandlers && this.eventHandlers.length != 0) { for(let eventHandlerName in this.eventHandlers) { let handler = this.eventHandlers[eventHandlerName]; @@ -62,27 +57,28 @@ export class FroalaEditor { } } - this.instance.on('froalaEditor.contentChanged,froalaEditor.blur', (e, editor) => this.value = editor.html.get()); - } - - updateEmptyStatus() { + this.instance.on('froalaEditor.contentChanged, froalaEditor.blur', (e, editor) => this.value = editor.html.get()); + // Initialize editor. + this.instance.froalaEditor(Object.assign({}, this.config)); } - tearDownFroala() { + // Destroy. + tearDown () { if (this.instance && this.instance.data('froala.editor')) { - this.instance.froalaEditor('destroy'); - } + this.instance.froalaEditor('destroy'); + } + this.instance = null; } - attached() { - this.setupFroala(); + // Setup. + attached () { + this.tearUp(); } - - - detached() { - this.tearDownFroala(); + // Destroy. + detached () { + this.tearDown(); } -} +} \ No newline at end of file diff --git a/src/index.js b/src/index.js index e102d83..103a8f7 100644 --- a/src/index.js +++ b/src/index.js @@ -1,3 +1,11 @@ -export function configure(aurelia, config) { +import {Config} from './froala-editor-config'; + +export function configure(aurelia, configCallback) { + const instance = aurelia.container.get(Config); + + if (configCallback !== undefined && typeof(configCallback) === 'function') { + configCallback(instance); + } + aurelia.globalResources('./froala-editor'); } diff --git a/test/setup.js b/test/setup.js deleted file mode 100644 index a518a5e..0000000 --- a/test/setup.js +++ /dev/null @@ -1 +0,0 @@ -import 'aurelia-polyfills'; \ No newline at end of file diff --git a/test/unit/configure.spec.js b/test/unit/configure.spec.js deleted file mode 100644 index 5461a98..0000000 --- a/test/unit/configure.spec.js +++ /dev/null @@ -1,21 +0,0 @@ -import {configure} from '../../src/index'; - -class ConfigStub { - globalResources(...resources) { - this.resources = resources; - } -} - -describe('the Aurelia configuration', () => { - var mockedConfiguration; - - beforeEach(() => { - mockedConfiguration = new ConfigStub(); - configure(mockedConfiguration); - }); - - it('should register a global resource', () => { - expect(mockedConfiguration.resources).toContain('./froala-editor'); - }); - -});