Mathijs den Burger pushed to branch feature/cmng-psp1 at cms-community / hippo-addon-channel-manager
Commits: 64a4ca8b by Mathijs den Burger at 2016-03-09T13:24:51+01:00 CHANNELMGR-373 improve readability of getComponent methods - - - - - 5cec02a4 by Mathijs den Burger at 2016-03-09T13:24:51+01:00 CHANNELMGR-373 use const instead of let - - - - - 9953c1c2 by Mathijs den Burger at 2016-03-09T13:24:51+01:00 CHANNELMGR-373 remove redundant test The second test is just an extended version of the first, so remove the first. - - - - - 8f03bf9b by Mathijs den Burger at 2016-03-09T13:24:51+01:00 CHANNELMGR-481 remove push-width attribute from hippoIframe It's not used anymore, the service is called directly. Also renamed 'updatePushWidth' to 'setPushWidth'. - - - - - 2255d911 by Mathijs den Burger at 2016-03-09T13:24:51+01:00 CHANNELMGR-481 improve wording in comment - - - - - 8175436c by Mathijs den Burger at 2016-03-09T13:24:51+01:00 CHANNELMGR-481 add unit tests for ScalingService - - - - - 11 changed files: - frontend-ng/src/angularjs/channel/channel.controller.js - frontend-ng/src/angularjs/channel/channel.controller.spec.js - frontend-ng/src/angularjs/channel/channel.html - frontend-ng/src/angularjs/channel/hippoIframe/hippoIframe.directive.js - + frontend-ng/src/angularjs/channel/hippoIframe/scaling.service.fixture.html - frontend-ng/src/angularjs/channel/hippoIframe/scaling.service.js - + frontend-ng/src/angularjs/channel/hippoIframe/scaling.service.spec.js - frontend-ng/src/angularjs/channel/page/componentRendering.service.js - frontend-ng/src/angularjs/channel/page/element/containerElement.js - frontend-ng/src/angularjs/channel/page/pageStructure.service.js - frontend-ng/src/angularjs/channel/page/pageStructure.service.spec.js Changes: ===================================== frontend-ng/src/angularjs/channel/channel.controller.js ===================================== --- a/frontend-ng/src/angularjs/channel/channel.controller.js +++ b/frontend-ng/src/angularjs/channel/channel.controller.js @@ -51,7 +51,7 @@ export class ChannelCtrl { this.$mdSidenav(sidenav).close(); } }); - this.ScalingService.updatePushWidth(0); + this.ScalingService.setPushWidth(0); } _createPreviewConfiguration() { @@ -73,7 +73,7 @@ export class ChannelCtrl { } }); this.$mdSidenav(name).toggle(); - this.ScalingService.updatePushWidth(this._isSidenavOpen(name) ? $('.md-sidenav-left').width() : 0); + this.ScalingService.setPushWidth(this._isSidenavOpen(name) ? $('.md-sidenav-left').width() : 0); } getCatalog() { ===================================== frontend-ng/src/angularjs/channel/channel.controller.spec.js ===================================== --- a/frontend-ng/src/angularjs/channel/channel.controller.spec.js +++ b/frontend-ng/src/angularjs/channel/channel.controller.spec.js @@ -49,7 +49,7 @@ describe('ChannelCtrl', function () { ScalingService = jasmine.createSpyObj('ScalingService', [ 'init', - 'updatePushWidth', + 'setPushWidth', ]); ChannelCtrl = $controller('ChannelCtrl', { ===================================== frontend-ng/src/angularjs/channel/channel.html ===================================== --- a/frontend-ng/src/angularjs/channel/channel.html +++ b/frontend-ng/src/angularjs/channel/channel.html @@ -51,8 +51,7 @@ flex layout="row" path="channelCtrl.iframeUrl" - push-width="channelCtrl.pushWidth" select-mode="channelCtrl.isEditMode"> </hippo-iframe> -</md-content> \ No newline at end of file +</md-content> ===================================== frontend-ng/src/angularjs/channel/hippoIframe/hippoIframe.directive.js ===================================== --- a/frontend-ng/src/angularjs/channel/hippoIframe/hippoIframe.directive.js +++ b/frontend-ng/src/angularjs/channel/hippoIframe/hippoIframe.directive.js @@ -23,7 +23,6 @@ export function hippoIframe() { bindToController: { path: '=', selectMode: '=', - pushWidth: '=', }, templateUrl: 'channel/hippoIframe/hippoIframe.html', controller: 'hippoIframeCtrl', ===================================== frontend-ng/src/angularjs/channel/hippoIframe/scaling.service.fixture.html ===================================== --- /dev/null +++ b/frontend-ng/src/angularjs/channel/hippoIframe/scaling.service.fixture.html @@ -0,0 +1,23 @@ +<!-- + ~ Copyright 2016 Hippo B.V. (http://www.onehippo.com) + ~ + ~ Licensed under the Apache License, Version 2.0 (the "License"); + ~ you may not use this file except in compliance with the License. + ~ You may obtain a copy of the License at + ~ + ~ http://www.apache.org/licenses/LICENSE-2.0 + ~ + ~ Unless required by applicable law or agreed to in writing, software + ~ distributed under the License is distributed on an "AS IS" BASIS, + ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + ~ See the License for the specific language governing permissions and + ~ limitations under the License. + --> + +<div id="test-hippo-iframe"> + <div class="channel-iframe-base" style="overflow: auto"> + <div class="channel-iframe-canvas"> + <div class="cm-scale"></div> + </div> + </div> +</div> ===================================== frontend-ng/src/angularjs/channel/hippoIframe/scaling.service.js ===================================== --- a/frontend-ng/src/angularjs/channel/hippoIframe/scaling.service.js +++ b/frontend-ng/src/angularjs/channel/hippoIframe/scaling.service.js @@ -24,7 +24,7 @@ export class ScalingService { this.$rootScope = $rootScope; - this.pushWidth = 0; // all sidenavs are closed to start with + this.pushWidth = 0; // all sidenavs are initially closed this.scaleFactor = 1.0; this.scaleDuration = ANGULAR_MATERIAL_SIDENAV_ANIMATION_DURATION_MS; this.scaleEasing = ANGULAR_MATERIAL_SIDENAV_EASING; @@ -40,18 +40,19 @@ export class ScalingService { init(hippoIframeJQueryElement) { this.hippoIframeJQueryElement = hippoIframeJQueryElement; - this._updateScaling(); } - updatePushWidth(pushWidth) { + setPushWidth(pushWidth) { this.pushWidth = pushWidth; - if (this.hippoIframeJQueryElement) { - this._updateScaling(); - } + this._updateScaling(); } _updateScaling() { + if (!this.hippoIframeJQueryElement) { + return; + } + const iframeBaseJQueryElement = this.hippoIframeJQueryElement.find('.channel-iframe-base'); const elementsToScale = this.hippoIframeJQueryElement.find('.cm-scale'); const canvasWidth = this.hippoIframeJQueryElement.find('.channel-iframe-canvas').width(); ===================================== frontend-ng/src/angularjs/channel/hippoIframe/scaling.service.spec.js ===================================== --- /dev/null +++ b/frontend-ng/src/angularjs/channel/hippoIframe/scaling.service.spec.js @@ -0,0 +1,162 @@ +/* + * Copyright 2016 Hippo B.V. (http://www.onehippo.com) + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +describe('ScalingService', function () { + 'use strict'; + + var ScalingService; + var iframeJQueryElement; + var baseJQueryElement; + var canvasJQueryElement; + var elementsToScale; + + beforeEach(function () { + module('hippo-cm.channel.hippoIframe'); + + inject(function (_ScalingService_) { + ScalingService = _ScalingService_; + }); + + jasmine.getFixtures().load('channel/hippoIframe/scaling.service.fixture.html'); + + iframeJQueryElement = $j('#test-hippo-iframe'); + baseJQueryElement = $j('.channel-iframe-base'); + canvasJQueryElement = $j('.channel-iframe-canvas'); + elementsToScale = jasmine.createSpyObj('elementsToScale', ['velocity']); + + spyOn(iframeJQueryElement, 'find').and.callFake(function (selector) { + return selector === '.cm-scale' ? elementsToScale : $j(selector); + }); + }); + + afterEach(function () { + // prevent subsequent window.resize events by Karma from triggering the scaling service + ScalingService.init(null); + }); + + it('should initialize the scaling factor instantly to 1.0', function () { + ScalingService.init(iframeJQueryElement); + + expect(elementsToScale.velocity).toHaveBeenCalledWith('finish'); + expect(elementsToScale.velocity).toHaveBeenCalledWith( + { + scale: 1.0, + }, + { + duration: 0, + easing: ScalingService.scaleEasing, + } + ); + expect(ScalingService.scaleFactor).toEqual(1.0); + }); + + it('should change the scaling factor animated when setting pushWidth', function () { + canvasJQueryElement.width(400); + + ScalingService.init(iframeJQueryElement); + ScalingService.setPushWidth(100); + + expect(elementsToScale.velocity).toHaveBeenCalledWith('finish'); + expect(elementsToScale.velocity).toHaveBeenCalledWith( + { + scale: 0.75, + }, + { + duration: ScalingService.scaleDuration, + easing: ScalingService.scaleEasing, + } + ); + expect(ScalingService.scaleFactor).toEqual(0.75); + }); + + it('should reset the scaling factor animated to 1.0 when setting pushWidth to 0', function () { + canvasJQueryElement.width(400); + + ScalingService.init(iframeJQueryElement); + ScalingService.setPushWidth(100); + elementsToScale.velocity.calls.reset(); + + ScalingService.setPushWidth(0); + + expect(elementsToScale.velocity).toHaveBeenCalledWith('finish'); + expect(elementsToScale.velocity).toHaveBeenCalledWith( + { + scale: 1.0, + }, + { + duration: ScalingService.scaleDuration, + easing: ScalingService.scaleEasing, + } + ); + expect(ScalingService.scaleFactor).toEqual(1.0); + }); + + it('should change the scaling factor instantly when the window is resized', function () { + canvasJQueryElement.width(200); + ScalingService.init(iframeJQueryElement); + ScalingService.setPushWidth(100); + elementsToScale.velocity.calls.reset(); + + $j(window).resize(); + + expect(elementsToScale.velocity).toHaveBeenCalledWith('finish'); + expect(elementsToScale.velocity).toHaveBeenCalledWith( + { + scale: 0.5, + }, + { + duration: 0, + easing: ScalingService.scaleEasing, + } + ); + expect(ScalingService.scaleFactor).toEqual(0.5); + }); + + it('should update the scroll position instantly while scaling', function () { + canvasJQueryElement.width(400); + + // make the canvas scroll within the base element + baseJQueryElement.height(10); + canvasJQueryElement.height(500); + + baseJQueryElement.scrollTop(100); + + ScalingService.init(iframeJQueryElement); + elementsToScale.velocity.calls.reset(); + + ScalingService.setPushWidth(100); + + expect(elementsToScale.velocity).toHaveBeenCalledWith('finish'); + expect(elementsToScale.velocity).toHaveBeenCalledWith('scroll', { + container: $j('.channel-iframe-base'), + offset: -25, + duration: ScalingService.scaleDuration, + easing: ScalingService.scaleEasing, + queue: false, + }); + expect(elementsToScale.velocity).toHaveBeenCalledWith( + { + scale: 0.75, + }, + { + duration: ScalingService.scaleDuration, + easing: ScalingService.scaleEasing, + } + ); + expect(ScalingService.scaleFactor).toEqual(0.75); + }); + +}); ===================================== frontend-ng/src/angularjs/channel/page/componentRendering.service.js ===================================== --- a/frontend-ng/src/angularjs/channel/page/componentRendering.service.js +++ b/frontend-ng/src/angularjs/channel/page/componentRendering.service.js @@ -47,8 +47,8 @@ export class ComponentRenderingService { const keyValuePairs = []; for (const property in json) { if (json.hasOwnProperty(property)) { - let key = encodeURIComponent(property); - let value = encodeURIComponent(json[property]); + const key = encodeURIComponent(property); + const value = encodeURIComponent(json[property]); keyValuePairs.push(`${key}=${value}`); } } ===================================== frontend-ng/src/angularjs/channel/page/element/containerElement.js ===================================== --- a/frontend-ng/src/angularjs/channel/page/element/containerElement.js +++ b/frontend-ng/src/angularjs/channel/page/element/containerElement.js @@ -53,10 +53,7 @@ export class ContainerElement extends PageStructureElement { } getComponent(componentId) { - const component = this.items.find((item) => { - return item.getId() === componentId; - }); - return angular.isDefined(component) ? component : null; + return this.items.find((item) => item.getId() === componentId); } } ===================================== frontend-ng/src/angularjs/channel/page/pageStructure.service.js ===================================== --- a/frontend-ng/src/angularjs/channel/page/pageStructure.service.js +++ b/frontend-ng/src/angularjs/channel/page/pageStructure.service.js @@ -81,7 +81,7 @@ export class PageStructureService { let component = null; this.containers.some((container) => { component = container.getComponent(componentId); - return component !== null; + return component; }); return component; } ===================================== frontend-ng/src/angularjs/channel/page/pageStructure.service.spec.js ===================================== --- a/frontend-ng/src/angularjs/channel/page/pageStructure.service.spec.js +++ b/frontend-ng/src/angularjs/channel/page/pageStructure.service.spec.js @@ -259,24 +259,6 @@ describe('PageStructureService', function () { }); it('returns a known component', function () { - var container = $j('#container1', $document); - var component = $j('#componentA', $document); - - PageStructureService.registerParsedElement(container[0].previousSibling, { - 'HST-Type': 'CONTAINER_COMPONENT', - }); - PageStructureService.registerParsedElement(component[0].childNodes[0], { - 'HST-Type': 'CONTAINER_ITEM_COMPONENT', - 'HST-Label': 'Test Component', - uuid: '1234', - }); - - component = PageStructureService.getComponent('1234'); - expect(component.getId()).toEqual('1234'); - expect(component.getLabel()).toEqual('Test Component'); - }); - - it('returns a known component when the first container is empty', function () { var emptyContainer = $j('#container1', $document); var filledContainer = $j('#container2', $document); var component = $j('#componentA', $document); View it on GitLab: https://code.onehippo.org/cms-community/hippo-addon-channel-manager/compare/f696d35a4a29edaaa78dab9f4cf8e1aa33c77cd5...8175436c3905f2ed586d532fd6d1c075638b14e7
_______________________________________________ Hippocms-svn mailing list Hippocms-svn@lists.onehippo.org https://lists.onehippo.org/mailman/listinfo/hippocms-svn