Fix dynamic language loading

Fixes #214

Author: ipeychev

package.json

@@ -2,8 +2,7 @@
   "name": "alloy-editor",
   "version": "0.2.8",
   "description": "Alloy Editor, a modern WYSIWYG editor, build on top of CKEditor",
-  "dependencies": {},
-  "devDependencies": {
+  "dependencies": {
     "bourbon": "https://github.com/thoughtbot/bourbon/tarball/master",
     "chai": "^2.3.0",
     "del": "^1.2.0",
@@ -64,4 +63,4 @@
     "url": "https://github.com/liferay/alloy-editor/issues"
   },
   "homepage": "http://alloyeditor.com"
-}
+}

src/ui/react/_core.js src/ui/react/_src.jssrc/ui/react/_core.js renamed to src/ui/react/_src.js

@@ -15,5 +15,9 @@ module.exports = [
     'ui/react/src/selections/selection-position.js',
     'ui/react/src/selections/selection-test.js',
     'ui/react/src/selections/selections.js',
-    'ui/react/src/adapter/alloy-editor.js'
+    'ui/react/src/adapter/alloy-editor.js',
+    'ui/react/src/components/base/*.js*',
+    'ui/react/src/components/buttons/*.js*',
+    'ui/react/src/components/toolbars/*.js*',
+    'ui/react/src/components/main.js*'
 ];

src/ui/react/_ui.js

@@ -3,11 +3,11 @@
 var gulp = require('gulp');
 
 var argv = require('yargs').argv;
+var react = require('gulp-react');
 var concat = require('gulp-concat');
 var del = require('del');
 var fs = require('fs');
 var path = require('path');
-var react = require('gulp-react');
 var rename = require('gulp-rename');
 var replace = require('gulp-replace');
 var runSequence = require('run-sequence');
@@ -24,8 +24,7 @@ var apiFolder = path.join(rootDir, 'api');
 var distFolder = path.join(rootDir, 'dist');
 var editorDistFolder = path.join(distFolder, 'alloy-editor-' + pkg.version, 'alloy-editor');
 
