medium-editor
Version:
Medium.com WYSIWYG editor clone.
120 lines (106 loc) • 4.01 kB
JavaScript
(function () {
'use strict';
/* Base functionality for an extension which will display
* a 'form' inside the toolbar
*/
var FormExtension = MediumEditor.extensions.button.extend({
init: function () {
MediumEditor.extensions.button.prototype.init.apply(this, arguments);
},
// default labels for the form buttons
formSaveLabel: '✓',
formCloseLabel: '×',
/* activeClass: [string]
* set class which added to shown form
*/
activeClass: 'medium-editor-toolbar-form-active',
/* hasForm: [boolean]
*
* Setting this to true will cause getForm() to be called
* when the toolbar is created, so the form can be appended
* inside the toolbar container
*/
hasForm: true,
/* getForm: [function ()]
*
* When hasForm is true, this function must be implemented
* and return a DOM Element which will be appended to
* the toolbar container. The form should start hidden, and
* the extension can choose when to hide/show it
*/
getForm: function () {},
/* isDisplayed: [function ()]
*
* This function should return true/false reflecting
* whether the form is currently displayed
*/
isDisplayed: function () {
if (this.hasForm) {
return this.getForm().classList.contains(this.activeClass);
}
return false;
},
/* hideForm: [function ()]
*
* This function should show the form element inside
* the toolbar container
*/
showForm: function () {
if (this.hasForm) {
this.getForm().classList.add(this.activeClass);
}
},
/* hideForm: [function ()]
*
* This function should hide the form element inside
* the toolbar container
*/
hideForm: function () {
if (this.hasForm) {
this.getForm().classList.remove(this.activeClass);
}
},
/************************ Helpers ************************
* The following are helpers that are either set by MediumEditor
* during initialization, or are helper methods which either
* route calls to the MediumEditor instance or provide common
* functionality for all form extensions
*********************************************************/
/* showToolbarDefaultActions: [function ()]
*
* Helper method which will turn back the toolbar after canceling
* the customized form
*/
showToolbarDefaultActions: function () {
var toolbar = this.base.getExtensionByName('toolbar');
if (toolbar) {
toolbar.showToolbarDefaultActions();
}
},
/* hideToolbarDefaultActions: [function ()]
*
* Helper function which will hide the default contents of the
* toolbar, but leave the toolbar container in the same state
* to allow a form to display its custom contents inside the toolbar
*/
hideToolbarDefaultActions: function () {
var toolbar = this.base.getExtensionByName('toolbar');
if (toolbar) {
toolbar.hideToolbarDefaultActions();
}
},
/* setToolbarPosition: [function ()]
*
* Helper function which will update the size and position
* of the toolbar based on the toolbar content and the current
* position of the user's selection
*/
setToolbarPosition: function () {
var toolbar = this.base.getExtensionByName('toolbar');
if (toolbar) {
toolbar.setToolbarPosition();
}
}
});
MediumEditor.extensions.form = FormExtension;
})();