sheercms/static/directives/linkselector.directive.js

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

app.directive('linkSelector', 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 hyperlink"><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 options = {
                    branch: "content",
                    title: "Link to a content item or file",
                    groups: scope.groups,
                    multiple: false,
                    value: scope.value,
                    onSuccess: function(link) {
                        if (link) {
                            scope.value = link;
                            setDisplayValue();
                        }
                    }
                };
                DialogService.openLinkSelector(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;
                                scope.value.text = newValue.text;
                                scope.value.tooltip = newValue.tooltip;
                                scope.value.target = newValue.target;
                                scope.value.cssClass = newValue.cssClass;
                            }
                        }
                        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.text && scope.value.url)
                    scope.displayValue = scope.value.text + " - " + scope.value.url + "";
                else if (scope.value && scope.value.url)
                    scope.displayValue = scope.value.url;
                else
                    scope.displayValue = "";
            }

            setDisplayValue();
        }
    };
});