diff --git a/design-editor/src/pane/design-editor-element.js b/design-editor/src/pane/design-editor-element.js index ca30308fc..ff7064eb6 100644 --- a/design-editor/src/pane/design-editor-element.js +++ b/design-editor/src/pane/design-editor-element.js @@ -8,6 +8,9 @@ import $ from 'jquery'; import {packageManager, Package} from 'content-manager'; +import fs from 'fs-extra'; +import path, {relative} from 'path'; + import {StateManager} from '../system/state-manager'; import {stageManager} from '../system/stage-manager'; import {SnapGuideManager} from './snap-guide-manager'; @@ -27,8 +30,7 @@ import {Devices} from '../system/devices'; import utils from '../utils/utils'; import iframeUtils from '../utils/iframe'; import pathUtils from '../utils/path-utils'; -import fs from 'fs-extra'; -import path, {relative} from 'path'; +import { containerExpander } from './utils/design-editor-element-utils'; const KEY_CODE = { DELETE: 46 }, INTERNAL_ID_ATTRIBUTE = 'data-id', @@ -53,24 +55,6 @@ const getAppConfig = (app_path) => { }); }; -const changeAppProfile = (app_path, profile) => { - return new Promise((resolve, reject) => { - getAppConfig(app_path).then((res) => { - console.log(`changing profile to: ${ profile } in ${ res.file}`); - const text = res.text.replace(/]+>/gi, ``); - fs.writeFile(res.file, text, (err) => { - if (err) { - reject(err); - } else { - resolve(text); - } - }); - }).catch((err) => { - reject(err); - }); - }); -}; - /** * Toggles/sets parent node modifications for element based on parent-modifiers option from component * @param {jQuery} $element @@ -353,13 +337,16 @@ class DesignEditor extends DressElement { this._tooltipPanel = new TooltipElement(); snapGuides = SnapGuideManager.getInstance().getGuides(); - this._$scroller.append(this._$iframe).append(this._$iframeDummy) + this._$scroller + .append(this._$iframe) + .append(this._$iframeDummy) .append(this._selectLayer) .append(this._sectionController); this.$el.append(this._$designArea); - this._$designArea.append(this._$scroller) + this._$designArea + .append(this._$scroller) .append(this._gridLayer) .append(this._rulerXLayer) .append(this._rulerYLayer) @@ -400,43 +387,6 @@ class DesignEditor extends DressElement { eventEmitter.emit(EVENTS.TAULoaded, tau.version); }); - - /** - * It expands container to the height of - * sum of height of its children to make them possible - * to view and edit in edit mode. - */ - this.containerExpander = { - initialStyle: {}, - element: null, - rollOut: function(element) { - this.element = element; - this.initialStyle.height = element.style.height; - this.initialStyle.overflowY = element.style.overflowY; - - const extendedHeight = [...element.children] - .reduce((acc, value) => acc + parseInt(getComputedStyle(value).height), 0); - - if (extendedHeight > parseInt(this.initialStyle.height)) { - element.style.height = `${extendedHeight}px`; - element.style.overflow = 'hidden'; - } - }, - rollBack: function(elementId) { - if (elementId == this.element.getAttribute('data-id')) { - this.element.style.height = this.initialStyle.height; - this.element.style.overflowY = this.initialStyle.overflowY; - } - - this._reset(); - }, - _reset: function(elementId) { - if (elementId == this.elementId) { - this.initialStyle = {}; - this.elementId = ''; - } - } - }; } /** @@ -1044,7 +994,7 @@ class DesignEditor extends DressElement { if (this.isVisible()) { element = this._getElementById(elementId)[0]; - this.containerExpander.rollOut(element); + containerExpander.rollOut(element); const container = this.getContainerByElement(element); if (container) { @@ -1067,7 +1017,7 @@ class DesignEditor extends DressElement { */ _onDeselectedElement(elementId) { const $element = this._getElementById(elementId); - this.containerExpander.rollBack(elementId); + containerExpander.rollBack(elementId); if ($element.length > 0) { this._selectLayer.hideSelector($element); diff --git a/design-editor/src/pane/utils/design-editor-element-utils.js b/design-editor/src/pane/utils/design-editor-element-utils.js new file mode 100644 index 000000000..699f8e1e2 --- /dev/null +++ b/design-editor/src/pane/utils/design-editor-element-utils.js @@ -0,0 +1,39 @@ +/** + * It expands container to the height of + * sum of height of its children to make them possible + * to view and edit in edit mode. + */ +export const containerExpander = { + initialStyle: {}, + element: null, + wasExtended: false, + rollOut: function(element) { + this._reset(); + + this.element = element; + this.initialStyle.height = element.style.height; + this.initialStyle.overflowY = element.style.overflowY; + + const extendedHeight = [...element.children] + .reduce((acc, value) => acc + parseInt(getComputedStyle(value).height), 0); + + if (extendedHeight > parseInt(this.initialStyle.height)) { + this.wasExtended = true; + element.style.height = `${extendedHeight}px`; + element.style.overflow = 'hidden'; + } + }, + rollBack: function(elementId) { + if (this.wasExtended && elementId == this.element.getAttribute('data-id')) { + this.element.style.height = this.initialStyle.height; + this.element.style.overflowY = this.initialStyle.overflowY; + } + + this._reset(); + }, + _reset: function() { + this.initialStyle = {}; + this.elementId = ''; + this.wasExtended = false; + } +}; diff --git a/test/pane/utils/design-editor-element-utils.test.js b/test/pane/utils/design-editor-element-utils.test.js new file mode 100644 index 000000000..0fa2eea8a --- /dev/null +++ b/test/pane/utils/design-editor-element-utils.test.js @@ -0,0 +1,64 @@ +import { expect } from 'chai'; + +import { containerExpander } from '@/pane/utils/design-editor-element-utils'; + +describe('design-editor-element-utils', () => { + describe('containerExpander', () => { + let container, initialHeight, initialOverflowY; + const getBox = (size) => { + const div = document.createElement('div'); + div.style.height = `${size}px`; + div.style.width = `${size}px`; + + return div; + }; + + const hasInitialStyles = () => { + expect(container.style.height).to.equal(initialHeight); + expect(container.style.overflowY).to.equal(initialOverflowY); + }; + + beforeEach(() => { + const containerId = 'container-1'; + + container = document.createElement('div'); + container.setAttribute('data-id', containerId); + container.style.height = '100px'; + + initialHeight = container.style.height; + initialOverflowY = container.style.overflowY; + }); + + it('expand container to roll out and roll back when it\' height is smaller than its children height', () => { + container.appendChild(getBox(100)); + container.appendChild(getBox(100)); + container.appendChild(getBox(100)); + + containerExpander.rollOut(container); + expect(parseInt(container.style.height)).to.be.above(parseInt('100px')); + + containerExpander.rollBack(container.getAttribute('data-id')); + hasInitialStyles(); + }); + + it('don\'t change style of element whose height is larger or equal than its children\'s height', () => { + container.appendChild(getBox(80)); + + containerExpander.rollOut(container); + hasInitialStyles(); + + containerExpander.rollBack(container.getAttribute('data-id')); + hasInitialStyles(); + }); + + it('doesn\'t roll back element that hasn\'t been rolled out', () => { + containerExpander.rollBack(container.getAttribute('data-id')); + hasInitialStyles(); + expect(containerExpander.wasExtended).to.equal(false); + }); + + it('doesn\'t roll out element that is not a container', () => { + // TODO + }); + }); +});