HOME

Mini Shell 1.0
DIR:/home/htlwork.com/www/dev/pricelow/app/code/Ves/Megamenu/view/adminhtml/templates/
Current File : /home/htlwork.com/www/dev/pricelow/app/code/Ves/Megamenu/view/adminhtml/templates/editor.phtml
<?php
$editor = $this->helper("Ves\Megamenu\Helper\Editor");
$menu = $block->getMenu();
$structure = json_decode($menu->getStructure(), true);
$menuItems = $menu->getData('menuItems');

$fields = $this->getFields();
$items = [];
if(is_array($structure)){
    foreach ($structure as $k => $v) {
        $items[] = $this->renderMenuItem($v);
    }
}
$html = json_encode($items);
$mediaUrl = $block->getMediaUrl();
?>
<button type="button" id="add-item" data-bind="click: addItem"><?php echo __('Add Menu Item'); ?></button>
<menu id="nestable-menu">
    <button type="button" data-action="expand-all"><?php echo __('Expand All'); ?></button>
    <button type="button" data-action="collapse-all"><?php echo __('Collapse All'); ?></button>
</menu>
<div class="cf nestable-lists">
    <div class="child-translate slide">
        <div class="btn-close"><i class="fa fa-times"></i></div>
        <img src="<?php echo $mediaUrl.'ves/megamenu/MEGAMENU.png' ?>" alt="img-preview"/>
    </div>
    <div class="dd" id="nestable">
        <ol class="dd-list" data-bind="template: { name: 'treeElement', foreach: items }"></ol>
    </div>
    <div class="megamenu-editor" id="megamenu-editor" style="display:none" data-bind="visible: $root.editorVisible" data-mage-init='{"accordion":{"openedState": "active", "collapsible": true, "active": "0", "multipleCollapsible": true}}'>
        <div class="control-group" data-bind="with: itemForEditing">
            <div class="controls" style="margin-bottom: 5px;width: 100%;">
                <button class="btn btn-add" data-bind="click: $root.acceptItem"><?php echo __('Update'); ?></button>
                <button class="btn" data-bind="click: $root.removeItem"><?php echo __('Delete'); ?></button>
                <button class="btn" data-bind="click: $root.revertItem"><?php echo __('Cancel'); ?></button>
                <button class="btn item-structure" onclick="javascript:void(0);"><?php echo __('Structure Preview'); ?></button>
            </div>
            <div>
                <?php echo __('<strong style="color: red;">Important:</strong> Save data of current item before selecting other item or saving menu data. If not, the data will lost.'); ?>
            </div>
        </div>
        <div class="ves-field-list">
            <?php $count = count($fields); ?>
            <?php $hasFieldset = false; ?>
            <?php $i = 0; ?>
            <?php $fieldList = array_values($fields) ?>
            <?php foreach ($fieldList as $k => $v) { ?>

            <?php // FIELD SET + Accordion ?>
            <?php if($v['type'] == 'fieldset'){ ?>
            <?php $hasFieldset = true; ?>
            <div class="ves-fieldset" data-role="collapsible">
                <div data-role="title" class="ves-fieldset-title"><?php echo $v['label'] ?></div>
                <div data-role="content" class="ves-fieldset-content">
                    <?php } ?>

                    <?php if($v['type'] != 'fieldset'){ ?>
                    <div class="control-group <?php echo isset($v['class'])?$v['class']:'' ?>" data-bind="with: itemForEditing">
                        <?php if($v['label']){ ?>
                        <label class="control-label" for="option-<?php echo $k; ?>"><?php echo $v['label'] ?></label>
                        <?php } ?>
                        <div class="controls">
                            <?php echo $editor->renderCellTemplate($v['name']) ?>
                        </div>
                    </div>
                    <?php } ?>

                    <?php // FIELD SET + Accordion ?>
                    <?php if($hasFieldset && ( (isset($fieldList[$i+1]) && $fieldList[$i+1]['type'] == 'fieldset') || $i == ($count-1))){ ?>
                </div><!-- End Content -->
            </div><!-- End Fieldset -->
            <?php } ?>
            <?php $i++; ?> 
            <?php } ?>

            <div data-role="spinner" class="admin__data-grid-loading-mask" data-bind="visible: $root.loading">
                <div class="spinner">
                    <span></span><span></span><span></span><span></span>
                    <span></span><span></span><span></span><span></span>
                </div>
            </div>

        </div>

        <div class="control-group" data-bind="with: itemForEditing">
            <div class="controls">
                <button class="btn btn-add" data-bind="click: $root.acceptItem"><?php echo __('Update'); ?></button>
                <button class="btn" data-bind="click: $root.removeItem"><?php echo __('Delete'); ?></button>
                <button class="btn" data-bind="click: $root.revertItem"><?php echo __('Cancel'); ?></button>
                <button class="btn item-structure" onclick="javascript:void(0);"><?php echo __('Structure Preview'); ?></button>
            </div>
        </div>
    </div>
