sheercms/static/routes/content/content.html

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

<div class="row main-view main-container">
    <div class="main-view-left">
        <div class="toolbar no-border">
            <ul>
                <li ng-show="buttons.newGroup === true">
                    <a href="javascript:void(0);" title="Create a new item group" ng-click="showNewGroup()">
                        <img src="/cms/static/images/icons/32/page_white_stack_add.png" alt="New Group"/>
                        <span>New Group</span>
                    </a>
                </li>
                <li ng-show="buttons.refreshGroups === true">
                    <a href="javascript:void(0);" title="Reload the group list" ng-click="refreshGroups()">
                        <img src="/cms/static/images/icons/32/update.png" alt="Refresh Groups"/>
                        <span>Refresh</span>
                    </a>
                </li>
                <li ng-show="buttons.reorderGroups === true">
                    <a href="javascript:void(0);" title="Reorder the groups" ng-click="reorderGroups()">
                        <img src="/cms/static/images/icons/32/up_down.png" alt="Reorder Groups"/>
                        <span>Reorder</span>
                    </a>
                </li>
                <li ng-show="buttons.saveGroupOrder === true">
                    <a href="javascript:void(0);" title="Save the new group order" ng-click="saveGroupOrder()">
                        <img src="/cms/static/images/icons/32/tick.png" alt="Save Order"/>
                        <span>Save Order</span>
                    </a>
                </li>
                <li ng-show="buttons.cancelGroupOrder === true">
                    <a href="javascript:void(0);" title="Cancel the new group order" ng-click="cancelGroupOrder()">
                        <img src="/cms/static/images/icons/32/cancel.png" alt="Cancel Order"/>
                        <span>Cancel Order</span>
                    </a>
                </li>
            </ul>
        </div>

        <div class="group-list" ui-sortable="groupSortableOptions" ng-model="data.groups">
            <a ng-repeat="group in data.groups" ng-click="changeGroup(group)" ng-dblclick="editGroup(group)" ng-class="{selected: data.group._id == group._id}">
                <img ng-src="{{group.icon}}" alt="{{group.name}}" />
                <div>
                    <strong>{{group.name}}</strong>
                    <span>{{group.itemCount}} items</span>
                </div>
                <i ng-show="buttons.saveGroupOrder === true" class="fa fa-arrows-v"></i>
            </a>
        </div>

    </div>
    <div class="main-view-center">
        <div class="toolbar">
            <ul>
                <li ng-show="buttons.newItem === true">
                    <a href="javascript:void(0);" title="Create a new content item" ng-click="showNewItem()">
                        <img src="/cms/static/images/icons/32/page_white_add.png" alt="New Item"/>
                        <span>New Item</span>
                    </a>
                </li>
                <li ng-show="buttons.upload === true">
                    <a href="javascript:void(0);" title="Upload files and images" ng-click="showUpload()">
                        <img src="/cms/static/images/icons/32/upload.png" alt="Upload"/>
                        <span>Upload</span>
                    </a>
                </li>
                <li ng-show="buttons.publish === true">
                    <a href="javascript:void(0);" title="Publish the selected items" ng-click="publishItems()">
                        <img src="/cms/static/images/icons/32/world_go.png" alt="Publish"/>
                        <span>Publish</span>
                    </a>
                </li>
                <li ng-show="buttons.unpublish === true">
                    <a href="javascript:void(0);" title="Un-Publish the selected items" ng-click="unPublishItems()">
                        <img src="/cms/static/images/icons/32/world_delete.png" alt="Un-Publish"/>
                        <span>Un-Publish</span>
                    </a>
                </li>
                <li ng-show="buttons.delete === true">
                    <a href="javascript:void(0);" title="Delete the selected items" ng-click="deleteItems()">
                        <img src="/cms/static/images/icons/32/delete.png" alt="Delete"/>
                        <span>Delete</span>
                    </a>
                </li>
                <li ng-show="buttons.restore === true">
                    <a href="javascript:void(0);" title="Restore the selected deleted items to a saved status" ng-click="restoreItems()">
                        <img src="/cms/static/images/icons/32/page_white_wrench.png" alt="Restore"/>
                        <span>Restore</span>
                    </a>
                </li>
                <li ng-show="buttons.move === true">
                    <a href="javascript:void(0);" title="Move items to another group" ng-click="moveItems()">
                        <img src="/cms/static/images/icons/32/page_white_go.png" alt="Move Items"/>
                        <span>Move Items</span>
                    </a>
                </li>
                <li ng-show="buttons.refresh === true">
                    <a href="javascript:void(0);" title="Reload the content list" ng-click="refresh()">
                        <img src="/cms/static/images/icons/32/update.png" alt="Refresh"/>
                        <span>Refresh</span>
                    </a>
                </li>
            </ul>
        </div>

        <div class="main-content">

            <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.group === null">
                <div ng-if="data.groups.length > 0" class="alert alert-warning max-width-medium">Select a group on the left to view its items.</div>
                <div ng-if="data.groups === null || data.groups.length === 0" class="alert alert-warning max-width-medium">{{data.noGroupsMsg}}</div>
            </div>

            <div ng-if="data.group != null" class="row">
                <div class="col-md-3">
                    <ul ng-if="data.views.length > 1" class="pill-list">
                        <li ng-repeat="v in data.views | filter: {visible: true}" ng-class="{active: data.view == v}">
                            <a href="javascript:void(0);" ng-click="setView(v)">{{v.text}}</a>
                        </li>
                    </ul>
                </div>
                <div class="col-md-6">
                    <div class="filters" ng-show="data.group.categories.length > 0">
                        <strong>Filters:</strong>
                        <select class="" ng-model="filters.category" ng-options="a for a in data.group.categories"></select>
                        <a href="javascript:void(0);" ng-click="filter()">Filter</a>
                    </div>

                </div>
                <div class="col-md-3 pagination-container" ng-if="paging.show && data.items.length > 0">
                    <label>Showing {{paging.start}} - {{paging.end}} of {{paging.total}}</label>
                    <div ng-if="paging.pageCount > 1" class="paginator pull-right" settings="paging"></div>
                </div>
            </div>

            <div class="items-container">
                <div ng-include src="data.viewPath"></div>
            </div>

            <div class="pagination-container" ng-if="paging.show && paging.total > 12">
                <label>Showing {{paging.start}} - {{paging.end}} of {{paging.total}}</label>
                <div ng-if="paging.pageCount > 1" class="paginator pull-right" settings="paging"></div>
            </div>

        </div>

    </div>
