sheercms/static/routes/content/edit.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="group-list">

            <div class="content-info">
                <div>
                    <label>Name:</label>
                    <span class="wrap-text">{{item.name}}</span>
                </div>
                <div>
                    <label>ID:</label>{{item.contentId}}
                </div>

                <div>
                    <label>Created:</label>{{item.created | date: 'yyyy-MM-dd h:mm:ss a'}} by {{item.createdBy}}
                </div>

                <div ng-if="item.modified != null">
                    <label>Modified:</label>{{item.modified | date: 'yyyy-MM-dd h:mm:ss a'}} by {{item.modifiedBy}}
                </div>
                <div ng-if="item.modified == null">
                    <label>Modified:</label>Never
                </div>

                <div>
                    <label>Status:</label><span class="label {{status.css}}">{{status.text}}</span>
                </div>
            </div>

            <a ng-click="showTab('#general')" ng-class="{selected: editData.tab == '#general' }">
                <div>
                    <strong>General</strong>
                    <span>General properties about the item</span>
                </div>
            </a>

            <a ng-repeat="g in item.type.groups" ng-click="showTab(g.name)" ng-class="{selected: editData.tab == g.name }">
                <div>
                    <strong>{{g.name}}</strong>
                    <span>{{g.desc}}</span>
                </div>
            </a>

            <a ng-if="item.mediaType == 'Image'" ng-click="showTab('#image')" ng-class="{selected: editData.tab == '#image' }">
                <div>
                    <strong>Image Preview</strong>
                    <span>Preview this image</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 to content list" ng-click="back()">
                        <img src="/cms/static/images/icons/32/back_arrow.png" alt="Back"/>
                        <span>Back</span>
                    </a>
                </li>
                <li ng-show="buttons.save === true">
                    <a href="javascript:void(0);" title="Save this content item" ng-click="save()">
                        <img src="/cms/static/images/icons/32/accept.png" alt="Save"/>
                        <span>Save</span>
                    </a>
                </li>
                <li ng-show="buttons.publish === true">
                    <a href="javascript:void(0);" title="Publish this content item to the live site" ng-click="publish()">
                        <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="Remove this content item from the live site" ng-click="unpublish()">
                        <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 this content item" ng-click="delete()">
                        <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 deleted item back to a saved status" ng-click="restore()">
                        <img src="/cms/static/images/icons/32/page_white_wrench.png" alt="Restore"/>
                        <span>Restore</span>
                    </a>
                </li>
                <li ng-show="buttons.deleteForever === true">
                    <a href="javascript:void(0);" title="Delete this content item forever" ng-click="delete()">
                        <img src="/cms/static/images/icons/32/delete.png" alt="Delete Forever"/>
                        <span>Delete Forever</span>
                    </a>
                </li>
                <li ng-show="buttons.viewPage === true">
                    <a href="javascript:void(0);" title="View this page on the live website" ng-click="viewPage()">
                        <img src="/cms/static/images/icons/32/magnifier.png" alt="View Page"/>
                        <span>View Page</span>
                    </a>
                </li>
                <li ng-show="buttons.download === true">
                    <a title="Download this file" target="_blank" ng-href="{{item.url}}?cmsmode=preview">
                        <img src="/cms/static/images/icons/32/download.png" alt="Download"/>
                        <span>Download</span>
                    </a>
                </li>
                <li ng-show="buttons.changeMedia === true">
                    <a title="Upload a new file for this media item" href="javascript:void(0);" ng-click="changeMedia()">
                        <img src="/cms/static/images/icons/32/upload.png" alt="Change Media"/>
                        <span>Change Media</span>
                    </a>
                </li>
                <li ng-show="buttons.design === true">
                    <a title="Edit this page in design mode" target="_blank" ng-href="{{item.url}}?cmsmode=design">
                        <img src="/cms/static/images/icons/32/page_edit.png" alt="Design"/>
                        <span>Design</span>
                    </a>
                </li>
            </ul>
        </div>
        <div class="main-content">

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

            <!-- General Tab -->
            <div style="min-height:600px;" ng-show="editData.tab == '#general'">
                <div class="form-group">
                    <label>Name</label>
                    <input type="text" class="form-control" id="itemName" name="itemName" ng-model="item.name" style="max-width:800px;" />
                </div>
                <div class="form-group">
                    <label>URL</label>
                    <input type="text" class="form-control" id="itemUrl" name="itemUrl" ng-model="item.url" style="max-width:800px;" placeholder="example: /services/delivery" />
                </div>

                <div class="row" style="max-width:800px;">
                    <div class="form-group col-md-6">
                        <label>Author</label>
                        <input type="text" class="form-control" id="itemAuthor" name="itemAuthor" ng-model="item.author" style="max-width: 400px;" />
                    </div>
                </div>

                <div style="max-width:800px;" class="row">
                    <div class="form-group col-md-6">
                        <label>Start Date</label>
                        <quick-datepicker ng-model="item.startDate"></quick-datepicker>
                    </div>
                    <div class="form-group col-md-6">
                        <label>End Date</label>
                        <quick-datepicker ng-model="item.endDate"></quick-datepicker>
                    </div>
                </div>

                <div class="form-group" ng-show="group.categories.length > 0">
                    <label>Category</label>
                    <select class="form-control" name="itemCategories" style="width:300px;" ng-model="item.category" ng-options="a for a in group.categories">
                    </select>
                </div>

                <div class="form-group" ng-if="item.branch === 'content'" ng-show="templates.length > 1">
                    <label for="tTemplate">Template</label>
                    <select id="tTemplate" class="form-control" name="tType" style="width:300px;" ng-model="item.templateId" ng-options="a._id as a.name for a in templates">
                    </select>
                </div>

            </div>

            <!-- Field Tabs -->
            <div ng-repeat="g in item.type.groups" ng-show="editData.tab == g.name">
                <div class="form-group content-field" ng-repeat="f in g.fields" ng-switch="f.type">
                    <div ng-switch-when="TextBox">
                        <label><span title="Field Name: {{f.name}}">{{f.label}}</span><span class="help-text" ng-if="f.help && f.help.length > 0">&nbsp;-&nbsp;{{f.help}}</span></label>
                        <input type="text" class="form-control" ng-model="item.fields[f.name]" />
                    </div>
                    <div ng-switch-when="TextArea">
                        <label><span title="Field Name: {{f.name}}">{{f.label}}</span><span class="help-text" ng-if="f.help && f.help.length > 0">&nbsp;-&nbsp;{{f.help}}</span></label>
                        <textarea class="form-control" ng-model="item.fields[f.name]" rows="4"></textarea>
                    </div>
                    <div ng-switch-when="RichText">
                        <label><span title="Field Name: {{f.name}}">{{f.label}}</span><span class="help-text" ng-if="f.help && f.help.length > 0">&nbsp;-&nbsp;{{f.help}}</span></label>
                        <textarea ckeditor="editorOptions" ng-model="item.fields[f.name]"></textarea>
                    </div>
                    <div ng-switch-when="DropDown">
                        <label><span title="Field Name: {{f.name}}">{{f.label}}</span><span class="help-text" ng-if="f.help && f.help.length > 0">&nbsp;-&nbsp;{{f.help}}</span></label>
                        <dropdown-field value="item.fields[f.name]" source="{{f.source}}"></dropdown-field>
                    </div>
                    <div ng-switch-when="Hyperlink">
                        <label><span title="Field Name: {{f.name}}">{{f.label}}</span><span class="help-text" ng-if="f.help && f.help.length > 0">&nbsp;-&nbsp;{{f.help}}</span></label>
                        <link-selector value="item.fields[f.name]" source="{{f.source}}"></link-selector>
                    </div>
                    <div ng-switch-when="ImageSelector">
                        <label><span title="Field Name: {{f.name}}">{{f.label}}</span><span class="help-text" ng-if="f.help && f.help.length > 0">&nbsp;-&nbsp;{{f.help}}</span></label>
                        <image-selector value="item.fields[f.name]" source="{{f.source}}"></image-selector>
                    </div>
                    <div ng-switch-when="FileSelector">
                        <label><span title="Field Name: {{f.name}}">{{f.label}}</span><span class="help-text" ng-if="f.help && f.help.length > 0">&nbsp;-&nbsp;{{f.help}}</span></label>
                        <item-selector value="item.fields[f.name]" branch="media" source="{{f.source}}"></item-selector>
                    </div>
                    <div ng-switch-when="ItemSelector">
                        <label><span title="Field Name: {{f.name}}">{{f.label}}</span><span class="help-text" ng-if="f.help && f.help.length > 0">&nbsp;-&nbsp;{{f.help}}</span></label>
                        <item-selector value="item.fields[f.name]" branch="content,media,system" source="{{f.source}}"></item-selector>
                    </div>
                    <div ng-switch-when="CheckBox">
                        <label>
                            <input type="checkbox" class="" ng-model="item.fields[f.name]" />
                            &nbsp;<span title="Field Name: {{f.name}}">{{f.label}}</span><span class="help-text" ng-if="f.help && f.help.length > 0">&nbsp;-&nbsp;{{f.help}}</span>
                        </label>
                    </div>
                    <div ng-switch-when="Date">
                        <label><span title="Field Name: {{f.name}}">{{f.label}}</span><span class="help-text" ng-if="f.help && f.help.length > 0">&nbsp;-&nbsp;{{f.help}}</span></label>
                        <quick-datepicker ng-model="item.fields[f.name]" disable-timepicker="true"></quick-datepicker>
                    </div>
                    <div ng-switch-when="DateTime">
                        <label><span title="Field Name: {{f.name}}">{{f.label}}</span><span class="help-text" ng-if="f.help && f.help.length > 0">&nbsp;-&nbsp;{{f.help}}</span></label>
                        <quick-datepicker ng-model="item.fields[f.name]"></quick-datepicker>
                    </div>
                    <div ng-switch-when="HtmlCodeEditor">
                        <label><span title="Field Name: {{f.name}}">{{f.label}}</span><span class="help-text" ng-if="f.help && f.help.length > 0">&nbsp;-&nbsp;{{f.help}}</span></label>
                        <div class="code-editor" ng-model="item.fields[f.name]" ui-ace="{useWrapMode:false, showGutter:true, mode:'html'}" style="width:100%;height:600px;"></div>
                    </div>
                    <div ng-switch-when="CssCodeEditor">
                        <label><span title="Field Name: {{f.name}}">{{f.label}}</span><span class="help-text" ng-if="f.help && f.help.length > 0">&nbsp;-&nbsp;{{f.help}}</span></label>
                        <div class="code-editor" ng-model="item.fields[f.name]" ui-ace="{useWrapMode:false, showGutter:true, mode:'css'}" style="width:100%;height:600px;"></div>
                    </div>
                    <div ng-switch-when="JavascriptCodeEditor">
                        <label><span title="Field Name: {{f.name}}">{{f.label}}</span><span class="help-text" ng-if="f.help && f.help.length > 0">&nbsp;-&nbsp;{{f.help}}</span></label>
                        <div class="code-editor" ng-model="item.fields[f.name]" ui-ace="{useWrapMode:false, showGutter:true, mode:'javascript'}" style="width:100%;height:600px;"></div>
                    </div>
                </div>
            </div>

            <div ng-if="item.mediaType == 'Image'" ng-show="editData.tab == '#image'">
                <img ng-src="{{data.imagePreviewUrl}}" style="max-width:100%;"/>
            </div>

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