SirTrevor for Umbraco: Gallery Hotfix

umbraco-gallery.js

/*
  Umbraco Media Image Gallery Block by mindrevolution
*/

SirTrevor.Blocks.UmbracoGallery = (function () {

    // - umbraco ng references
    var ngi = angular.element("body").injector();
    var uMediaHelper = ngi.get("mediaHelper");
    var uDialogService = ngi.get("dialogService");
    var uMediaResource = ngi.get("mediaResource");

    var block;

    return SirTrevor.Block.extend({

        type: "umbraco_gallery",
        title: function () { return "Gallery"; },
        icon_name: "image",

        droppable: false,
        uploadable: false,
        pastable: false,
        ajaxable: false,
        controllable: true,

        controls: {
            "add": function (ev) {
                block = this; // - easy context
                ev.preventDefault();
                this.pickImages();
            }
        },

        loadData: function (data) {
            block = this; // - easy context

            this.$editor.empty(); // - get rid of existing gallery
            this.$editor.append($("<ol>", { class: "ust-gallery" })); // ui-sortable

            angular.forEach(data.items, function (item, index) {
                block.addImage(item.id);
            });

            // - wire up delete button
            $(this.$editor).find(".ust-gallery").on("click", ".st-block-ui-btn--delete", function () {
                //console.log("delete gallery item", this, $(this).parent("li"));
                $(this).parent("li").remove();
                block.onMediaChanged();
            });
        },

        onBlockRender: function () {
            // - block has no img src value, must be a new one, so open the media library ...
            if (typeof this.blockStorage.data.itemcount === "undefined" || this.blockStorage.data.itemcount < 1) {
                // - preserve current scope for callback 'onMediaSelected'
                block = this;

                // - show media library and allow selection of multiple images
                this.pickImages();
            }
        },

        pickImages: function () {
            uDialogService.mediaPicker({ onlyImages: true, callback: this.onMediaChanged, multiPicker: true });
        },

        onMediaChanged: function (e) {
            var items = [];

            angular.forEach(block.$editor.find(".ust-gallery .ust-gallery-preview"), function (galleryitem, index) {
                var item = {};
                item.id = $(galleryitem).data("mediaid");
                item.contentTypeAlias = $(galleryitem).data("mediacontenttypealias");
                items.push(item);
            });

            // - only if additional/new media was selected, not i.e. deleted
            if (e !== undefined) {
                angular.forEach(e, function (mediaitem, index) {
                    var item = {};
                    item.id = mediaitem.id;
                    item.contentTypeAlias = mediaitem.contentTypeAlias;
                    items.push(item);
                });
            }

            // - save gallery items
            var gallery = {};
            gallery.itemcount = items.length;
            gallery.items = items;

            // - only go full cycle if items got added
            if (e === undefined) {
                block.setData(gallery);
            } else {
                block.setAndLoadData(gallery);
                block.ready();
            }
        },

        addImage: function (mediaid) {
            // - preserve current scope for mediaResource callback
            var scope = block;

            // - add placeholder for awaited image (css background)
            var preview = $("<li>", { class: "ust-gallery-preview", "data-mediaid": mediaid });
            preview.append($("<a>", { class: "st-icon st-block-ui-btn--delete", "data-icon": "bin" }));

            scope.$editor.find(".ust-gallery").append(preview);

            //- fetch media (request intensive, but works for now)
            uMediaResource.getById(mediaid)
            .then(function (media) {
                var mel = scope.$editor.find(".ust-gallery-preview[data-mediaid='" + mediaid + "']");
                var thumburl = uMediaHelper.resolveFile(media, true);
                //style: "background-image:url(" + thumburl + ");"
                // - set image as background
                $(mel).css("background-image", "url(" + thumburl + ")");
                // - add media item's doc type alias
                $(mel).data("mediacontenttypealias", media.contentTypeAlias);
            });

            $(scope.$editor.find(".ust-gallery")).sortable().bind('sortupdate', function () {
                var items = [];

                angular.forEach(block.$editor.find(".ust-gallery .ust-gallery-preview"), function (galleryitem, index) {
                    var item = {};
                    item.id = $(galleryitem).data("mediaid");
                    item.contentTypeAlias = $(galleryitem).data("mediacontenttypealias");
                    items.push(item);
                });

                // - save gallery items
                var gallery = {};
                gallery.itemcount = items.length;
                gallery.items = items;
                block.setData(gallery);
                block.data = gallery;
                block.ready();
            });
        }

    });

})();