-var coreFiles = require('../_core.js');
-var uiFiles = require('../_ui.js');
+var srcFiles = require('../_src.js');
 
 function errorHandler(error) {
   console.log(error.toString());
@@ -127,8 +126,7 @@ gulp.task('build-demo', function() {
 gulp.task('build-js', function(callback) {
     runSequence([
         'copy-ckeditor',
-        'create-alloy-editor-core',
-        'create-alloy-editor-core-ui'
+        'create-alloy-editor-core'
     ], 'wrap-alloy-editor', callback);
 });
 
@@ -211,19 +209,12 @@ gulp.task('create-alloy-editor-no-react-min', function() {
 });
 
 gulp.task('create-alloy-editor-core', function() {
-    return gulp.src(coreFiles, {cwd : rootDir + '/src'})
+    return gulp.src(srcFiles, {cwd : rootDir + '/src'})
     .pipe(react()).on('error', errorHandler)
     .pipe(concat('alloy-editor-core.js'))
     .pipe(gulp.dest(editorDistFolder));
 });
 
-gulp.task('create-alloy-editor-core-ui', function() {
-    return gulp.src(uiFiles, {cwd : rootDir + '/src'})
-    .pipe(react()).on('error', errorHandler)
-    .pipe(concat('alloy-editor-core-ui.js'))
-    .pipe(gulp.dest(editorDistFolder));
-});
-
 gulp.task('create-zip', function() {
     return gulp.src(path.join(distFolder, '/**'))
         .pipe(zip('alloy-editor-' + pkg.version + '.zip'))

src/ui/react/gulp-tasks/build.js

@@ -1,11 +1,11 @@
 'use strict';
 
 var argv = require('yargs').argv;
+var react = require('gulp-react');
 var gulp = require('gulp');
 var karma = require('karma').server;
 var mkdirp = require('mkdirp');
 var path = require('path');
-var react = require('gulp-react');
 var runSequence = require('run-sequence');
 
 var rootDir = path.join(__dirname, '..', '..', '..', '..');
@@ -15,14 +15,13 @@ var pkg = require(path.join(rootDir, 'package.json'));
 var distFolder = path.join(rootDir, 'dist');
 var editorDistFolder = path.join(distFolder, 'alloy-editor-' + pkg.version, 'alloy-editor');
 
-var coreFiles = require('../_core.js');
+var srcFiles = require('../_src.js');
 var languageFiles = require('../_languages.js');
-var uiFiles = require('../_ui.js');
 
 gulp.task('prepare-files', function(done) {
     runSequence(
         'clean-dist', 'create-output-dir', [
-            'build-css', 'copy-ckeditor', 'copy-core-files', 'copy-ui-files', 'copy-language-files', 'copy-react'
+            'build-css', 'copy-ckeditor', 'copy-core-files', 'copy-language-files', 'copy-react'
         ], done);
 });
 
@@ -31,7 +30,7 @@ gulp.task('create-output-dir', function(callback) {
 });
 
 gulp.task('copy-core-files', function() {
-    return gulp.src(coreFiles, {cwd: 'src', base: 'src'})
+    return gulp.src(srcFiles, {cwd: 'src', base: 'src'})
         .pipe(react())
         .pipe(gulp.dest(path.join(editorDistFolder, 'test')));
 });
@@ -41,12 +40,6 @@ gulp.task('copy-language-files', function() {
         .pipe(gulp.dest(path.join(editorDistFolder, 'test')));
 });
 
-gulp.task('copy-ui-files', function() {
-    return gulp.src(uiFiles, {cwd: 'src', base: 'src'})
-        .pipe(react())
-        .pipe(gulp.dest(path.join(editorDistFolder, 'test')));
-});
-
 gulp.task('copy-react', function() {
     return gulp.src(path.join(reactDir, 'vendor', 'react-with-addons.js'))
         .pipe(gulp.dest(editorDistFolder));

src/ui/react/gulp-tasks/test.js

@@ -15,18 +15,11 @@ var distFolder = path.join(rootDir, 'dist');
 var pkg = require(path.join(rootDir, 'package.json'));
 var editorDistFolder = path.join(distFolder, 'alloy-editor-' + pkg.version, 'alloy-editor');
 
-gulp.task('join-core-ui', function() {
-    return gulp.src(path.join(reactDir, 'template/alloy-editor.template'))
+gulp.task('wrap-alloy-editor', function () {
+	return gulp.src(path.join(reactDir, 'template/alloy-editor.template'))
         .pipe(template({
-            core: fs.readFileSync(path.join(editorDistFolder, 'alloy-editor-core.js')),
-            ui: fs.readFileSync(path.join(editorDistFolder, 'alloy-editor-core-ui.js'))
+            core: fs.readFileSync(path.join(editorDistFolder, 'alloy-editor-core.js'))
         }))
         .pipe(rename('alloy-editor-core.js'))
         .pipe(gulp.dest(editorDistFolder));
-});
-
-gulp.task('clean-ui', function(done) {
-	del(path.join(editorDistFolder, 'alloy-editor-core-ui.js'), done);
-});
-
-gulp.task('wrap-alloy-editor', ['join-core-ui', 'clean-ui']);
+});

src/ui/react/gulp-tasks/wrap.js

@@ -7,8 +7,7 @@ var alloyEditorDir = 'dist/alloy-editor-*/alloy-editor/';
 var argv = require('yargs').argv;
 var path = require('path');
 
-var coreFiles = require('./_core.js');
-var uiFiles = require('./_ui.js');
+var srcFiles = require('./_src.js');
 
 var preprocessors = {
     '**/*.jsx': ['react-jsx'],
@@ -77,7 +76,7 @@ var filesToLoad = [
     'src/ui/react/test/fixtures/**/*'
 ];
 
-coreFiles.forEach(function(file) {
+srcFiles.forEach(function(file) {
     filesToLoad.push({
         pattern: path.join(alloyEditorDir, 'test', file),
         included: true,
@@ -86,21 +85,13 @@ coreFiles.forEach(function(file) {
 });
 
 filesToLoad.push({
-    pattern: path.join(alloyEditorDir, 'test/ui/react/lang/en.js'),
+    pattern: 'src/ui/react/test/*.js*',
     included: true,
     watched: false
 });
 
-uiFiles.forEach(function(file) {
-    filesToLoad.push({
-        pattern: path.join(alloyEditorDir, 'test', file),
-        included: true,
-        watched: false
-    });
-});
-
 filesToLoad.push({
-    pattern: 'src/ui/react/test/*.js*',
+    pattern: path.join(alloyEditorDir, 'test/ui/react/lang/en.js'),
     included: true,
     watched: false
 });

src/ui/react/karma.js

@@ -15,7 +15,7 @@
     AlloyEditor.OOP.extend(Core, AlloyEditor.Base, {
         /**
          * Initializer lifecycle implementation for the AlloyEditor class. Creates a CKEditor
-         * instace, passing it the provided configuration attributes.
+         * instance, passing it the provided configuration attributes.
          *
          * @protected
          * @method initializer
@@ -76,6 +76,13 @@
             return this._editor;
         },
 
+        /**
+         * Detects and load the corresponding language file
+         * if AlloyEditor language strings are not already present.
+         *
+         * @protected
+         * @method _loadLanguageFile
+         */
         _loadLanguageFile: function() {
             var onLanguageFileLoad = function() {
                 CKEDITOR.fire('resourcesLoaded');

src/ui/react/src/adapter/alloy-editor.js

@@ -65,7 +65,6 @@
 
         /**
          * Lifecycle. Invoked immediately after the component's updates are flushed to the DOM.
-         *
          * Refreshes the descendants list.
          *
          * @method componentDidUpdate

src/ui/react/src/components/base/widget-focus-manager.js

@@ -59,7 +59,6 @@
         getDefaultProps: function() {
             return {
                 command: 'bold',
-                label: AlloyEditor.Strings.bold,
                 style: {
                     element: 'strong'
                 }
@@ -76,7 +75,7 @@
             var cssClass = 'alloy-editor-button ' + this.getStateClasses();
 
             return (
-                <button aria-label={this.props.label} aria-pressed={cssClass.indexOf('pressed') !== -1} className={cssClass} data-type="button-bold" onClick={this.execCommand} tabIndex={this.props.tabIndex} title={this.props.label}>
+                <button aria-label={AlloyEditor.Strings.bold} aria-pressed={cssClass.indexOf('pressed') !== -1} className={cssClass} data-type="button-bold" onClick={this.execCommand} tabIndex={this.props.tabIndex} title={AlloyEditor.Strings.bold}>
                     <span className="alloy-editor-icon-bold"></span>
                 </button>
             );