</div>
<textarea id="nestable-output" name="structure" style="display:none"><?php echo $menu->getStructure(); ?></textarea>
<textarea type="text" name="params" data-bind="text: ko.toJSON(items)" style="display:none"><?php echo $html ?></textarea>
<script id="treeElement" type="text/html">
    <li class="dd-item" data-bind="attr: {'data-id': item_id}" >
        <div class="btn-edit" data-bind="click: $root.selectItem"><i class="fa fa-pencil-square-o"></i></div>
        <div class="btn-remove" data-bind="click: $root.removeItem"><i class="fa fa-times"></i></div>

        <div class="dd-handle" data-bind="html: name"></div>

        <ol class="dd-list" data-bind="template: { name: 'treeElement', foreach: children }"></ol>
    </li>
</script>
<script>
    //window.onload=function(){
        require([
            'ko',
            'Ves_Megamenu/js/jquery.nestable',
            'mage/translate',
            'prototype',
            'mage/adminhtml/events',
            "Ves_Megamenu/js/vesbrowser",
            "mage/adminhtml/wysiwyg/tiny_mce/setup",
            "mage/adminhtml/wysiwyg/widget"
            ], function(ko) {
                var nestablOptions = {        
                    group: 1,
                    maxDepth: 8
                };
                var menuItems = <?php echo $menuItems?json_encode(array_values($menuItems)):'[]'; ?>;
                var actE = [];

                var effect = function(text){
                    if(!jQuery(".ves-notify").hasClass("in")){
                        jQuery(".ves-notify").html(text);
                        jQuery(".ves-notify").addClass('in');
                        setTimeout(function(){
                            jQuery(".ves-notify").removeClass('in');
                            if(!jQuery(".ves-notify").hasClass("out")){
                                jQuery(".ves-notify").addClass('out');
                                setTimeout(function(){
                                    jQuery(".ves-notify").removeClass('out');
                                }, 500);
                            }
                        }, 1000);
                    }
                }

                var updateListData = function(e, eventType){
                    var list   = e.length ? e : jQuery(e.target),
                    output = list.data('output');
                    if (window.JSON) {
                        output.val(window.JSON.stringify(list.nestable('serialize')));
                    } else {
                        output.val('JSON browser support required for this demo.');
                    }
                if(eventType!='add'){
                    jQuery('#nestable .dd-list button[data-action="collapse"]').remove();
                    jQuery('#nestable .dd-list button[data-action="expand"]').remove();
                    jQuery(document).find('.dd-list').each(function (index, element) {
                        if(index!=0){
                            var expandVisible = '';
                            var collapseVisible = '';
                            var eParent = jQuery(element).parent("li");
                            var id = String(eParent.data("id"));
                            if(actE[id] && actE[id] == "1"){
                                expandVisible = 'none';
                                collapseVisible = 'block';
                            }else{
                                expandVisible = 'block';
                                collapseVisible = 'none';
                            }
                            jQuery(element).css({"display":collapseVisible});
                            var expandBtnHTML = '<button data-action="expand" style="display:'+expandVisible+'" type="button"><i class="fa fa-caret-down"></i></button>';
                            var collapseBtnHTML = '<button data-action="collapse" style="display:'+collapseVisible+'" type="button"><i class="fa fa-caret-up"></i></button>';
                            if(jQuery(element).children().length > 0){
                                eParent.prepend(collapseBtnHTML+expandBtnHTML);
                            }
                        }
                    });
                }
            };

            var initialData = <?php echo $html ?>;

            var Item = function(data){
                var d = new Date();
                var id = '_' + d.getTime() + '_' + d.getMilliseconds();
                <?php foreach ($fields as $k => $v) { if($v['type'] == 'fieldset' || $v['type'] == 'separator') continue; ?>
                this.<?php echo $k ?> = ko.observable(data.<?php echo $k ?> || "<?php echo isset($v['value'])?$v['value']:'' ?>");
                <?php } ?>
                if(data.item_id){
                    id = data.item_id;
                }else if(data.id){
                    id = data.id;
                }
                this.item_id = id;
                this.children = data.children && ko.observableArray(data.children);
                this.update(data);
            }


            ko.utils.extend(Item.prototype, {
                //can pass fresh data to this function at anytime to apply updates or revert to a prior version
                update: function(data) { 
                    <?php foreach ($fields as $k => $v) { if($v['type'] == 'fieldset' || $v['type'] == 'separator') continue; ?>
                        if(typeof(this.<?php echo $k ?>) === 'function'){
                            this.<?php echo $k ?>(data.<?php echo $k ?> || "<?php echo isset($v['value'])?$v['value']:'' ?>");
                        }
                    <?php } ?>
                }
            });

            var elementActiveId = '';

            var viewModel = function(items){
                var self = this;
                self.itemForEditing = ko.observable();
                self.selectedItem   = ko.observable();
                self.loading        = ko.observable();
                self.editorVisible  = ko.observable(false);

                self.convertToObject = function(children) {
                    var itemChidrens = [];
                    for (var i = 0; i < children.length; i++) {
                        itemChidrens[i] = new Item(children[i]);
                        if (children[i]['children']) {
                            itemChidrens[i]['children'] = self.convertToObject(children[i]['children']);
                        }
                    }
                    return itemChidrens
                }

                self.items = ko.observableArray(ko.utils.arrayMap(items, function(data){
                    if(data.children) {
                        data.children = self.convertToObject(data.children);
                    }
                    return new Item(data);
                }));

                self.addItem = function(){
                    self.loading(true);
                    setTimeout(function(){
                        self.loading(false);
                    }, 1000);
                    var d = new Date();
                    var id = '_' + d.getTime() + '_' + d.getMilliseconds();
                    var item = new Item({name: "<?php echo __('Menu Item'); ?>", classes: ""});
                    self.editorVisible(true);
                    self.items.push(item);
                    self.selectedItem(item);
                    self.itemForEditing(item);
                    updateListData(jQuery('#nestable').data('output', jQuery('#nestable-output')), 'add');
                    elementActiveId = item.item_id;
                    self.elementActive();
                    var depends = <?php echo json_encode($fields) ?>;

                    <?php //Depend ?>
                    <?php foreach ($fields as $k => $v) { ?>
                        <?php $id = time().rand(); ?>
                        <?php if(isset($v['depend']) && count($v['depend'])>0 && $v['depend']['field']!='' && isset($v['depend']['value'])){ ?>
                            <?php
                            $depends = explode(",", $v['depend']['value']);
                            $dependValues = '';
                            foreach ($depends as $x => $y) {
                                $dependValues .= '"'.$y.'"';
                                if(isset($depends[$x+1])){
                                    $dependValues .= ",";
                                }
                            }
                            ?>
                            var temp<?php echo $id ?> = [<?php echo $dependValues ?>];
                            var val = depends["<?php echo $v['depend']['field']; ?>"]['value'];
                            if(typeof(val)!='undefined'){
                                var i = 0;
                                var isShow = false;
                                for (i; i<temp<?php echo $id ?>.length; i++) {
                                    if(val.toString() == temp<?php echo $id ?>[i].toString()){
                                        isShow = true;
                                    }
                                }
                                if(isShow){    
                                    jQuery(".ves-option-<?php echo str_replace('_', '-', $v['name']) ?>").parents(".control-group").show();
                                }else{
                                    jQuery(".ves-option-<?php echo str_replace('_', '-', $v['name']) ?>").parents(".control-group").hide();
                                }
                            }
                            <?php } ?>    
                            <?php } ?>
                            jQuery("#nestable select").trigger("change");
                            self.reloadEditor();
                            effect("<?php echo __('Item Created'); ?>");
                        };

                        self.removeItem = function(itemSelected){
                            if (confirm("<?php echo __('Are you sure you want to delete this ?'); ?>")) {
                                var menuStructure = JSON.parse(JSON.stringify(jQuery("#nestable").nestable('serialize')));
                                jQuery("[data-id=" + itemSelected.item_id + "]").remove();
                                self.selectedItem(false);
                                self.itemForEditing(false);
                                updateListData(jQuery('#nestable').data('output', jQuery('#nestable-output')));
                                self.firstActive();
                                effect("<?php echo __('Item Deleted'); ?>");
                            }
                        };

                        self.acceptItem = function(item){
                            self.loading(true);
                            self.reloadEditor();
                            setTimeout(function(){
                                self.loading(false);
                            }, 1000);
                            var edited = ko.toJS(self.itemForEditing());
                            var selected = self.selectedItem();

                            selected.update(edited);
                            updateListData(jQuery('#nestable').data('output', jQuery('#nestable-output')));
                            elementActiveId = item.item_id;
                            self.elementActive();
                            effect("<?php echo __('Item Updated'); ?>");
                            self.selectedItem(selected);
                            //self.itemForEditing(ko.toJS(selected));

                            jQuery(".megamenu-editor").find(".ip-color").each(function (index, element) {
                                var bgColor = jQuery(this).val();
                                if(bgColor!=''){
                                    jQuery(this).css({"background-color":bgColor});
                                }
                            });
                        };

                        self.selectItem = function(item){
                            self.loading(true);
                            setTimeout(function(){
                                self.loading(false);
                            }, 1000);
                            self.selectedItem(item);
                            self.itemForEditing(ko.toJS(item));

                            jQuery(".megamenu-editor").find(".ip-color").each(function (index, element) {
                                var bgColor = jQuery(this).val();
                                if(bgColor!=''){
                                    jQuery(this).css({"background-color":bgColor});
                                }
                            });
                            jQuery(".megamenu-editor").find("select").trigger("change");
                            var scrollTop = jQuery(window).scrollTop();
                            if(scrollTop>1000){
                                jQuery('html, body').animate({
                                    scrollTop: jQuery("#megamenu-editor").offset().top - 100
                                }, 1000);
                            }
                            elementActiveId = item.item_id;
                            self.elementActive();
                            self.reloadEditor();
                            effect("<?php echo __('Item Selected'); ?>");
                        };

                        self.revertItem = function(){
                            self.selectedItem(null);
                            self.itemForEditing(null);
                            self.reloadEditor();
                        };

                        self.firstActive = function(item){
                            if(!item){
                                var item = self.items()[0];
                            }
                            if(item){
                                self.editorVisible(true);
                                self.selectedItem(item);
                                self.itemForEditing(item);
                                elementActiveId = item.item_id;
                                self.elementActive();
                            }else{
                                self.selectedItem(false);
                                self.itemForEditing(false);
                            }
                            self.reloadEditor();
                        };
                        self.reloadEditor = function(){
                            var item = ko.toJS(self.itemForEditing());
                            var i = 0;
                            var selectedItem = [];
                            for (i; i < menuItems.length; i++) {
                                if(menuItems[i]['item_id'] == elementActiveId){
                                    selectedItem = menuItems[i];
                                }
                            };
                            setTimeout(function(){
                                jQuery(".megamenu-editor").find(".ves-editor").each(function(index, element){
                                    var id = jQuery(element).attr("id");
                                    if(jQuery('#'+id).length){
                                        var config = <?php echo json_encode($editor->getWysiwygConfig()); ?>, editor;
                                        tinymce.EditorManager.execCommand('mceRemoveEditor',true, id);
                                        tinymce.execCommand('mceRemoveControl', true, id);
                                        var key = jQuery(element).data("key");
                                        config['forced_root_block'] = false;
                                        editor = new wysiwygSetup(id, config);
                                        if(typeof(editor)=='undefined'){
                                            jQuery('.action-wysiwyg').hide();
                                            console.log("\nEditor undefined!");
                                        }
                                            
                                        editor.toggle();
                                        jQuery('#'+id)
                                                .addClass('wysiwyg-editor')
                                                .data(
                                                    'wysiwygEditor',
                                                    editor
                                                );
                                        varienGlobalEvents.clearEventHandlers("open_browser_callback");
                                        varienGlobalEvents.attachEventHandler("open_browser_callback", editor.openFileBrowser);
                                        if(tinyMCE.get(id)){
                                            if(typeof(item[key]) == 'string'){
                                                tinyMCE.get(id).setContent(item[key]);
                                            }else if(selectedItem[key]!=''){
                                                tinyMCE.get(id).setContent(selectedItem[key]);
                                            }else{
                                                tinyMCE.get(id).setContent('');
                                            }
                                        }
                                        console.log("INSTALLED");
                                    }
                                });
                            }, 3000);
                        };
                        self.elementActive = function(){
                            jQuery("#nestable li").removeClass("active");
                            jQuery("#nestable [data-id=" + elementActiveId + "]").addClass("active");
                        };
                        self.firstActive();
                    }
                    var instance = new viewModel(initialData);
                    if(typeof(document.getElementById("menueditor")) !='underfined' && document.getElementById("menueditor")[0]){
                        ko.cleanNode(document.getElementById("menueditor")[0]);
                        ko.cleanNode(document.getElementById("menueditor"));
                        //ko.utils.domData.clear(document.getElementById("menueditor"));
                    }
                    var koNode = document.getElementById('menueditor');
                    var hasDataBinding = !!ko.dataFor(koNode);
                    console.log('has data binding', hasDataBinding);
                    if (!hasDataBinding) { ko.applyBindings(instance, koNode);}

                    jQuery(document).ready(function($){
                        jQuery("body").append("<div class='ves-notify'></div>");
                        jQuery(document).on('click', '.item-structure', function(e){
                            jQuery( '.slide' ).toggleClass("in");
                            return false;
                        });
                        jQuery(document).on('click', '.btn-close', function(e){
                            jQuery( '.slide' ).toggleClass("in");
                            return false;
                        });
                        jQuery(document).on('click', 'button', function(e)
                        {
                            action = jQuery(this).data("action");
                            if (action === 'expand') {
                                var parent = jQuery(this).parent();
                                var id = parent.data("id");
                                actE[id] = "1";
                            }
                            if (action === 'collapse') {
                                var parent = jQuery(this).parent();
                                var id = parent.data("id");
                                actE[id] = "0";
                            }
                        });

                        jQuery('#nestable-menu').on('click', function(e)
                        {
                            var target = jQuery(e.target),
                            action = target.data('action');
                            if (action === 'expand-all') {
                                jQuery('.dd').nestable('expandAll');
                                var i = 0;
                                for (i; i < actE.length; i++) {
                                    actE[i] = "1";
                                };
                            }
                            if (action === 'collapse-all') {
                                jQuery('.dd').nestable('collapseAll');
                                var i = 0;
                                for (i; i < actE.length; i++) {
                                    actE[i] = "0";
                                };
                            }
                        });

                        <?php //Depend ?>
                        <?php foreach ($fields as $k => $v) { ?>
                            <?php $id = time().rand(); ?>
                            <?php if(isset($v['depend']) && count($v['depend'])>0 && $v['depend']['field']!='' && isset($v['depend']['value'])){ ?>
                                <?php
                                $depends = explode(",", $v['depend']['value']);
                                $dependValues = '';
                                foreach ($depends as $x => $y) {
                                    $dependValues .= '"'.$y.'"';
                                    if(isset($depends[$x+1])){
                                        $dependValues .= ",";
                                    }
                                }
                                ?>

                                var temp<?php echo $id ?> = [<?php echo $dependValues ?>];
                                jQuery(document).on("change", ".ves-option-<?php echo str_replace('_', '-', $v['depend']['field']); ?>", function(){
                                    var i = 0;
                                    var isShow = false;
                                    for (i; i<temp<?php echo $id ?>.length; i++) {
                                        if(jQuery(this).val().toString() == temp<?php echo $id ?>[i].toString()){
                                            isShow = true;
                                        }
                                    }
                                    if(isShow){    
                                        jQuery(".ves-option-<?php echo str_replace('_', '-', $v['name']) ?>").parents(".control-group").show();
                                    }else{
                                        jQuery(".ves-option-<?php echo str_replace('_', '-', $v['name']) ?>").parents(".control-group").hide();
                                    }
                                }).change();
                                <?php } ?>    
                                <?php } ?>

                                jQuery('#nestable').nestable(nestablOptions).on('change', updateListData);
                                updateListData(jQuery('#nestable').data('output', jQuery('#nestable-output')));

                                jQuery("#nestable li:first").addClass("active");
                                jQuery(".megamenu-editor").find("select").trigger("change");
                                jQuery(document).on("click", "#insert_files", function(){
                                    jQuery("#mceModalBlocker").remove();
                                });
                            });
});
//};
</script>