Package.manifest

{ propertyEditors: [ { alias: "ArunabhMultiContentPicker", name: "Custom Multi Content Picker", isParameterEditor: true, editor: { view: "~/AppPlugins/MultiContentPicker/MultiContentPicker.html" },
} ],
javascript: [ "~/AppPlugins/MultiContentPicker/MultiContentPicker.controller.js"

]

}

Controller

angular.module("umbraco").controller("Umbraco.ArunabhMultiContentPickerController", function ($scope, entityResource, macroResource, eventsService, $log, searchService, macroService, umbRequestHelper, $http, $routeParams, tinyMceService, editorState, dialogService) {

    var dialogOptions = $scope.$parent.dialogOptions;
    $scope.dialogTreeEventHandler = $({});
    $scope.section = 'content';
    $scope.treeAlias = 'content';
    $scope.multiPicker = true;
    $scope.hideHeader = false;
    $scope.startNodeId = -1;
    $scope.selectedMacro = 'TestCustomMultiList';

    //create the custom query string param for this tree
    $scope.customTreeParams = -1;
    $scope.customTreeParams += $scope.customTreeParams ? "&" + $scope.customTreeParams : "";

    //search defaults
    $scope.searcher = searchService.searchContent;
    $scope.entityType = "Document";
    $scope.results = [];
    $scope.dialogData = [];
    $scope.macroParams = [];

    $('.umb-panel-footer').hide();
    if ($('.umb-panel-footer').hasClass('custom-multi-content-list')) {
        $('.custom-multi-content-list').show();
    }

    /** Method used for selecting a node */
    function select(text, id, entity) {

        //if we get the root, we just return a constructed entity, no need for server data
        if (id < 0) {
            if ($scope.multiPicker) {

                $scope.select(id);
            }
        } else {
            $scope.showSearch = false;
            $scope.results = [];
            $scope.term = "";
            $scope.oldTerm = undefined;

            if ($scope.multiPicker) {

                if ($scope.dialogData.indexOf(id) == -1) {
                    $scope.dialogData.push(id);

                }
            }
        }
    }

    function remove(text, id) {
        var index = $scope.dialogData.indexOf(id);

        if (index > -1) {
            $scope.dialogData.splice(index, 1);
        }
    }


    $scope.multiSubmit = function (result) {


    };

    $scope.close = function () {
        eventsService.emit("app.closeDialogs");

    };

    /** method to select a search result */
    $scope.selectResult = function (result) {
        //since result = an entity, we'll pass it in so we don't have to go back to the server
        select(result.name, result.id, result);
    };

    var dialogDatas = {
        //flag for use in rte so we only show macros flagged for the editor
        richTextEditor: true
    };


    $scope.performSearch = function () {
        if ($scope.term) {
            if ($scope.oldTerm !== $scope.term) {
                $scope.results = [];

                $scope.searcher({ term: $scope.term }).then(function (data) {
                    $scope.results = data;
                });

                $scope.showSearch = true;
                $scope.oldTerm = $scope.term;
            }
        }
        else {
            $scope.oldTerm = "";
            $scope.showSearch = false;
            $scope.results = [];
        }
    };

    //wires up selection
    $scope.dialogTreeEventHandler.bind("treeNodeSelect", function (ev, args) {
        args.event.preventDefault();
        args.event.stopPropagation();

        eventsService.emit("dialogs.treePickerController.select", args);

        if (args.node.filtered) {
            return;
        }

        //This is a tree node, so we don't have an entity to pass in, it will need to be looked up
        //from the server in this method.
        select(args.node.name, args.node.id);

        //ui...
        if ($scope.multiPicker) {
            var c = $(args.event.target.parentElement);
            if (!args.node.selected) {
                args.node.selected = true;
                var temp = "<i class='icon umb-tree-icon sprTree icon-check blue temporary'></i>";
                var icon = c.find("i.umb-tree-icon");
                if (icon.length > 0) {
                    icon.hide().after(temp);
                }
                else {
                    c.prepend(temp);
                }
            }
            else {
                remove(args.node.name, args.node.id);
                args.node.selected = false;
                c.find(".temporary").remove();
                c.find("i.umb-tree-icon").show();
            }
        }
    });
});