ucan-ext-js-kitchen-sink/packages/local/nativeFroala/src/nativeFroala.js

my-ext-gen-app description for Ext JS app MyExtGenApp

Ext.define('UCAN.nativeFroala.src.nativeFroala', {
  extend: 'Ext.field.Field',
  xtype: 'ucanNativeFroala',
  cls: 'ucan-native-froala',

  config: {
    disabled: false,
    editorConfig: null,
    dynamicEditorConfig: null,
    hasDynamicConfig: null,
    froalaEditor: null,
    value: null,
    configReady: false,
    froalaInitialized: false,
    hideToolbarInitially: false,
    autoHideToolbar: false,
    focusInitially: false
  },

  publishes: {
    value: true,
    hideToolbarInitially: true
  },

  twoWayBindable: {
    value: true
  },

  element: {
    cls: 'native-froala',
    reference: 'element',
    children: [
      {
        reference: 'editorElement',
        classList: ['native-froala']
      }
    ]
  },

  listeners: {
    destroy: function() {
      if (!Ext.isEmpty(this.getFroalaEditor())) {
        this.getFroalaEditor().destroy();
      }
    }
  },

  createFroala: function() {
    const callback = this.callback;
    const comp = this;
    const config = Ext.apply(this.getEditorConfig(), this.getDynamicEditorConfig());
    const froalaConfig = Ext.apply({key: 'TEB9iD7E5C5A4F4B2c1JWSDBCQJ1ZGDa1F1c1JXDAAOZWJhB3D3C10B5C3B4B4F3E3H3=='}, config);
    this.setFroalaEditor(new FroalaEditor(this.getFroalaEditorDomElement(), froalaConfig, function() {
      comp.setFroalaInitialized(true);
      callback(this);
    }));
    this.getFroalaEditor().component = this;
  },

  callback: function(froala) {
    const comp = froala.component;
    comp.updateDisabled(comp.getDisabled());
    comp.updateValue(comp.getValue());
    if (comp.getHideToolbarInitially()) {
      comp.hideToolbar(froala);
    }
    if (comp.getFocusInitially()) {
      comp.focusFroalaEditor(false);
    }
    if (!Ext.isEmpty(froala.wiris) && !Ext.isEmpty(froala.wiris._init)) {
      froala.wiris._init();
    }
    comp.fireEvent('froalaInitialized', comp, froala);
  },

  focusFroalaEditor: function(start) {
    const editor = this.getFroalaEditor();
    if (start) {
      editor.selection.setAtStart(editor.$el.get(0));
    } else {
      editor.selection.setAtEnd(editor.$el.get(0));
    }
    editor.selection.restore();
  },

  hideToolbar: function(froala) {
    froala.toolbar.hide();
    this.setHideToolbarInitially(false);
  },

  updateDisabled: function(disabled) {
    if (this.getFroalaInitialized() && !Ext.isEmpty(this.getFroalaEditor()) && !Ext.isEmpty(this.getFroalaEditor().edit)) {
      if (disabled) {
        this.getFroalaEditor().edit.off();
      } else {
        this.getFroalaEditor().edit.on();
      }
    }
  },

  isBlockSelected: function(index) {
    const editor = this.getFroalaEditor();
    if (this.getFroalaEditor().selection.blocks().length !== 1) {
      return false;
    } else {
      const htmlBlocks = editor.html.blocks();
      const selectedBlock = editor.selection.blocks().at(0);
      if (index === -1) {
        // Shortcut for last element
        return htmlBlocks.item(htmlBlocks.length - 1).isEqualNode(selectedBlock);
      } else {
        return htmlBlocks.item(index).isEqualNode(selectedBlock);
      }
    }
  },

  updateValue: function(value) {
    const froala = this.getFroalaEditor();
    if (this.getFroalaInitialized() && !Ext.isEmpty(froala) && !Ext.isEmpty(froala.edit)) {
      if ((value || value === '') && (value !== froala.html.get(true))) {
        froala.html.set(this.getValue());
      }
    }
  },

  constructor: function(config) {
    this.callParent([config]);
    this.editorElement.on({
      keyup: 'onKeyUp',
      scope: this
    });
    this.editorElement.on({
      focusenter: 'onFocusEnter',
      scope: this
    });
    this.editorElement.on({
      focusleave: 'onFocusLeave',
      scope: this
    });
    Ext.getBody().appendChild(this.element.dom);
    this.setConfigReady(!this.getHasDynamicConfig());
    this.setFroalaInitialized(false);
    this.onRender = function() {
      if (Ext.isEmpty(this.getFroalaEditor())) {
        this.checkCreateFroala();
      }
    }
  },

  checkCreateFroala: function() {
    if (this.getConfigReady()) {
      if (!Ext.isEmpty(this.getFroalaEditor())) {
        this.getFroalaEditor().destroy();
      }
      this.createFroala();
    }
  },

  onKeyUp: function() {
    if (this.getFroalaInitialized()) {
      this.setValue(this.getFroalaEditor().html.get(true));
    }
  },

  onFocusEnter: function() {
    this.getFroalaEditor().toolbar.show();
  },

  onFocusLeave: function() {
    if (this.getAutoHideToolbar() && !document.activeElement.classList.contains('fr-btn')
        && !document.activeElement.classList.contains('fr-btn-active-popup') && !document.activeElement.classList.contains('fr-command')) {
      this.getFroalaEditor().toolbar.hide();
    }
    // Workaround for ensuring that value is saved in component
    this.setValue(this.getFroalaEditor().html.get(true));
  },

  updateDynamicEditorConfig: function() {
    this.setConfigReady(true);
    this.checkCreateFroala();
  },

  getFroalaEditorDomElement: function() {
    if (!Ext.isEmpty(this.editorElement)) {
      return this.editorElement.dom;
    }
  }

});