legoPro.js

AUI().ready(
    'aui-io-request',
    'datatype-xml',
    'liferay-portlet-url',
    function(A) {
        window.typeList = [
            {
                name: 'Div',
                template: '<div>$</div>',
                type: 'div'
            },
            {
                name: 'Image',
                template: '<img src="$">',
                type: 'img'
            },  
            {
                name: 'Ordered List',
                template: '<ol>$</ol>',
                type: 'ol'
            },
            {
                name: 'List Item',
                template: '<li>$</li>',
                type: 'li'
            },
            {
                name: 'Paragraph',
                template: '<p>$</p>',
                type: 'p'
            },
            {
                name: 'Section',
                template: '<section>$</section>',
                type: 'section'
            },
            {
                name: 'Inline Text',
                template: '<span>$</span>',
                type: 'span'
            },
            {
                name: 'Unordered List',
                template: '<ul>$</ul>',
                type: 'ul'
            }
        ];
        
        window.checkMatrix = function(component, compatabilityObj) {
            var excludeList = compatabilityObj[component];
            var includeList = [];
        
            for (var key in compatabilityObj) {
                for (var x = 0; x < excludeList.length; x++) {
                    if (excludeList[x] === key) {
                        includeList.push(excludeList[x]);
                    }
                }       
            }
            
            return includeList;
        };
        
        window.setTypeList = function(typeListArray, typeSelect) {
            var currentType;
            
            function findType(list) {
                return list.type === currentType;
            }
            
            for (i = 0; i < typeListArray.length; i++) {
                currentType = typeListArray[i];
                
                var typeObject = typeList.find(findType);
                
                typeSelect.appendChild(A.Lang.sub('<option value="{template}">{name}</option>', typeObject));          
            }
        };
                
        window.addElement = function(node, type, relation) {
            if (!node.hasClass('lego-element')) {
                node = node.ancestor('.lego-element');
            }
            
            var newNode = A.Node.create(type);
        
            if (relation == 'child') {
                console.log('add-child');
                node.appendChild(newNode);
            }
            else {
                console.log('add-sibling');
                var parentNode = node.parentNode;
                
                if (parentNode.lastChild == node) {
                    parentNode.appendChild(newNode)
                } else {
                    node.parentNode.insertBefore(newNode, node.nextSibling);
                }  
            }
        }
        
        window.updateElement = function(node, type) {
            var newNode = A.Node.create(type);
            
            newNode.setHTML(node.getHTML);
        
            node.insertBefore(newNode, 'before');
            node.remove(true);
        }
        
        window.init = function() { 
            var body = A.getBody();
    
            body.append('<div id="liveEditProControls"><a href="javascript:;" onclick="liveEditProSave()">Save</a><a href="javascript:;" onclick="liveEditProClear()">Cancel</a></div>');
    
            var liveEditControls = A.one('#liveEditProControls');
    
            body.delegate(
                'focus',
                function(event) {                
                    if (!body.hasClass('controls-visible')) {
                        return;
                    }
    
                    event.preventDefault();
    
                    var node = event.currentTarget;
    
                    if (!node._initialContent) {
                        node._initialContent = node.getContent();
                    }                
                        
                    showMenuButton(node);
                    
                    node.on(
                        'blur',
                        function(event) {
                            node.detach('blur');
                            removeEditMenus();
                        }
                    );
                },
                '.live-edit-pro'
            );
        };
        
        window.legoMenu = '\
            <div class="lego-menu">\
                <a class="lego-menu-toggle" href="javascript:;" onclick="showMenu(this.parentNode, \'.lego-menu-options\')">TripDot</a>\
                <div class="hide lego-menu-options">\
                    <a href="javascript:;" onclick="moveElement(this);">Move</a>\
                    <a href="javascript:;" onclick="revertElement(this);">Revert</a>\
                    <a href="javascript:;" onclick="showMenu(this.parentNode, \'.lego-menu-edit\');">Add</a>\
                    <a href="javascript:;" onclick="showMenu(this.parentNode, \'.lego-menu-edit\');">Edit</a>\
                    <a href="javascript:;" onclick="removeElement(this);">Delete</a>\
                    <ul class="lego-menu-edit hide">\
                        <li>Content</li>\
                        <li>Type</li>\
                        <li>Attributes</li>\
                        <li>Classes</li>\
                        <li>Width</li>\
                    </ul>\
                </div>\
            </div>\
        ';
    
        window.removeEditMenus = function(node) {
            [].forEach.call(document.querySelectorAll('.lego-menu'),function(e){
              e.parentNode.removeChild(e);
            });
        };

        window.removeElement = function(node) {
            var parentNode = node.ancestors('.live-edit-pro');
            
            if (confirm('Are you sure you want to delete this element?') && element) {
                element.parentNode.removeChild(element);
            }
        };
        
        window.revertElement = function(node) {
            var element = node.ancestors('.live-edit-pro');

            if (confirm("Are you sure you want to revert all your changes to this element at it's children?") && element) {
                element.setContent(element._initialContent);
            }
        };
              
        window.showMenuButton = function(node) {
            var elementMenu = node.one('.lego-menu');
            
            if (elementMenu) {
                elementMenu.show();
            }
            else {
                addElement(node, legoMenu, 'child');
            }
        };

        window.showMenu = function(menu, className) {
            var menuElement = A.one(menu).one(className);
            
            if (menuElement) {
               menuElement.toggle();
            }
        };
                 
        window.init();
    }
);