/*
 * DEPENDENCY
 */

/*
 * HTML5 Sortable jQuery Plugin
 * http://farhadi.ir/projects/html5sortable
 * 
 * Copyright 2012, Ali Farhadi
 * Released under the MIT license.
 */
(function ($) {
    var dragging, placeholders = $();
    $.fn.sortable = function (options) {
        var method = String(options);
        options = $.extend({
            connectWith: false
        }, options);
        return this.each(function () {
            if (/^enable|disable|destroy$/.test(method)) {
                var items = $(this).children($(this).data('items')).attr('draggable', method == 'enable');
                if (method == 'destroy') {
                    items.add(this).removeData('connectWith items')
                        .off('dragstart.h5s dragend.h5s selectstart.h5s dragover.h5s dragenter.h5s drop.h5s');
                }
                return;
            }
            var isHandle, index, items = $(this).children(options.items);
            var placeholder = $('<' + (/^ul|ol$/i.test(this.tagName) ? 'li' : 'div') + ' class="sortable-placeholder">');
            items.find(options.handle).mousedown(function () {
                isHandle = true;
            }).mouseup(function () {
                isHandle = false;
            });
            $(this).data('items', options.items)
            placeholders = placeholders.add(placeholder);
            if (options.connectWith) {
                $(options.connectWith).add(this).data('connectWith', options.connectWith);
            }
            items.attr('draggable', 'true').on('dragstart.h5s', function (e) {
                if (options.handle && !isHandle) {
                    return false;
                }
                isHandle = false;
                var dt = e.originalEvent.dataTransfer;
                dt.effectAllowed = 'move';
                dt.setData('Text', 'dummy');
                index = (dragging = $(this)).addClass('sortable-dragging').index();
            }).on('dragend.h5s', function () {
                dragging.removeClass('sortable-dragging').show();
                placeholders.detach();
                if (index != dragging.index()) {
                    items.parent().trigger('sortupdate', { item: dragging });
                }
                dragging = null;
            }).not('a[href], img').on('selectstart.h5s', function () {
                this.dragDrop && this.dragDrop();
                return false;
            }).end().add([this, placeholder]).on('dragover.h5s dragenter.h5s drop.h5s', function (e) {
                if (!items.is(dragging) && options.connectWith !== $(dragging).parent().data('connectWith')) {
                    return true;
                }
                if (e.type == 'drop') {
                    e.stopPropagation();
                    placeholders.filter(':visible').after(dragging);
                    return false;
                }
                e.preventDefault();
                e.originalEvent.dataTransfer.dropEffect = 'move';
                if (items.is(this)) {
                    if (options.forcePlaceholderSize) {
                        placeholder.height(dragging.outerHeight());
                    }
                    dragging.hide();
                    $(this)[placeholder.index() < $(this).index() ? 'after' : 'before'](placeholder);
                    placeholders.not(placeholder).detach();
                } else if (!placeholders.is(this) && !$(this).children(options.items).length) {
                    placeholders.detach();
                    $(this).append(placeholder);
                }
                return false;
            });
        });
    };
})(jQuery);

umbraco-gallery.min.js

