sheercms/static/directives/imageselector.directive.js

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

app.directive('imageSelector', function ($parse, $modal, DialogService, HelperService) {
    return {
        restrict: 'E',
        scope: {
            value: "="
        },
        template: '\
            <div class="image-selector-field">\
                <img ng-src="{{url}}" alt="{{value.alt}}" title="{{value.tooltip}}" ng-class="{hidden: value == null || url == null || url.length == 0}"/>\
                <button type="button" class="btn btn-default" ng-click="open()" title="Browse for the image">Select...</button>\
                <button type="button" class="btn btn-default" ng-click="clear()" ng-disabled="value == null" title="Clear this field value">Clear</button>\
                <button type="button" class="btn btn-default" ng-click="raw()" title="View the field raw value">Raw Value</button>\
            </div>\
        ',
        link: function(scope, element, attrs) {

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

            scope.open = function() {
                var options = {
                    title: "Select an image",
                    value: scope.value,
                    groups: scope.groups,
                    onSuccess: function(img) {
                        if (img) {
                            scope.value = img;
                            setDisplayValue();
                        }
                    }
                };
                DialogService.openImageSelector(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(newJson);
                            if (newValue) {
                                if (!scope.value)
                                    scope.value = {};
                                scope.value.contentId = newValue.contentId;
                                scope.value.name = newValue.name;
                                scope.value.url = newValue.url;
                                scope.value.cssClass = newValue.cssClass;
                                scope.value.tooltip = newValue.tooltip;
                                scope.value.alt = newValue.alt;
                            }
                        }
                        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.url) {
                    scope.url = scope.value.url + '?cmsmode=preview&thumb=1';
                }
                else
                    scope.url = null;
            }

            setDisplayValue();
        }
    };
});