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
