Smartphone

Goal

Extend Touch UI Create Page Wizard to select target path

Demo | Package Install | GitHub

Solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de), create folder /apps/eaem-touch-ui-create-page-select-loc

2) Create node /apps/eaem-touch-ui-create-page-select-loc/clientlib of type cq:ClientLibraryFolder, add String property categories with value granite.ui.coral.foundation, String property dependencies with value lodash

3) For the path browser html, create sling:Folder /apps/eaem-touch-ui-create-page-select-loc/content and  nt:unstructured /apps/eaem-touch-ui-create-page-select-loc/content/path with the following xml

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root   
 jcr_primaryType="nt:unstructured"
 sling_resourceType="granite/ui/components/coral/foundation/form/pathbrowser"
 fieldLabel="Path"
 name="eaemPath"
 rootPath="/content"/>

4) Create file (nt:file) /apps/eaem-touch-ui-create-page-select-loc/clientlib/js.txt, add

                       select-loc.js

5) Create file (nt:file) /apps/eaem-touch-ui-create-page-select-loc/clientlib/select-loc.js, add the following code

(function ($, $document) {
 var CREATE_PAGE_WIZARD_URL = "/mnt/overlay/wcm/core/content/sites/createpagewizard.html",
 PATH_BROWSER = "/apps/eaem-touch-ui-create-page-select-loc/content/path.html",
 PATH_BROWSE_NAME = "[name=eaemPath]",
 FORM_CREATE_PAGE = "form.cq-siteadmin-admin-createpage",
 FOUNDATION_CONTENTLOADED = "foundation-contentloaded",
 PARENT_PATH = "parentPath",
 TAGS_FIELD = "[data-fieldname=./cq:tags]";

 if(window.location.pathname.indexOf(CREATE_PAGE_WIZARD_URL) !== 0){
 return;
 }

 $document.on(FOUNDATION_CONTENTLOADED, addPathBrowser);

 function addPathBrowser(){
 if(!_.isEmpty($(PATH_BROWSE_NAME))){
 return;
 }

 $.ajax(PATH_BROWSER).done(handler);

 function handler(html){
 var $tagsField = $(TAGS_FIELD).closest(".foundation-field-editable");

 if(_.isEmpty($tagsField)){
 return;
 }

 var $pathBrowser = $(html).insertAfter($tagsField),
 currentPath = $("[name=" + PARENT_PATH + "]").val();

 $pathBrowser.find(input).val(currentPath);

 $document.trigger(FOUNDATION_CONTENTLOADED);

 $(FORM_CREATE_PAGE).submit(function() {
 $("[name=" + PARENT_PATH + "]").val($pathBrowser.find(input).val());
 });
 }
 }
}(jQuery, jQuery(document)));