</div>

<script type="text/ng-template" id="GroupPropsDialog">
    <div class="modal-header">
        <button type="button" class="close" aria-hidden="true" ng-click="cancel()">&times;</button>
        <h4 class="modal-title">{{dialog.title}}</h4>
    </div>
    <div class="modal-body">
        <form id="GroupPropsForm" role="form" action="" method="post">
            <div ng-if="dialog.message && dialog.message.length > 0">
                <div class="alert {{dialog.messageType}}">{{dialog.message}}</div>
            </div>

            <!-- Nav tabs -->
            <ul class="nav nav-pills" role="tablist">
                <li role="presentation" ng-class="{active: dialog.tab == 'general'}"><a href="javascript:void(0);" role="tab" data-toggle="tab" ng-click="changeTab('general')">General</a></li>
                <li role="presentation" ng-class="{active: dialog.tab == 'categories'}"><a href="javascript:void(0);" role="tab" data-toggle="tab" ng-click="changeTab('categories')">Categories</a></li>
                <li role="presentation" ng-class="{active: dialog.tab == 'media'}"><a href="javascript:void(0);" role="tab" data-toggle="tab" ng-click="changeTab('media')">Media</a></li>
                <li role="presentation" ng-class="{active: dialog.tab == 'views'}"><a href="javascript:void(0);" role="tab" data-toggle="tab" ng-click="changeTab('views')">Views</a></li>
                <li role="presentation" ng-class="{active: dialog.tab == 'types'}"><a href="javascript:void(0);" role="tab" data-toggle="tab" ng-click="changeTab('types')">Content Types</a></li>
                <li role="presentation" ng-class="{active: dialog.tab == 'perms'}"><a href="javascript:void(0);" role="tab" data-toggle="tab" ng-click="changeTab('perms')">Permissions</a></li>
            </ul>

            <!-- Tab panes -->
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane" ng-class="{active: dialog.tab == 'general'}" id="tabGroupGeneral">
                    <div class="form-group">
                        <label for="groupName">Name</label>
                        <input type="text" class="form-control" autocomplete="off" id="groupName" name="groupName" placeholder="Enter the group name" ng-model="group.name" style="width:400px;"/>
                    </div>
                    <div class="form-group">
                        <label for="groupDesc">Description</label>
                        <textarea class="form-control" id="groupDesc" name="groupDesc" ng-model="group.desc"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="groupIcon">Icon</label>
                        <icon-selector id="groupIcon" name="groupIcon" value="group.icon" />
                    </div>
                    <div class="form-group">
                        <label for="groupUrlPattern">URL Pattern</label>
                        &nbsp;&nbsp;<a href="javascript:void(0);" ng-click="urlPatternHelp()">Help</a>
                        <input type="text" class="form-control" id="groupUrlPattern" name="groupUrlPattern" placeholder="Enter the URL pattern for new items created in this group" ng-model="group.urlPattern" />
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="groupSortBy">Sort By:&nbsp;</label>
                                <select id="groupSortBy" name="groupSortBy" ng-model="group.sortBy" ng-options="a.value as a.text for a in sortByOptions">
                                </select>
                            </div>
                        </div>
                        <div class="col-md-8">
                            <div class="form-group">
                                <label for="groupSortDir">Sort Direction:&nbsp;</label>
                                <select id="groupSortDir" name="groupSortDir" ng-model="group.sortDir" ng-options="a.value as a.text for a in sortDirOptions">
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Group ID:</label>&nbsp;&nbsp;<span>{{group._id}}</span>
                    </div>
                </div>
                <div role="tabpanel" class="tab-pane" ng-class="{active: dialog.tab == 'categories'}" id="tabGroupCategories">
                    <p>Enter the comma separated categories that will be available to items in this group.<br/>For example: Red, Green, Blue</p>
                    <div class="form-group">
                        <label for="groupDesc">Categories</label>
                        <textarea class="form-control" id="groupCats" name="groupCats" ng-model="group.cats"></textarea>
                    </div>
                </div>
                <div role="tabpanel" class="tab-pane" ng-class="{active: dialog.tab == 'media'}" id="tabGroupMedia">
                    <p>The following settings apply to image items within this group:</p>
                    <div class="row">
                        <div class="form-group col-md-3">
                            <label for="groupName">Resize Width</label>
                            <input type="text" class="form-control" autocomplete="off" id="groupResizeWidth" name="groupResizeWidth" ng-model="group.mediaSettings.imageWidth" style="width:140px;"/>
                        </div>
                        <div class="form-group col-md-3">
                            <label for="groupDesc">Resize Height</label>
                            <input type="text" class="form-control" autocomplete="off" id="groupResizeHeight" name="groupResizeHeight" ng-model="group.mediaSettings.imageHeight" style="width:140px;"/>
                        </div>
                        <div class="form-group col-md-3">
                            <label for="groupDesc">Quality</label>
                            <select class="form-control" id="groupResizeQuality" name="groupResizeQuality" ng-model="group.mediaSettings.imageQuality" ng-options="a for a in resizeQualityOptions" style="width:80px;">
                            </select>
                        </div>
                        <div class="form-group col-md-3">
                            <label for="groupIcon">Resize Mode</label>
                            <select class="form-control" id="groupResizeMode" name="groupResizeMode" ng-model="group.mediaSettings.resizeMode" ng-options="a.value as a.text for a in resizeModeOptions" style="width:140px;">
                            </select>
                        </div>
                    </div>
                </div>
                <div role="tabpanel" class="tab-pane" ng-class="{active: dialog.tab == 'views'}" id="tabGroupViews">

                    <div class="group-views-list">
                        <strong>Select the views to display items:</strong>
                        <div ng-repeat="view in views">
                            <label><input type="checkbox" ng-model="view.checked" />{{view.text}}</label>
                        </div>
                    </div>

                </div>
                <div role="tabpanel" class="tab-pane" ng-class="{active: dialog.tab == 'types'}" id="tabGroupTypes">

                    <div class="sortable-select" list="types" textprop="name" idprop="_id" selected="selectedTypes" style="height:440px;"></div>

                </div>
                <div role="tabpanel" class="tab-pane" ng-class="{active: dialog.tab == 'perms'}" id="tabGroupPerms">
                    <p>Select a role to add permissions to this group:</p>
                    <select id="permRoles" name="permRoles" style="min-width:200px;" ng-model="perms.selectedRole" ng-options="role for role in perms.roles">
                    </select>&nbsp;&nbsp;
                    <a href="javascript:void(0);" ng-click="addPermRole()">Add Role</a>
                    <table class="table permissions">
                        <thead>
                            <tr>
                                <th>Role</th>
                                <th class="center" style="width:80px;">Create</th>
                                <th class="center" style="width:80px;">Read</th>
                                <th class="center" style="width:80px;">Update</th>
                                <th class="center" style="width:80px;">Delete</th>
                                <th class="center" style="width:80px;">Publish</th>
                                <th style="width:20px;">&nbsp;</th>
                            </tr>
                        </thead>
                        <tbody>
                        <tr ng-repeat="perm in group.perms">
                            <td>
                                {{perm.role}}
                            </td>
                            <td class="center">
                                <input type="checkbox" ng-model="perm.create" />
                            </td>
                            <td class="center">
                                <input type="checkbox" ng-model="perm.read" />
                            </td>
                            <td class="center">
                                <input type="checkbox" ng-model="perm.update" />
                            </td>
                            <td class="center">
                                <input type="checkbox" ng-model="perm.delete" />
                            </td>
                            <td class="center">
                                <input type="checkbox" ng-model="perm.publish" />
                            </td>
                            <td class="center">
                                <a href="javascript:void(0);" class="fa fa-times" title="Remove this permission" ng-click="removePerm(perm, $index)"></a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

        </form>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-danger pull-left min-width" ng-if="canDelete == true" ng-click="delete()">Delete</button>
        <button type="button" class="btn btn-default pull-left min-width" ng-click="recalculate()" title="Recalculate the item counts">Recalculate</button>
        <button type="submit" class="btn btn-primary min-width" ng-click="ok()">Save</button>
        <button type="button" class="btn btn-default min-width" ng-click="cancel()">Close</button>
    </div>