SirTrevor.Blocks.UmbracoGallery=function(){var t=angular.element("body").injector(),i=t.get("mediaHelper"),r=t.get("dialogService"),u=t.get("mediaResource"),n;return SirTrevor.Block.extend({type:"umbraco_gallery",title:function(){return"Gallery"},icon_name:"image",droppable:!1,uploadable:!1,pastable:!1,ajaxable:!1,controllable:!0,controls:{add:function(t){n=this;t.preventDefault();this.pickImages()}},loadData:function(t){n=this;this.$editor.empty();this.$editor.append($("<ol>",{"class":"ust-gallery"}));angular.forEach(t.items,function(t){n.addImage(t.id)});$(this.$editor).find(".ust-gallery").on("click",".st-block-ui-btn--delete",function(){$(this).parent("li").remove();n.onMediaChanged()})},onBlockRender:function(){(typeof this.blockStorage.data.itemcount=="undefined"||this.blockStorage.data.itemcount<1)&&(n=this,this.pickImages())},pickImages:function(){r.mediaPicker({onlyImages:!0,callback:this.onMediaChanged,multiPicker:!0})},onMediaChanged:function(t){var r=[],i;angular.forEach(n.$editor.find(".ust-gallery .ust-gallery-preview"),function(n){var t={};t.id=$(n).data("mediaid");t.contentTypeAlias=$(n).data("mediacontenttypealias");r.push(t)});t!==undefined&&angular.forEach(t,function(n){var t={};t.id=n.id;t.contentTypeAlias=n.contentTypeAlias;r.push(t)});i={};i.itemcount=r.length;i.items=r;t===undefined?n.setData(i):(n.setAndLoadData(i),n.ready())},addImage:function(t){var r=n,f=$("<li>",{"class":"ust-gallery-preview","data-mediaid":t});f.append($("<a>",{"class":"st-icon st-block-ui-btn--delete","data-icon":"bin"}));r.$editor.find(".ust-gallery").append(f);u.getById(t).then(function(n){var u=r.$editor.find(".ust-gallery-preview[data-mediaid='"+t+"']"),f=i.resolveFile(n,!0);$(u).css("background-image","url("+f+")");$(u).data("mediacontenttypealias",n.contentTypeAlias)});$(r.$editor.find(".ust-gallery")).sortable().bind("sortupdate",function(){var i=[],t;angular.forEach(n.$editor.find(".ust-gallery .ust-gallery-preview"),function(n){var t={};t.id=$(n).data("mediaid");t.contentTypeAlias=$(n).data("mediacontenttypealias");i.push(t)});t={};t.itemcount=i.length;t.items=i;n.setData(t);n.data=t;n.ready()})}})}(),function(n){var t,i=n();n.fn.sortable=function(r){var u=String(r);return r=n.extend({connectWith:!1},r),this.each(function(){var o,s,f,e;if(/^enable|disable|destroy$/.test(u)){f=n(this).children(n(this).data("items")).attr("draggable",u=="enable");u=="destroy"&&f.add(this).removeData("connectWith items").off("dragstart.h5s dragend.h5s selectstart.h5s dragover.h5s dragenter.h5s drop.h5s");return}f=n(this).children(r.items);e=n("<"+(/^ul|ol$/i.test(this.tagName)?"li":"div")+' class="sortable-placeholder">');f.find(r.handle).mousedown(function(){o=!0}).mouseup(function(){o=!1});n(this).data("items",r.items);i=i.add(e);r.connectWith&&n(r.connectWith).add(this).data("connectWith",r.connectWith);f.attr("draggable","true").on("dragstart.h5s",function(i){if(r.handle&&!o)return!1;o=!1;var u=i.originalEvent.dataTransfer;u.effectAllowed="move";u.setData("Text","dummy");s=(t=n(this)).addClass("sortable-dragging").index()}).on("dragend.h5s",function(){t.removeClass("sortable-dragging").show();i.detach();s!=t.index()&&f.parent().trigger("sortupdate",{item:t});t=null}).not("a[href], img").on("selectstart.h5s",function(){return this.dragDrop&&this.dragDrop(),!1}).end().add([this,e]).on("dragover.h5s dragenter.h5s drop.h5s",function(u){return!f.is(t)&&r.connectWith!==n(t).parent().data("connectWith")?!0:u.type=="drop"?(u.stopPropagation(),i.filter(":visible").after(t),!1):(u.preventDefault(),u.originalEvent.dataTransfer.dropEffect="move",f.is(this)?(r.forcePlaceholderSize&&e.height(t.outerHeight()),t.hide(),n(this)[e.index()<n(this).index()?"after":"before"](e),i.not(e).detach()):i.is(this)||n(this).children(r.items).length||(i.detach(),n(this).append(e)),!1)})})}}(jQuery);
/*
//# sourceMappingURL=umbraco-gallery.min.js.map
*/