Canh Ngo pushed to branch feature/cmng-psp1-CHANNELMGR-467 at cms-community /
hippo-addon-channel-manager
Commits:
d3a6da4c by Canh Ngo at 2016-03-16T15:55:13+01:00
CHANNELMGR-467: fetched new container markup and updated to the DOM as well as
PageStructureService
- - - - -
3 changed files:
- frontend-ng/src/angularjs/channel/page/element/containerElement.js
- frontend-ng/src/angularjs/channel/page/element/pageStructureElement.js
- frontend-ng/src/angularjs/channel/page/pageStructure.service.js
Changes:
=====================================
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
@@ -77,6 +77,27 @@ export class ContainerElement extends PageStructureElement {
}
/**
+ * Replace container DOM elements with the given markup
+ * @return the jQuery element refering to the inserted markup in the DOM
document
+ */
+ replaceDOM(markup) {
+ const jQueryElement = $(markup);
+ const startElement = this.getStartComment()[0];
+ const endElement = this.getEndComment()[0];
+ let element = startElement;
+ const parent = startElement.parentNode;
+
+ // remove everything except the endElement
+ while (element && element !== endElement) {
+ const toBeRemoved = element;
+ element = element.nextSibling;
+ parent.removeChild(toBeRemoved);
+ }
+ this.getEndComment().replaceWith(jQueryElement);
+ return jQueryElement;
+ }
+
+ /**
* Remove the component identified by given Id from its container
* @param componentId
* @returns {*} the removed component
=====================================
frontend-ng/src/angularjs/channel/page/element/pageStructureElement.js
=====================================
--- a/frontend-ng/src/angularjs/channel/page/element/pageStructureElement.js
+++ b/frontend-ng/src/angularjs/channel/page/element/pageStructureElement.js
@@ -102,4 +102,27 @@ export class PageStructureElement {
return metaDataXType !== undefined && metaDataXType.toUpperCase() ===
HstConstants.XTYPE_TRANSPARENT.toUpperCase();
}
+ getStartComment() {
+ return this.getJQueryElement('iframeStartComment');
+ }
+
+ setStartComment(newJQueryStartComment) {
+ this.setJQueryElement('iframeStartComment', newJQueryStartComment);
+ }
+
+ getEndComment() {
+ return this.getJQueryElement('iframeEndComment');
+ }
+
+ setEndComment(newJQueryEndComment) {
+ this.setJQueryElement('iframeEndComment', newJQueryEndComment);
+ }
+
+ getBoxElement() {
+ return this.getJQueryElement('iframeBoxElement');
+ }
+
+ setBoxElement(newJQueryBoxElement) {
+ this.setJQueryElement('iframeBoxElement', newJQueryBoxElement);
+ }
}
=====================================
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
@@ -14,22 +14,26 @@
* limitations under the License.
*/
+/* eslint-disable prefer-arrow-callback */
+
import { ContainerElement } from './element/containerElement';
import { ComponentElement } from './element/componentElement';
export class PageStructureService {
- constructor($log, $q, HstConstants, hstCommentsProcessorService,
ChannelService, CmsService, PageMetaDataService, HstService) {
+ constructor($log, $q, $http, HstConstants, hstCommentsProcessorService,
OverlaySyncService, ChannelService, CmsService, PageMetaDataService,
HstService) {
'ngInject';
// Injected
this.$log = $log;
+ this.$http = $http;
this.$q = $q;
this.HST = HstConstants;
this.HstService = HstService;
this.ChannelService = ChannelService;
this.CmsService = CmsService;
this.hstCommentsProcessorService = hstCommentsProcessorService;
+ this.OverlaySyncService = OverlaySyncService;
this.pageMetaData = PageMetaDataService;
this.clearParsedElements();
@@ -147,26 +151,110 @@ export class PageStructureService {
}
addComponentToContainer(catalogComponent, overlayDomElementOfContainer) {
- const container = this.containers.find((c) =>
c.getJQueryElement('overlay')[0] === overlayDomElementOfContainer);
-
- console.log('container droppped ', overlayDomElementOfContainer);
- if (container) {
- console.log(`Adding '${catalogComponent.label}' component to container
'${container.getLabel()}'.`);
- console.log(catalogComponent, container);
+ const oldContainer = this.containers.find((c) =>
c.getJQueryElement('overlay')[0] === overlayDomElementOfContainer);
- this._createHstComponent(catalogComponent.id, container.getId()).then(()
=> {
- console.log('added component', catalogComponent);
- });
+ console.log('oldContainer droppped ', overlayDomElementOfContainer);
+ if (oldContainer) {
+ console.log(`Adding '${catalogComponent.label}' component to container
'${oldContainer.getLabel()}'.`);
+ console.log(catalogComponent, oldContainer);
- // TODO: tell HST to add a new copy of this.newComponent to container,
- // re-render the container and update the page structure.
- // create a new component in the page structure, and focus on it.
+ this._addHstComponent(catalogComponent, oldContainer.getId()).then(() =>
+ this._fetchContainerMarkup(oldContainer).then((response) => {
+ const jQueryContainerElement =
oldContainer.replaceDOM(response.data);
+ this._replaceContainer(oldContainer,
this._createContainer(jQueryContainerElement.parent()));
+ this.OverlaySyncService.syncIframe();
+ })
+ );
} else {
- console.log('container not found');
+ console.log('oldContainer not found');
+ }
+ }
+
+ _replaceContainer(oldContainer, newContainer) {
+ const index = this.containers.indexOf(oldContainer);
+ if (index === -1) {
+ this.$log.warn('Cannot find container', oldContainer);
+ return;
+ }
+ this.containers[index] = newContainer;
+ }
+
+ _fetchContainerMarkup(container) {
+ return this.$http({
+ method: 'GET',
+ url: container.getRenderUrl(),
+ header: {
+ Accept: 'text/html, */* ',
+ 'Content-Type': 'application/x-www-form-urlencoded',
+ },
+ });
+ }
+
+ /**
+ * Create a new container with meta-data from the given markup value
+ * @param markup
+ * @returns {*}
+ * @private
+ */
+ _createContainer(jQueryContainerElement) {
+ const containerDomElement = jQueryContainerElement[0];
+ let container = null;
+
+ this.hstCommentsProcessorService.run(containerDomElement, function
(commentDomElement, metaData) {
+ switch (metaData[this.HST.TYPE]) {
+ case this.HST.TYPE_CONTAINER:
+ if (!container) {
+ container = new ContainerElement(commentDomElement, metaData,
this.hstCommentsProcessorService);
+ } else {
+ this.$log.warn('More than one container in the DOM Element!');
+ return;
+ }
+ break;
+
+ case this.HST.TYPE_COMPONENT:
+ if (!container) {
+ this.$log.warn('Unable to register component outside of a
container context.');
+ return;
+ }
+
+ try {
+ container.addComponent(new ComponentElement(commentDomElement,
metaData,
+ container, this.hstCommentsProcessorService));
+ } catch (exception) {
+ this.$log.debug(exception, metaData);
+ }
+ break;
+
+ default:
+ break;
+ }
+ }.bind(this));
+
+ if (!container) {
+ this.$log.error('Failed to create a new container');
}
+
+ return container;
}
- _createHstComponent(componentId, containerId) {
- return this.HstService.doPost(containerId, 'create', componentId);
+ /**
+ * Add the component to the container at back-end
+ * @param componentId
+ * @param containerId
+ * @returns {*}
+ * @private
+ */
+ _addHstComponent(catalogComponent, containerId) {
+ const requestPayload = `data: {
+ parentId: ${containerId},
+ id: ${catalogComponent.id},
+ name: ${catalogComponent.name},
+ label: ${catalogComponent.label},
+ type: ${catalogComponent.type},
+ template: ${catalogComponent.template},
+ componentClassName: ${catalogComponent.componentClassName},
+ xtype: ${catalogComponent.xtype},
+ }`;
+ return this.HstService.doPost(requestPayload, containerId, 'create',
catalogComponent.id);
}
}
View it on GitLab:
https://code.onehippo.org/cms-community/hippo-addon-channel-manager/commit/d3a6da4c72079facd58297bfa2bb7ef670e3a731
_______________________________________________
Hippocms-svn mailing list
Hippocms-svn@lists.onehippo.org
https://lists.onehippo.org/mailman/listinfo/hippocms-svn
