sheercms/static/routes/menus/menus.html

Sheer Cliff CMS is a simple and powerful content management system (CMS) for Node JS.

<div class="row main-container main-view">
    <div class="main-view-left">

        <div class="group-list">

            <div class="toolbar no-border">
                <ul>
                    <li ng-show="buttons.newMenu === true">
                        <a href="javascript:void(0);" title="Create a new menu" ng-click="showNewMenu()">
                            <img src="/cms/static/images/icons/32/menu.png" alt="New Menu"/>
                            <span>New Menu</span>
                        </a>
                    </li>
                    <li ng-show="buttons.refresh === true">
                        <a href="javascript:void(0);" title="Reload the menu list" ng-click="refresh()">
                            <img src="/cms/static/images/icons/32/update.png" alt="Refresh"/>
                            <span>Refresh</span>
                        </a>
                    </li>
                </ul>
            </div>

            <a ng-repeat="menu in data.menus" ng-click="changeMenu(menu)" ng-class="{selected: data.selectedId == menu._id }">
                <div>
                    <strong>{{menu.name}}</strong>
                    <span ng-if="menu.itemCount === 1">1 item</span>
                    <span ng-if="menu.itemCount !== 1">{{menu.itemCount}} items</span>
                </div>
            </a>

        </div>
    </div>
    <div class="main-view-center">
        <div class="toolbar">
            <ul>
                <li ng-show="buttons.back === true">
                    <a href="javascript:void(0);" title="Go back one level" ng-click="back()" ng-disabled="data.levels.length == 0">
                        <img src="/cms/static/images/icons/32/back_arrow.png" alt="Back"/>
                        <span>Back</span>
                    </a>
                </li>
                <li ng-show="buttons.addItem === true">
                    <a href="javascript:void(0);" title="Add an item to this menu" ng-click="addItem()">
                        <img src="/cms/static/images/icons/32/page_white_add.png" alt="Add Menu Item"/>
                        <span>Add Item</span>
                    </a>
                </li>
                <li ng-show="buttons.save === true">
                    <a href="javascript:void(0);" title="Save this menu" ng-click="saveMenu()">
                        <img src="/cms/static/images/icons/32/accept.png" alt="Save"/>
                        <span>Save</span>
                    </a>
                </li>
                <li ng-show="buttons.properties === true">
                    <a href="javascript:void(0);" title="Edit the menu properties" ng-click="props()">
                        <img src="/cms/static/images/icons/32/cog_edit.png" alt="Properties"/>
                        <span>Properties</span>
                    </a>
                </li>
                <li ng-show="buttons.delete === true">
                    <a href="javascript:void(0);" title="Delete this menu" ng-click="deleteMenu()">
                        <img src="/cms/static/images/icons/32/delete.png" alt="Delete"/>
                        <span>Delete</span>
                    </a>
                </li>

            </ul>
        </div>
        <div id="menus-page" class="main-content">

            <h3>{{data.title}}</h3>

            <div ng-if="data.message != null && data.message.length > 0">
                <div class="alert {{data.messageType}} max-width-medium">{{data.message}}</div>
            </div>

            <div ng-if="data.menus.length == 0">
                <div class="alert alert-warning max-width-medium">There are currently no menus.  <a href="javascript:void(0);" ng-click="showNewMenu()">Create a new menu.</a></div>
            </div>

            <div ng-if="data.editMenu == null">
                <div class="alert alert-info max-width-medium">Select a menu from the list or <a href="javascript:void(0);" ng-click="showNewMenu()">create a new menu.</a></div>
            </div>

            <div ng-if="data.editMenu != null">

                <div ng-if="data.parent.items == null || data.parent.items.length == 0">
                    <div class="alert alert-warning">There are currently no menus items on this menu.  <a href="javascript:void(0);" ng-click="addItem()">Add a menu item or page.</a></div>
                </div>

                <div ng-if="data.levels && data.levels.length > 0" class="breadcrumb-container">
                    <strong>Menu Path:</strong>
                    <ul class="breadcrumbs">
                        <li ng-repeat="item in data.levels">
                            <span ng-if="$index < data.levels.length - 1">
                                <a href="javascript:void(0);" ng-click="back($index)">{{item.text}}</a>
                                &raquo;
                            </span>
                            <span ng-if="$index == data.levels.length - 1">
                                <span class="last-crumb">{{item.text}}</span>
                            </span>
                        </li>
                    </ul>
                </div>

                <div ng-if="data.parent.items != null && data.parent.items.length > 0">
                    <table class="table table-click table-bordered">
                        <thead>
                        <tr>
                            <th style="width:24px;"><input type="checkbox" /></th>
                            <th>Text / URL</th>
                            <th style="width:100px;">Target</th>
                            <th style="width:160px;">Class</th>
                            <th style="width:80px;" class="center">Children</th>
                            <th style="width:180px;" class="center">Actions</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr ng-if="data.editMenu != data.parent">
                            <td>&nbsp;</td>
                            <td>
                                <img class="icon" ng-src="{{data.menuIcon}}" />
                                <div class="two-rows">
                                    <div class="row1"><strong>{{data.parent.text}}</strong></div>
                                    <div class="row2">{{data.parent.url}}</div>
                                </div>
                            </td>
                            <td>{{data.parent.target}}</td>
                            <td>{{data.parent.class}}</td>
                            <td class="center">{{data.parent.childCount}}</td>
                            <td class="actions center">
                                <i class="fa fa-arrow-up disabled" title="Move up" ng-click="move('up', $index)"></i>
                                <i class="fa fa-arrow-down disabled" title="Move down" ng-click="move('down', $index)"></i>
                                <i class="fa fa-gear" title="Edit the menu item properties" ng-click="editItem(data.parent)"></i>
                                <i class="fa fa-plus" title="Add a child menu item" ng-click="addItem(data.parent)"></i>
                                <i class="fa fa-trash-o" title="Remove this menu item" ng-click="removeItem(data.parent)"></i>
                            </td>
                        </tr>
                        <tr ng-repeat="item in data.parent.items">
                            <td><input type="checkbox" /></td>
                            <td>
                                <span class="expander" ng-if="item != data.parent">
                                    <img src="/cms/static/images/arrow_expand.png" alt="Expand" title="View this item's children" ng-click="expand(item)" ng-if="item.childCount > 0" />
                                </span>
                                <img class="icon" ng-src="{{data.menuIcon}}" />
                                <div class="two-rows">
                                    <div class="row1"><strong>{{item.text}}</strong></div>
                                    <div class="row2">{{item.url}}</div>
                                </div>
                            </td>
                            <td>{{item.target}}</td>
                            <td>{{item.class}}</td>
                            <td class="center">{{item.childCount}}</td>
                            <td class="actions center">
                                <i class="fa fa-arrow-up" ng-class="{disabled: $index == 0}" title="Move up" ng-click="move('up', $index)"></i>
                                <i class="fa fa-arrow-down" ng-class="{disabled: $index == data.parent.items.length - 1}" title="Move down" ng-click="move('down', $index)"></i>
                                <i class="fa fa-gear" title="Edit the menu item properties" ng-click="editItem(item)"></i>
                                <i class="fa fa-plus" title="Add a child menu item" ng-click="addItem(item)"></i>
                                <i class="fa fa-trash-o" title="Remove this menu item" ng-click="removeItem(item)"></i>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

            </div>
        </div>
    </div>
