sheercms/static/directives/itemselector.directive.js

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

app.directive('itemSelector', function ($parse, $modal, DialogService, HelperService) {
    return {
        restrict: 'E',
        scope: {
            value: "="
        },
        template: '\
            <div class="item-selector-field">\
                <div class="input-group">\
                    <input type="text" class="form-control" value="{{displayValue}}" readonly />\
                    <span class="input-group-btn">\
                        <button class="btn btn-default" type="button" ng-click="open()" title="Browse for the file"><i class="fa fa-ellipsis-h"></i></button>\
                        <button class="btn btn-default" type="button" ng-click="clear()" ng-disabled="value == null" title="Clear this field value"><i class="fa fa-times"></i></button>\
                        <button class="btn btn-default" type="button" ng-click="raw()" title="View the field raw value"><i class="fa fa-code"></i></button>\
                    </span>\
                </div>\
            </div>\
        ',
        link: function(scope, element, attrs) {

            scope.displayValue = "";
            scope.groups = getSourceGroups(attrs["source"]);

            scope.open = function() {

                var ids = [];
                if (scope.value && scope.value.contentId)
                    ids.push(scope.value.contentId);

                var branch = (attrs.branch && attrs.branch.length > 0) ? attrs.branch : 'content,media,system';
                var title = (attrs.title && attrs.title.length > 0) ? attrs.title : 'Item Selector';

                var options = {
                    branch: branch,
                    title: title,
                    groups: scope.groups,
                    selectedIds: ids,
                    multiple: false,
                    onSuccess: function(items) {
                        if (items && items.length > 0) {
                            var item = items[0];
                            scope.value = {
                                contentId: item.contentId,
                                name: item.name,
                                url: item.url
                            };
                            setDisplayValue();
                        }
                    }
                };
                DialogService.openItemSelector(options);
            };

            scope.clear = function() {
                if (confirm('Are you sure you want to clear this field value?')) {
                    scope.value = null;
                    setDisplayValue();
                }
            }

            scope.raw = function() {
                var rawValue = scope.value ? JSON.stringify(scope.value) : "";
                DialogService.openRawValue(rawValue, function(newJson) {
                    if (newJson) {
                        try {
                            //copy it over - don't let just any JSON be the value
                            var newValue = JSON.parse(value);
                            if (newValue) {
                                if (!scope.value)
                                    scope.value = {};
                                scope.value.contentId = newValue.contentId;
                                scope.value.name = newValue.name;
                                scope.value.url = newValue.url;
                            }
                        }
                        catch(e) {
                            console.error(e);
                        }
                        setDisplayValue();
                    }
                });
            };

            function getSourceGroups(source) {
                if (source && source.length > 0)
                    return HelperService.splitTrim(source, ',');
                else
                    return null;
            }

            function setDisplayValue() {
                if (scope.value && scope.value.contentId) {
                    scope.displayValue = scope.value.name + " (" + scope.value.contentId + ")";
                }
                else
                    scope.displayValue = "";
            }

            setDisplayValue();
        }
    };
});