Merge pull request #863 from jrjohnson/458-froalaeditor

Add the Froala WYSIWYG Editor

app/components/big-text.js

@@ -1,5 +1,9 @@
 import Ember from 'ember';
 
+const {computed, Handlebars} = Ember;
+const {SafeString} = Handlebars;
+const {collect, sum} = computed;
+
 export default Ember.Component.extend({
   expanded: false,
   classNames: ['big-text'],
@@ -8,28 +12,36 @@ export default Ember.Component.extend({
   expandIcon: 'info-circle',
   text: '',
   ellipsis: 'ellipsis-h',
-  lengths: Ember.computed.collect('length', 'slippage'),
-  totalLength: Ember.computed.sum('lengths'),
-  promptText: '',
-  showIcons: function(){
-    return this.get('displayText') !== this.get('cleanText');
-  }.property('displayText', 'text'),
-  cleanText: function(){
-    var text = this.get('text');
-    if(text === undefined || text == null){
-      return this.get('promptText')?this.get('promptText').toString():'';
+  lengths: collect('length', 'slippage'),
+  totalLength: sum('lengths'),
+  renderHtml: true,
+  showIcons: computed('displayText', 'text', 'renderHtml', function(){
+    if(this.get('renderHtml')){
+      return this.get('displayText').toString() !== this.get('text');
+    } else {
+      return this.get('displayText').toString() !== this.get('cleanText');
     }
+  }),
+  cleanText: computed('text', function(){
     //strip any possible HTML out of the text
-    return text.replace(/(<([^>]+)>)/ig,"");
-  }.property('text'),
-  displayText: function(){
-    var text = this.get('cleanText');
-    if(this.get('expanded') || text.length < this.get('totalLength')){
-      return text;
+    return this.get('text').replace(/(<([^>]+)>)/ig,"");
+  }),
+  displayText: computed('cleanText', 'totalLength', 'length', 'expanded', function(){
+    let cleanText = this.get('cleanText');
+    let text;
+    if(this.get('expanded') || cleanText.length < this.get('totalLength')){
+      if(this.get('renderHtml')){
+        text = this.get('text');
+      } else {
+        text = cleanText;
+      }
+    } else {
+      text = cleanText.substring(0, this.get('length'));
     }
-
-    return text.substring(0, this.get('length'));
-  }.property('cleanText', 'totalLength', 'length', 'expanded'),
+
+    return new SafeString(text);
+
+  }),
   actions: {
     click: function(){
       this.sendAction();

app/components/detail-objectives.js

@@ -1,24 +1,32 @@
 import Ember from 'ember';
 import scrollTo from '../utils/scroll-to';
+import config from 'ilios/config/environment';
+
+const {computed, inject} = Ember;
+const {service} = inject;
+const {or, notEmpty} = computed;
 
 export default Ember.Component.extend({
-  store: Ember.inject.service(),
+  store: service(),
+  flashMessages: service(),
   subject: null,
   classNames: ['detail-objectives'],
   isCourse: false,
   isSession: false,
   isProgramYear: false,
-  isManaging: Ember.computed.or('isManagingParents', 'isManagingDescriptors', 'isManagingCompetency'),
-  isManagingParents: Ember.computed.notEmpty('mangeParentsObjective'),
+  isManaging: or('isManagingParents', 'isManagingDescriptors', 'isManagingCompetency'),
+  isManagingParents: notEmpty('mangeParentsObjective'),
   mangeParentsObjective: null,
   initialStateForManageParentsObjective: [],
-  isManagingDescriptors: Ember.computed.notEmpty('manageDescriptorsObjective'),
+  isManagingDescriptors: notEmpty('manageDescriptorsObjective'),
   mangeMeshObjective: null,
   initialStateForManageMeshObjective: [],
-  isManagingCompetency: Ember.computed.notEmpty('manageCompetencyObjective'),
+  isManagingCompetency: notEmpty('manageCompetencyObjective'),
   manageCompetencyObjective: null,
   initialStateForManageCompetencyObjective: null,
-  newObjectives: [],
+  newObjectiveEditorOn: false,
+  newObjectiveTitle: null,
+  editorParams: config.froalaEditorDefaults,
   actions: {
     manageParents: function(objective){
       objective.get('parents').then((parents) => {
@@ -125,13 +133,9 @@ export default Ember.Component.extend({
         scrollTo("#objective-" + objective.get('id'));
       }
     },
-    addObjective: function(){
-      var objective = this.get('store').createRecord('objective');
-      this.get('newObjectives').addObject(objective);
-    },
-    saveNewObjective: function(newObjective){
-      var self = this;
-      self.get('newObjectives').removeObject(newObjective);
+    saveNewObjective: function(){
+      let newObjective = this.get('store').createRecord('objective');
+      newObjective.set('title', this.get('newObjectiveTitle'));
       if(this.get('isCourse')){
         newObjective.get('courses').addObject(this.get('subject'));
       }
@@ -141,15 +145,26 @@ export default Ember.Component.extend({
       if(this.get('isProgramYear')){
         newObjective.get('programYears').addObject(this.get('subject'));
       }
-      newObjective.save().then(function(savedObjective){
-        self.get('subject.objectives').then(function(objectives){
+      newObjective.save().then(savedObjective => {
+        this.get('subject.objectives').then(objectives => {
           objectives.addObject(savedObjective);
-          objectives.save();
         });
+        this.send('closeNewObjectiveEditor');
+        this.get('flashMessages').success('courses.newObjectiveSaved');
       });
     },
-    removeNewObjective: function(newObjective){
-      this.get('newObjectives').removeObject(newObjective);
+    toggleNewObjectiveEditor() {
+      this.set('newObjectiveTitle', null);
+      this.set('newObjectiveEditorOn', !this.get('newObjectiveEditorOn'));
+    },
+    closeNewObjectiveEditor() {
+      this.set('newObjectiveTitle', null);
+      this.set('newObjectiveEditorOn', false);
+    },
+    changeNewObjectiveTitle(event, editor){
+      if(editor){
+        this.set('newObjectiveTitle', editor.getHTML());
+      }
     },
   }
 });

app/components/inplace-html.js

@@ -0,0 +1,18 @@
+import Ember from 'ember';
+import config from 'ilios/config/environment';
+import InPlace from 'ilios/mixins/inplace';
+
+export default Ember.Component.extend(InPlace, {
+  classNames: ['editinplace', 'inplace-html'],
+  editorParams: config.froalaEditorDefaults,
+  willDestroyElement(){
+    this.$('.control .froala-box').editable('destroy');
+  },
+  actions: {
+    grabChangedValue: function(event, editor){
+      if(editor){
+        this.send('changeValue', editor.getHTML());
+      }
+    }
+  }
+});

app/components/new-learningmaterial.js

@@ -1,4 +1,5 @@
 import Ember from 'ember';
+import config from 'ilios/config/environment';
 import layout from '../templates/components/new-learningmaterial';
 
 export default Ember.Component.extend({
@@ -17,6 +18,7 @@ export default Ember.Component.extend({
   isCitation: function(){
     return this.get('learningMaterial.type') === 'citation';
   }.property('learningMaterial.type'),
+  editorParams: config.froalaEditorDefaults,
   actions: {
     save: function(){
       this.sendAction('save', this.get('learningMaterial'));
@@ -41,6 +43,11 @@ export default Ember.Component.extend({
       let learningMaterialUserRoles = this.get('learningMaterialUserRoles');
       let role = learningMaterialUserRoles.toArray()[selectedIndex];
       this.set('learningMaterial.userRole', role);
-    }
+    },
+    changeDescription(event, editor){
+      if(editor){
+        this.get('learningMaterial').set('description', editor.getHTML());
+      }
+    },
   }
 });

app/locales/en/translations.js

@@ -203,6 +203,7 @@ export default {
     'title': 'Course Title',
     'objectiveParentTitle': 'Select Parent Objectives',
     'objectiveDescriptorTitle': 'Select MeSH Descriptors',
+    'newObjectiveSaved': 'New Objective Saved',
     'chooseCohortTitle': 'Select Parent For',
     'missingCohortMessage': 'Please add at least one cohort to this course.',
     'confirmRemove': 'Are you sure you want to delete this course, with {{publishedOfferingCount}} published offerings? This action will remove all sessions and offerings for this course, and cannot be undone.',

app/locales/es/translations.js

@@ -203,6 +203,7 @@ export default {
     'title': 'Titulo de Curso',
     'objectiveParentTitle': 'Seleccione Objetivos Principales',
     'objectiveDescriptorTitle': 'Seleccione Descriptores de MeSH',
+    'newObjectiveSaved': 'Nuevo Objetivo Guardado',
     'chooseCohortTitle': 'Seleccione Matriz Para',
     'missingCohortMessage': 'Favor de agregar por lo menos un Clase de La Graduación a este curso.',
     'confirmRemove': ' ¿Estás seguro que quieres borrar este curso, con {{publishedOfferingCount}} ofrecimientos publicados? Esta acción borrará todas las sessiones y ofrecimientos para este curso y no se puede deshacer.',

app/locales/fr/translations.js

@@ -203,6 +203,7 @@ export default {
     'title': "Titre de Cours",
     'objectiveParentTitle': "Choisi Objectifs mères",
     'objectiveDescriptorTitle': "Choisi MeSH",
+    'newObjectiveSaved': 'Nouvel objective sauvé',
     'chooseCohortTitle': "Choisi objectif mère pour",
     'missingCohortMessage': "S'il vous plait ajouter au moins un cohort à ce cours.",
     'confirmRemove': "Êtes-vous sûr vous voulez supprimer ce cours, avec {{publishedOfferingCount}} offres publié? Cela supprimera toutes sessions et offres pour ce cours, et ne peut pas être défait.",

app/mirage/fixtures/objectives.js

@@ -961,7 +961,7 @@ export default [
 
   {
     'id' : 76350,
-    'title' : "<span style='font-size:16.0pt !msorm;font-family:&quot;Times New Roman&quot; !msorm'><span style='font-size:10.0pt;font-family:&quot;Century Schoolbook&quot;;mso-bidi-font-family: &quot;Times New Roman&quot;'><span style='mso-prop-change:csc 20120724T1725'><span class='msoIns'><emns cite='mailto:csc' datetime='2012-07-24T17:24'></ins></span></span></span></span><span class='msoins'><span style='font-size:10.0pt;font-family: &quot;Century Schoolbook&quot;;mso-fareast-font-family:&quot;Times New Roman&quot;'>Describe and explain the general organization of the body and, in more detail, the anatomy of the musculoskeletal and nervous systems, including selected features of embryological development (early development, gastrulation, neurulation, segmentation, </span></span><span class='msoins'><span style='font-family:&quot;Century Schoolbook&quot;;mso-fareast-font-family:&quot;Times New Roman&quot;'>& </span></span><span class='msoins'><span style='font-size:10.0pt;font-family: &quot;Century Schoolbook&quot;;mso-fareast-font-family:&quot;Times New Roman&quot;'>development of the musculoskeletal system).</span></span>      <br><span style='font-size:10.0pt;font-family:&quot;Century Schoolbook&quot;;mso-bidi-font-family: &quot;Times New Roman&quot;'><span style='font-size:16.0pt !msorm; font-family:&quot;Times New Roman&quot; !msorm'><span style='mso-prop-change:csc 20120724T1725'><span class='msoIns'><emns cite='mailto:csc' datetime='2012-07-24T17:24'></ins></span></span></span></span><span style='font-family:Courier !msorm'><span style='font-size:10.0pt;font-family: &quot;Century Schoolbook&quot;;mso-bidi-font-family:Courier'><span style='mso-prop-change: csc 20120724T1725'></span></span></span>",
+    'title' : "<span style='font-size:16.0pt !msorm;font-family:&quot;Times New Roman&quot; !msorm'><span style='font-size:10.0pt;font-family:&quot;Century Schoolbook&quot;;mso-bidi-font-family: &quot;Times New Roman&quot;'><span style='mso-prop-change:csc 20120724T1725'><span class='msoIns'><emns cite='mailto:csc' datetime='2012-07-24T17:24'></ins></span></span></span></span><span class='msoins'><span style='font-size:10.0pt;font-family: &quot;Century Schoolbook&quot;;mso-fareast-font-family:&quot;Times New Roman&quot;'>Describe and explain the general organization of the body and, in more detail, the anatomy of the musculoskeletal and nervous systems, including selected features of embryological development (early development, gastrulation, neurulation, segmentation, </span></span><span class='msoins'><span style='font-family:&quot;Century Schoolbook&quot;;mso-fareast-font-family:&quot;Times New Roman&quot;'>& </span><ol><li>First</li></ol><ul><li>second</li></ul></span><span class='msoins'><span style='font-size:10.0pt;font-family: &quot;Century Schoolbook&quot;;mso-fareast-font-family:&quot;Times New Roman&quot;'>development of the musculoskeletal system).</span></span>      <br><span style='font-size:10.0pt;font-family:&quot;Century Schoolbook&quot;;mso-bidi-font-family: &quot;Times New Roman&quot;'><span style='font-size:16.0pt !msorm; font-family:&quot;Times New Roman&quot; !msorm'><span style='mso-prop-change:csc 20120724T1725'><span class='msoIns'><emns cite='mailto:csc' datetime='2012-07-24T17:24'></ins></span></span></span></span><span style='font-family:Courier !msorm'><span style='font-size:10.0pt;font-family: &quot;Century Schoolbook&quot;;mso-bidi-font-family:Courier'><span style='mso-prop-change: csc 20120724T1725'></span></span></span>",
     'courses' : [ '595' ],
     'programYears' : [],
     'sessions' : [],
@@ -2820,4 +2820,4 @@ export default [
     'children' : [],
     'meshDescriptors' : []
   },
-];
+];

app/styles/components/_global.scss

@@ -316,3 +316,30 @@ select:hover {
 ::-webkit-scrollbar-thumb:window-inactive {
   background: rgba(0, 0, 0, .05);
 }
+
+.list-reset {
+  ul { 
+    list-style-position: inside; 
+    list-style-type: disc; 
+  }
+
+  ol { 
+    list-style-position: inside; 
+    list-style-type: decimal; 
+  }
+
+  ul ul,
+  ol ul { 
+    list-style-position: inside; 
+    list-style-type: circle; 
+    margin-left: 15px; 
+  }
+
+  ol ol,
+  ul ol { 
+    list-style-position: inside; 
+    list-style-type: lower-latin; 
+    margin-left: 15px; 
+  }
+
+}

app/templates/components/big-text.hbs

@@ -1,4 +1,4 @@
-<span {{action 'click'}}>{{displayText}}</span>
+<span class="{{if renderHtml 'list-reset'}}" {{action 'click'}}>{{displayText}}</span>
 {{#if showIcons}}
   <span class='clickable' {{action 'expand'}}>
     {{fa-icon ellipsis classNames='text-bottom'}} {{fa-icon expandIcon}}

app/templates/components/course-objective-list.hbs

@@ -10,7 +10,7 @@
     {{#each sortedObjectives as |objective|}}
     <tr id="objective-{{objective.id}}">
       <td class='text-left text-top' colspan=2>
-        {{inplace-textarea value=objective.title save='changeObjectiveTitle' condition=objective.id}}
+        {{inplace-html value=objective.title save='changeObjectiveTitle' condition=objective.id}}
       </td>
       <td class='text-left text-top'>
         {{#if objective.hasParents}}

app/templates/components/course-objective-manager.hbs

@@ -1,4 +1,4 @@
-<h2>{{{courseObjective.title}}}</h2>
+<div class='list-reset objectivetitle'>{{{courseObjective.title}}}</div>
 {{#liquid-if showCohortList class="horizontal"}}
   <label class='group-picker'>
     {{t 'courses.chooseCohortTitle'}}:

app/templates/components/detail-objectives.hbs

@@ -25,23 +25,25 @@
       <button class='bigadd' {{action 'save'}}>{{fa-icon 'check'}}</button>
       <button class='bigcancel' {{action 'cancel'}}>{{fa-icon 'undo'}}</button>
     {{else}}
-      <button {{action 'addObjective'}}>{{t 'general.addNew'}}</button>
+      {{expand-collapse-button value=newObjectiveEditorOn action="toggleNewObjectiveEditor"}}
     {{/liquid-if}}
   </div>
   <div class='detail-content'>
-    {{#liquid-if newObjectives.length class='vertical'}}
+    {{#liquid-if newObjectiveEditorOn class='vertical'}}
       <section class='resultslist-new'>
-        {{#each newObjectives as |objective|}}
-          <section class='newobjective'>
-            <label>
-              {{t 'general.title'}}:
-              {{textarea value=objective.title}}
-            </label>
-            <br />
-            <button class='done text' {{action 'saveNewObjective' objective}}>{{t 'general.done'}}</button>
-            <button class='cancel text' {{action 'removeNewObjective' objective}}>{{t 'general.cancel'}}</button>
-          </section>
-        {{/each}}
+        <section class='newobjective'>
+          <label>
+            {{t 'general.title'}}:
+            {{froala-editor
+              params=editorParams
+              value=newObjectiveTitle
+              contentChanged=(action "changeNewObjectiveTitle")
+            }}
+          </label>
+          <br />
+          <button class='done text' {{action 'saveNewObjective'}}>{{t 'general.done'}}</button>
+          <button class='cancel text' {{action 'closeNewObjectiveEditor'}}>{{t 'general.cancel'}}</button>
+        </section>
       </section>
     {{/liquid-if}}
     {{#liquid-unless isManaging class="horizontal"}}

app/templates/components/inplace-html.hbs

@@ -0,0 +1,25 @@
+<span class='content'>
+  {{#unless isEditing}}
+    <span class='editable'>
+      {{#if value.length}}
+        {{big-text text=value action='edit' renderHtml=true}}
+      {{else}}
+        <span {{action 'edit'}}>{{clickPrompt}}</span>
+      {{/if}}
+    </span>
+  {{else}}
+    <span class='editor'>
+      <span class='control list-reset'>
+        {{froala-editor
+          params=editorParams
+          value=buffer 
+          contentChanged=(action "grabChangedValue")
+        }}
+      </span>
+      <span class='actions'>
+        <button class='done icon' title='{{t "general.save"}}' {{action 'save'}}>{{fa-icon 'check'}}</button>
+        <button class='cancel icon' title='{{t "general.cancel"}}' {{action 'cancel'}}>{{fa-icon 'times'}}</button>
+      </span>
+    </span>
+  {{/unless}}
+</span>

app/templates/components/inplace-textarea.hbs

@@ -1,14 +1,18 @@
 <span class='content'>
   {{#unless isEditing}}
     <span class='editable'>
-      {{big-text text=value action='edit' promptText=clickPrompt}}
+      {{#if value.length}}
+        {{big-text text=value action='edit'}}
+      {{else}}
+        <span {{action 'edit'}}>{{clickPrompt}}</span>      
+      {{/if}}
     </span>
   {{else}}
     <span class='editor'>
       <span class='control'>
         <textarea
           type='text'
-          value="target.value"
+          value={{buffer}}
           onKeyUp={{action "changeValue" value="target.value"}}
           onChange={{action "changeValue" value="target.value"}}>
           {{value}}

app/templates/components/learningmaterial-manager.hbs

@@ -22,7 +22,7 @@
   <div class="form-col-12">
     <label class="form-label">{{t 'learningMaterials.instructionalNotes'}}:</label>
     <div class="form-data notes">
-      {{inplace-textarea value=valueBuffer.notes save='changeNotes'}}
+      {{inplace-html value=valueBuffer.notes save='changeNotes'}}
     </div>
   </div>
   <div class="form-col-12">
@@ -52,7 +52,7 @@
   <div class="form-col-12">
     <label class="form-label">{{t 'general.description'}}:</label>
     <div class="form-data">
-      <span class='description'>{{ learningMaterial.learningMaterial.description }}</span>
+      <span class='description list-reset'>{{{ learningMaterial.learningMaterial.description }}}</span>
     </div>
   </div>
   {{!-- {{#if learningMaterial.learningMaterial.filename}} --}}