Dojo widget

_imageSelector.js

define([
        "dojo/_base/array",
        "dojo/_base/connect",
        "dojo/_base/declare",
        "dojo/_base/lang",
        "dojo/when",
        "dojo/on",
        "dojo/topic",

        "dijit/focus",
        "dijit/_WidgetBase",
        "dijit/_OnDijitClickMixin",

        "epi-cms/widget/_HasChildDialogMixin",

        "epi/epi",
        "epi/dependency"
],
    function (
        array,
        connect,
        declare,
        lang,
        when,
        on,
        topic,

        focusManager,
        _WidgetBase,
        _OnDijitClickMixin,

        _HasChildDialogMixin,

        epi,
        dependency
    ) {

        return declare("geta-epi-imageshop.widgets._ImageSelector", [_WidgetBase, _OnDijitClickMixin, _HasChildDialogMixin], {
            newWindow: null,
            store: null,

            containerId: "imageshop-frame-container",
            iframeId: "imageshop-frame",
            closeBtnId: "imageshop-frame-container-close",
            innerClass: "imageshop-frame-wrapper",
            browserClass: "imageshop-browser",

            currentImage: null,
            messageReceivedCallback: null,

            // Life cycle
            postCreate: function () {
                this.inherited(arguments);
                this.store = dependency.resolve('epi.storeregistry').get('imageshopstore');
            },

            //
            // Public methods
            //

            closeWindow: function (evt) {
                if (window.removeEventListener) {
                    removeEventListener('message', this.messageReceivedCallback, false);
                } else {
                    detachEvent("onmessage", this.messageReceivedCallback);
                }

                this.messageReceivedCallback = null;
                this.destroyFrame();
                this.isShowingChildDialog = false;
                topic.publish("geta-epi-cms.widgets._ImageSelector.windowclosed", this);
            },

            createFrame: function () {
                var root = document.body;
                var div = document.createElement("div");
                div.setAttribute("id", this.containerId);
                div.setAttribute("class", this.containerId);

                var innerContainer = document.createElement("div");
                innerContainer.setAttribute("class", this.innerClass + " " + this.browserClass);

                var ifrm = document.createElement("iframe");
                var ifrmUrl = this.baseUrl;

                if (this.currentImage != null && this.currentImage.url) {
                    ifrmUrl += "&IMAGE=" + encodeURI(this.currentImage.url);
                }

                console && console.log(this.baseUrl);

                ifrm.setAttribute("src", ifrmUrl);
                ifrm.setAttribute("id", this.iframeId);
                ifrm.setAttribute("frameborder", "0");

                var closeBtn = document.createElement("a");
                closeBtn.setAttribute("class", this.closeBtnId);
                closeBtn.setAttribute("id", this.closeBtnId);
                closeBtn.setAttribute("title", "Close window");

                closeBtn.onclick = lang.hitch(this, function () {
                    this.closeWindow();
                });

                innerContainer.appendChild(ifrm);
                innerContainer.appendChild(closeBtn);

                div.appendChild(innerContainer);
                root.appendChild(div);
            },

            destroyFrame: function () {
                var container = document.getElementById(this.containerId);
                container.parentNode.removeChild(container);
            },

            onImageSelected: function (image) {
            },

            onMessageReceived: function (event) {
                this.setBasicImage(event.data);

                when(this.store.get("?permalink=" + encodeURIComponent(this.currentImage.url)), lang.hitch(this, function (extendedData) {
                    this.setExtendedImage(extendedData);
                    this.onImageSelected(this.currentImage);
                    this.closeWindow();
                }), lang.hitch(this, function (err) {
                    alert("WebService call to fetch extended metadata failed. Using basic image data (url, credits, width and height). Error is: " + err);
                    this.onImageSelected(this.currentImage);
                    this.closeWindow();
                }));
            },

            openWindow: function (evt) {
                console && console.log("opening dialog");
                this.isShowingChildDialog = true;

                this.messageReceivedCallback = lang.hitch(this, this.onMessageReceived);

                if (window.addEventListener) {
                    addEventListener("message", this.messageReceivedCallback, false);
                } else {
                    attachEvent("onmessage", this.messageReceivedCallback);
                }

                this.createFrame();
                topic.publish("geta-epi-cms.widgets._ImageSelector.windowopened", this);
            },

            setBasicImage: function (data) {
                var imageData = data.split(";");

                this.currentImage = {
                    url: imageData[0],
                    credits: imageData[1],
                    width: imageData[2],
                    height: imageData[3]
                };
            },

            setExtendedImage: function (data) {
                this.currentImage = this.currentImage || {};

                this.currentImage.documentId = data.documentId;
                this.currentImage.code = data.code;
                this.currentImage.name = data.name;
                this.currentImage.description = data.description;
                this.currentImage.comment = data.comment;
                this.currentImage.rights = data.rights;
                this.currentImage.tags = data.tags;
                this.currentImage.isImage = data.isImage;
                this.currentImage.isVideo = data.isVideo;
                this.currentImage.authorName = data.authorName;
            }
        });
    });