</div>

<script type="text/ng-template" id="MenuItemDialog">
    <div class="modal-header">
        <button type="button" class="close" aria-hidden="true" ng-click="cancel()">&times;</button>
        <h4 class="modal-title">Menu Item Properties</h4>
    </div>
    <div class="modal-body">
        <div class="form-group">
            <label>Text</label>
            <input type="text" class="form-control" ng-model="data.item.text" ng-required="true" />
        </div>
        <div class="form-group">
            <label>Select a Page</label>
            <item-selector value="data.contentItem" branch="content" title="Select a content item"></item-selector>
        </div>
        <div class="form-group">
            <label>URL</label>
            <input type="text" class="form-control" ng-model="data.item.url" placeholder="example: http://www.website.com/services/delivery" />
        </div>
        <div class="form-group">
            <label>Tooltip</label>
            <input type="text" class="form-control" ng-model="data.item.tooltip" />
        </div>
        <div class="form-group">
            <label>Css Class</label>
            <input type="text" class="form-control" ng-model="data.item.class" />
        </div>
        <div class="form-group">
            <div class="checkbox">
                <label>
                    <input type="checkbox" ng-model="data.newWindow"> Open in a new window
                </label>
            </div>
        </div>

    </div>
    <div class="modal-footer">
        <button type="submit" class="btn btn-primary" ng-click="ok()" style="width:60px;">OK</button>
        <button type="button" class="btn btn-default" ng-click="cancel()">Close</button>
    </div>
</script>


<script type="text/ng-template" id="MenuPropsDialog">
    <div class="modal-header">
        <button type="button" class="close" aria-hidden="true" ng-click="cancel()">&times;</button>
        <h4 class="modal-title">Menu Properties</h4>
    </div>
    <div class="modal-body">
        <div class="form-group">
            <label>Name</label>
            <input type="text" class="form-control" ng-model="menu.name" ng-required="true" />
        </div>
        <div class="form-group">
            <label>Template</label>
            <div>
                <select ng-if="templates.length > 0" ng-model="menu.templateId" ng-options="a._id as a.name for a in templates">
                </select>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button type="submit" class="btn btn-primary" ng-click="ok()" style="width:60px;">OK</button>
        <button type="button" class="btn btn-default" ng-click="cancel()">Close</button>
    </div>
</script>