</script>

<script type="text/ng-template" id="NewItemDialog">
    <div class="modal-header">
        <button type="button" class="close" aria-hidden="true" ng-click="cancel()">&times;</button>
        <h4 class="modal-title">{{dialog.title}}</h4>
    </div>
    <div class="modal-body">
        <form id="NewItemForm" role="form" action="" method="post">
            <div ng-if="dialog.message && dialog.message.length > 0">
                <div class="alert {{dialog.messageType}}">{{dialog.message}}</div>
            </div>
            <div class="form-group">
                <label for="newContentName">Name</label>
                <input type="text" class="form-control" autocomplete="off" id="newContentName" name="contentname" placeholder="Enter a name for this content item" ng-model="newItem.name"/>
            </div>

            <div class="row" ng-if="newItem.startDate && newItem.endDate">
                <div class="form-group col-md-6">
                    <label>Start Date</label>
                    <quick-datepicker ng-model="newItem.startDate"></quick-datepicker>
                </div>
                <div class="form-group col-md-6">
                    <label>End Date</label>
                    <quick-datepicker ng-model="newItem.endDate"></quick-datepicker>
                </div>
            </div>

            <div class="form-group">
                <label>Select the Content Type</label>
            </div>
            <div class="item-icon-list">
                <ul>
                    <li ng-repeat="t in types" ng-class="{selected: newItem.typeId == t._id}" ng-click="selectType(t)">
                        <img ng-src="{{t.icon}}" title="{{t.desc}}" />
                        <span>{{t.name}}</span>
                    </li>
                </ul>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <button type="submit" class="btn btn-primary min-width" ng-click="ok()">Create</button>
        <button type="button" class="btn btn-default min-width" ng-click="cancel()">Close</button>
    </div>
</script>

<script type="text/ng-template" id="ImagePreviewDialog">
    <div class="modal-header">
        <button type="button" class="close" aria-hidden="true" ng-click="cancel()">&times;</button>
        <h4 class="modal-title">{{dialog.title}}</h4>
    </div>
    <div class="modal-body">
        <div class="image-preview">
            <img ng-src="{{dialog.imageUrl}}" alt="{{dialog.imageUrl}}" />
        </div>
    </div>
    <div class="modal-footer">
        <button type="submit" class="btn btn-primary min-width pull-left" ng-click="editItem()">Properties</button>
        <button type="button" class="btn btn-default min-width" ng-click="cancel()">Close</button>
    </div>
</script>