ImageCollection.js

define([
        "dojo/_base/array",
        "dojo/_base/declare",
        "dojo/_base/lang",
        "dojo/dom",
        "dojo/dom-construct",
        "dojo/dom-class",
        "dojo/when",
        "dojo/on",
        "dojo/topic",

        "dijit/focus",
        "dijit/_TemplatedMixin",
        "dijit/_WidgetsInTemplateMixin",
        "dijit/_CssStateMixin",
        "dijit/form/Button",

        "geta-epi-imageshop/widgets/_ImageSelector",

        "epi/epi",
        "epi/shell/widget/_ValueRequiredMixin",
        "epi/dependency",

        "dojo/text!./templates/ImageCollection.html",
        "xstyle/css!./templates/imageSelector.css",
        "xstyle/css!./templates/ImageCollection.css",
        "xstyle/css!//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"
],
    function (
        array,
        declare,
        lang,
        dom,
        domConstruct,
        domClass,
        when,
        on,
        topic,

        focusManager,
        _TemplatedMixin,
        _WidgetsInTemplateMixin,
        _CssStateMixin,
        Button,

        _ImageSelector,

        epi,
        _ValueRequiredMixin,
        dependency,

        template
    ) {
        return declare("geta-epi-imageshop.widgets.ImageCollection", [_ImageSelector, _TemplatedMixin, _WidgetsInTemplateMixin, _CssStateMixin, _ValueRequiredMixin], {
            // Private
            _changed: false,
            _imageCollection: null,

            // Public
            baseClass: "imageExt",
            baseUrl: null,
            previewCropName: null,
            templateString: template,
            value: null,

            // 
            // Life cycle
            //

            constructor: function () {
                this.inherited(arguments);
                this._imageCollection = [];
            },

            //
            // Public methods
            //

            onImageSelected: function (image) {
                this.inherited(arguments);

                console && console.log(image);
                this._addImageToCollection(image);
                this._onWidgetChanged();
            },

            updateValue: function () {
                var propertyValue = [];

                array.forEach(this._imageCollection, function(entry) {
                    propertyValue.push(entry.image);
                });

                if (this._started && epi.areEqual(this.value, propertyValue)) {
                    return;
                }

                this._updateSortIcons();
                this._set("value", propertyValue);
                this.onBlur();
            },

            //
            // Private methods
            //

            _addHtmlNodesForImages: function(imageCollection) {
                for (var i = 0; i < imageCollection.length; i++) {
                    var image = imageCollection[i];
                    this._addImageToCollection(image);
                }  
            },

            _addHtmlNodesForImage: function(image) {
                var li = domConstruct.create("li", { "class": "geta-image-list-item clearfix" }, this.imageCollectionNode);
                var imageWrapperNode = domConstruct.create("div", { "class": "geta-image-wrapper" }, li);

                domConstruct.create("img", { "class": "geta-image", "src": this._getPreviewImageUrl(image) }, imageWrapperNode);
                domConstruct.create("a", { "href": image.url, "class": "geta-image-url", "innerHTML": this._getPreviewImageUrl(image) }, li);

                var actionsWrapperNode = domConstruct.create("div", { "class": "geta-actions-wrapper" }, li);

                // Sort up button
                var sortUpLink = domConstruct.create("a", { href: "javascript:void(0)" }, actionsWrapperNode);
                var sortUpIcon = domConstruct.create("i", null, sortUpLink);
                sortUpIcon.setAttribute("class", "fa fa-fw fa-arrow-up");

                // Sort down button
                var sortDownLink = domConstruct.create("a", { href: "javascript:void(0)" }, actionsWrapperNode);
                var sortDownIcon = domConstruct.create("i", null, sortDownLink);
                sortDownIcon.setAttribute("class", "fa fa-fw fa-arrow-down");

                on(sortUpLink, "click", lang.hitch(this, function (e) {
                    if (domClass.contains(sortUpLink, "disabled")) {
                        return false;
                    }

                    this._sortNodeUp(li);
                    return false;
                }));

                on(sortDownLink, "click", lang.hitch(this, function (e) {
                    if (domClass.contains(sortDownLink, "disabled")) {
                        return false;
                    }

                    this._sortNodeDown(li);
                    return false;
                }));

                var removeButton = new Button({
                    label: "X",
                    scope: this,
                    container: li
                });

                removeButton.on("click", lang.hitch(this, function() {
                    this._removeImageNode(li);
                }));

                removeButton.placeAt(actionsWrapperNode);

                li.sortUpLink = sortUpLink;
                li.sortDownLink = sortDownLink;

                return li;
            },

            _addImageToCollection: function (image) {
                if (image == null) {
                    return null;
                }

                var node = this._addHtmlNodesForImage(image);
                var o = {
                    image: image,
                    node: node
                };

                this._imageCollection.push(o);
                return o;
            },

            _getNodeIndex: function (node) {
                for (var i = 0; i < this._imageCollection.length; i++) {
                    var image = this._imageCollection[i];

                    if (image.node == node) {
                        return i;
                    }
                }

                return -1;
            },

            _getPreviewImageUrl: function (image) {
                if (this.previewCropName) {
                    return image.url + "-" + this.previewCropName;
                }

                return image.url;
            },

            _moveNode: function (index, step) {
                var newIndex = index + step;
                this._imageCollection.splice(newIndex, 0, this._imageCollection.splice(index, 1)[0]);
            },

            _onWidgetChanged: function () {
                this._changed = true;
                this.updateValue();
            },

            _removeImageNode: function(node) {
                for (var i = this._imageCollection.length - 1; i >= 0; i--) {
                    var image = this._imageCollection[i];

                    if (image.node == node) {
                        this._imageCollection.splice(i, 1);
                        domConstruct.destroy(image.node);
                        this._onWidgetChanged();
                        break;
                    }
                }
            },

            _setValueAttr: function (value) {
                if (value && !(value instanceof Array)) {
                    value = [value];
                }

                this._set("value", value);

                if (value && this._imageCollection.length == 0) {
                    this._addHtmlNodesForImages(value);
                    this._updateSortIcons();
                }
            },

            _sortNodeUp: function(node) {
                var prevNode = node.previousElementSibling;

                if (prevNode != null) {
                    this._moveNode(this._getNodeIndex(node), -1);
                    var parent = node.parentElement;
                    parent.insertBefore(node, prevNode);
                    this._onWidgetChanged();
                }
            },

            _sortNodeDown: function (node) {
                var nextNode = node.nextElementSibling;

                if (nextNode != null) {
                    this._moveNode(this._getNodeIndex(node), 1);
                    var parent = node.parentElement;

                    if (nextNode == parent.lastChild) {
                        parent.appendChild(node);
                    } else {
                        parent.insertBefore(node, nextNode.nextElementSibling);
                    }

                    this._onWidgetChanged();
                }
            },

            _updateSortIcons: function () {
                if (this._imageCollection.length < 1) {
                    return;
                }

                var firstIndex = 0;
                var lastIndex = this._imageCollection.length - 1;
                var firstItem = this._imageCollection[firstIndex];

                array.forEach(this._imageCollection, function (image) {
                    domClass.remove(image.node.sortUpLink, "disabled");
                    domClass.remove(image.node.sortDownLink, "disabled");
                });

                domClass.add(firstItem.node.sortUpLink, "disabled");

                if (lastIndex > firstIndex) {
                    var lastItem = this._imageCollection[lastIndex];
                    domClass.add(lastItem.node.sortDownLink, "disabled");
                } else {
                    domClass.add(firstItem.node.sortDownLink, "disabled");
                }
            }
        });
    });