Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

BTPRO-270 Several formattings on one paragraph lead to bug #60

Closed
wants to merge 1 commit into from

1 participant

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
View
440 lib/booktype/apps/edit/static/edit/js/aloha/plugins/booktype/bookalign/lib/bookalign-plugin.js
@@ -0,0 +1,440 @@
+/* align-plugin.js is part of Aloha Editor project http://aloha-editor.org
+ *
+ * Aloha Editor is a WYSIWYG HTML5 inline editing library and editor.
+ * Copyright (c) 2010-2012 Gentics Software GmbH, Vienna, Austria.
+ * Contributors http://aloha-editor.org/contribution.php
+ *
+ * Aloha Editor is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License
+ * as published by the Free Software Foundation; either version 2
+ * of the License, or any later version.
+ *
+ * Aloha Editor is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
+ *
+ * As an additional permission to the GNU GPL version 2, you may distribute
+ * non-source (e.g., minimized or compacted) forms of the Aloha-Editor
+ * source code without the copy of the GNU GPL normally required,
+ * provided you include this license notice and a URL through which
+ * recipients can access the Corresponding Source.
+ */
+define([
+ 'aloha',
+ 'aloha/plugin',
+ 'ui/ui',
+ 'ui/toggleButton',
+ 'i18n!align/nls/i18n',
+ 'i18n!aloha/nls/i18n',
+ 'jquery',
+ 'PubSub'
+], function(
+ Aloha,
+ Plugin,
+ Ui,
+ ToggleButton,
+ i18n,
+ i18nCore,
+ jQuery,
+ PubSub
+) {
+ 'use strict';
+
+ var GENTICS = window.GENTICS;
+
+ /**
+ * register the plugin with unique name
+ */
+ return Plugin.create('bookalign', {
+ _constructor: function(){
+ this._super('bookalign');
+ },
+ /**
+ * Configuration (available align options)
+ */
+
+ /**
+ * Initialize the plugin and set initialize flag on true
+ */
+ init: function () {
+ this.createButtons();
+ var that = this;
+
+ // apply specific configuration if an editable has been activated
+ Aloha.bind('aloha-editable-activated', function (e, params) {
+ that.applyButtonConfig(params.editable.obj);
+ });
+
+ PubSub.sub('aloha.selection.context-change', function (message) {
+ var rangeObject = message.range;
+
+ if (Aloha.activeEditable) {
+ that.buttonPressed(rangeObject);
+ }
+ });
+ },
+
+ buttonPressed: function (rangeObject) {
+ this.horizontalButtonPressed( rangeObject );
+ this.verticalButtonPressed( rangeObject );
+ },
+
+ horizontalButtonPressed: function(rangeObject) {
+ var that = this;
+
+ this.lastAlignment = this.alignment;
+
+ //reset current alignment
+ this.alignment = '';
+
+ rangeObject.findMarkup(function() {
+ // try to find explicitly defined text-align style property
+ if(this.style.textAlign !== "") {
+ that.alignment = this.style.textAlign;
+ return true;
+ }
+
+ that.alignment = jQuery(this).css('text-align');
+ }, Aloha.activeEditable.obj);
+
+ // set horizontal button states
+ if (this.alignment != this.lastAlignment) {
+ // reset all button states -- it can only be one active...
+ this._alignRightButton.setState(false);
+ this._alignLeftButton.setState(false);
+ this._alignCenterButton.setState(false);
+ this._alignJustifyButton.setState(false);
+
+ switch (this.alignment) {
+ case 'right':
+ this._alignRightButton.setState(true);
+ break;
+ case 'center':
+ this._alignCenterButton.setState(true);
+ break;
+ case 'justify':
+ this._alignJustifyButton.setState(true);
+ break;
+ default:
+ this._alignLeftButton.setState(true);
+ this.alignment = 'left';
+ break;
+ }
+ }
+ },
+
+ verticalButtonPressed: function(rangeObject) {
+ var that = this;
+
+ this.lastVerticalAlignment = this.verticalAlignment;
+
+ //reset current alignment
+ this.verticalAlignment = '';
+
+ rangeObject.findMarkup(function() {
+ // try to find explicitly defined vertical-align style property
+ if(this.style.verticalAlign !== "") {
+ that.verticalAlignment = this.style.verticalAlign;
+ return true;
+ }
+
+ that.verticalAlignment = jQuery(this).css('vertical-align');
+ }, Aloha.activeEditable.obj);
+
+ // set vertical button states
+ if (this.verticalAlignment != this.lastVerticalAlignment) {
+ // reset all button states -- it can only be one active...
+ this._alignTopButton.setState(false);
+ this._alignMiddleButton.setState(false);
+ this._alignBottomButton.setState(false);
+
+ switch (this.verticalAlignment) {
+ case 'top':
+ this._alignTopButton.setState(true);
+ break;
+ case 'middle':
+ this._alignMiddleButton.setState(true);
+ break;
+ case 'bottom':
+ this._alignBottomButton.setState(true);
+ break;
+ default:
+ this._alignTopButton.setState(true);
+ this.verticalAlignment = 'top';
+ break;
+ }
+ }
+ },
+
+ /**
+ * applys a configuration specific for an editable
+ * buttons not available in this configuration are hidden
+ * @param {Object} id of the activated editable
+ * @return void
+ */
+ applyButtonConfig: function (obj) {
+ var config = this.getEditableConfig(obj);
+
+ if ( config && config.alignment && !this.settings.alignment ) {
+ config = config;
+ } else if ( config[0] && config[0].alignment) {
+ config = config[0];
+ } else if ( this.settings.alignment ) {
+ config.alignment = this.settings.alignment;
+ }
+
+ if (typeof config.alignment === 'undefined') {
+ config = this.config;
+ }
+
+ if ( jQuery.inArray('right', config.alignment) != -1) {
+ this._alignRightButton.show(true);
+ } else {
+ this._alignRightButton.show(false);
+ }
+
+ if ( jQuery.inArray('left', config.alignment) != -1) {
+ this._alignLeftButton.show(true);
+ } else {
+ this._alignLeftButton.show(false);
+ }
+
+ if ( jQuery.inArray('center', config.alignment) != -1) {
+ this._alignCenterButton.show(true);
+ } else {
+ this._alignCenterButton.show(false);
+ }
+
+ if ( jQuery.inArray('justify', config.alignment) != -1) {
+ this._alignJustifyButton.show(true);
+ } else {
+ this._alignJustifyButton.show(false);
+ }
+
+ if ( jQuery.inArray('top', config.alignment) != -1) {
+ this._alignTopButton.show(true);
+ } else {
+ this._alignTopButton.show(false);
+ }
+
+ if ( jQuery.inArray('middle', config.alignment) != -1) {
+ this._alignMiddleButton.show(true);
+ } else {
+ this._alignMiddleButton.show(false);
+ }
+
+ if ( jQuery.inArray('bottom', config.alignment) != -1) {
+ this._alignBottomButton.show(true);
+ } else {
+ this._alignBottomButton.show(false);
+ }
+ },
+
+ createButtons: function () {
+ var that = this;
+
+ this._alignLeftButton = Ui.adopt("alignLeft", ToggleButton, {
+ tooltip: i18n.t('button.alignleft.tooltip'),
+ icon: 'aloha-icon aloha-icon-align aloha-icon-align-left',
+ scope: 'Aloha.continuoustext',
+ click: function(){ that.align('left'); }
+ });
+
+ this._alignCenterButton = Ui.adopt("alignCenter", ToggleButton, {
+ tooltip: i18n.t('button.aligncenter.tooltip'),
+ icon: 'aloha-icon aloha-icon-align aloha-icon-align-center',
+ scope: 'Aloha.continuoustext',
+ click: function(){ that.align('center'); }
+ });
+
+ this._alignRightButton = Ui.adopt("alignRight", ToggleButton, {
+ tooltip: i18n.t('button.alignright.tooltip'),
+ icon: 'aloha-icon aloha-icon-align aloha-icon-align-right',
+ scope: 'Aloha.continuoustext',
+ click: function(){ that.align('right'); }
+ });
+
+ this._alignJustifyButton = Ui.adopt("alignJustify", ToggleButton, {
+ tooltip: i18n.t('button.alignjustify.tooltip'),
+ icon: 'aloha-icon aloha-icon-align aloha-icon-align-justify',
+ scope: 'Aloha.continuoustext',
+ click: function(){ that.align('justify'); }
+ });
+
+ this._alignTopButton = Ui.adopt("alignTop", ToggleButton, {
+ tooltip: i18n.t('button.aligntop.tooltip'),
+ icon: 'aloha-icon aloha-icon-align aloha-icon-align-top',
+ scope: 'table.cell',
+ click: function(){ that.verticalAlign('top'); }
+ });
+
+ this._alignMiddleButton = Ui.adopt("alignMiddle", ToggleButton, {
+ tooltip: i18n.t('button.alignmiddle.tooltip'),
+ icon: 'aloha-icon aloha-icon-align aloha-icon-align-middle',
+ scope: 'table.cell',
+ click: function(){ that.verticalAlign('middle'); }
+ });
+
+ this._alignBottomButton = Ui.adopt("alignBottom", ToggleButton, {
+ tooltip: i18n.t('button.alignbottom.tooltip'),
+ icon: 'aloha-icon aloha-icon-align aloha-icon-align-bottom',
+ scope: 'table.cell',
+ click: function(){ that.verticalAlign('bottom'); }
+ });
+
+ },
+
+ verticalAlign: function ( tempAlignment ) {
+
+ var that = this;
+ var range = Aloha.Selection.getRangeObject();
+
+ this.lastVerticalAlignment = this.verticalAlignment;
+ this.verticalAlignment = tempAlignment;
+
+ // check if the selection range is inside a table
+ var selectedCells = this.getSelectedCells( range );
+
+ if ( selectedCells ) {
+ that.toggleAlign ( selectedCells, 'vertical-align');
+ }
+
+ // reset previous button states
+ if ( this.verticalAlignment != this.lastVerticalAlignment ) {
+ switch ( this.lastVerticalAlignment ) {
+ case 'top':
+ this._alignTopButton.setState(false);
+ break;
+
+ case 'middle':
+ this._alignMiddleButton.setState(false);
+ break;
+
+ case 'bottom':
+ this._alignBottomButton.setState(false);
+ break;
+ }
+ }
+
+ // select the (possibly modified) range
+ range.select();
+
+ },
+
+ /**
+ * Align the selection or remove it
+ */
+ align: function ( tempAlignment ) {
+ var that = this;
+ var range = Aloha.Selection.getRangeObject();
+
+ this.lastAlignment = this.alignment;
+ this.alignment = tempAlignment;
+
+ var rangeParent = range.getCommonAncestorContainer();
+
+ // check if the selection range is inside a table
+ var selectedCells = this.getSelectedCells( range );
+
+ if ( selectedCells ) {
+ that.toggleAlign( selectedCells );
+ } else if (!GENTICS.Utils.Dom.isEditingHost(rangeParent)) {
+
+ // if the parent node is not the main editable node and align
+ // OR iterates the whole selectionTree and align
+ that.toggleAlign( rangeParent );
+ } else {
+ var alignableElements = [];
+ jQuery.each(Aloha.Selection.getRangeObject().getSelectionTree(), function () {
+ if (this.selection !== 'none' && this.domobj.nodeType !== 3) {
+ alignableElements.push( this.domobj );
+ }
+ });
+
+ that.toggleAlign( alignableElements );
+ }
+
+ // reset previous button states
+ if ( this.alignment != this.lastAlignment ) {
+ switch ( this.lastAlignment ) {
+ case 'right':
+ this._alignRightButton.setState(false);
+ break;
+
+ case 'left':
+ this._alignLeftButton.setState(false);
+ break;
+
+ case 'center':
+ this._alignCenterButton.setState(false);
+ break;
+
+ case 'justify':
+ this._alignJustifyButton.setState(false);
+ break;
+ }
+ }
+
+ // select the (possibly modified) range
+ range.select();
+
+ },
+
+ getSelectedCells: function( range ) {
+
+ var selectedCell;
+
+ var activeTable = range.findMarkup(function() {
+ if ( jQuery(this).is( 'td,th' ) ) {
+ selectedCell = this;
+ }
+ return jQuery( this ).is( 'table.aloha-table' );
+ }, Aloha.activeEditable.obj);
+
+ var selectedCells = jQuery( activeTable ).find( '.aloha-cell-selected' );
+
+ return ( selectedCells.length ? selectedCells : selectedCell );
+
+ },
+
+
+ toggleAlign: function ( domObj, property ) {
+
+ var that = this;
+
+ property = property || 'text-align';
+
+ var newAlignment = ( property === 'vertical-align' ) ? that.verticalAlignment : that.alignment;
+
+ var rangeObject = Aloha.Selection.getRangeObject();
+ var common = rangeObject.getCommonAncestorContainer();
+ var limit = Aloha.activeEditable.obj;
+ var markup = jQuery("<p>");
+ var nodeName = markup.get(0).nodeName;
+ var highestObject, root, rangeTree;
+ highestObject = GENTICS.Utils.Dom.findHighestElement(common, nodeName, limit);
+ root = highestObject ? highestObject.parentNode : common;
+ rangeTree = rangeObject.getRangeTree(root);
+ jQuery.each(rangeTree,function(cnt,el){
+ if(el.type!=="none"){
+ var currentAlignment = jQuery(el.domobj).css( property );
+ console.log(currentAlignment);
+ console.log(newAlignment);
+ if ( currentAlignment === newAlignment ) {
+ jQuery(el.domobj).css( property, '' );
+ } else {
+ jQuery(el.domobj).css( property, newAlignment );
+ }
+ }
+ });
+
+ }
+
+ });
+
+});
View
2  lib/booktype/apps/edit/templates/edit/aloha_header.html
@@ -147,6 +147,7 @@
booktype/font,
booktype/indent,
booktype/styling,
+ booktype/bookalign,
common/undo,
booktype/bookundo,
common/list,
@@ -156,7 +157,6 @@
common/contenthandler,
common/paste,
common/commands,
- common/align,
booktype/imagesimple,
booktype/simpletable"></script>
Something went wrong with that request. Please try again.