contentSelector.js

Go to the documentation of this file.

 
define( [
                'remoto!stdlib:js/panes/pane.js',
                'remoto!stdlib:js/paneManager/paneManager.js',
                'remoto!stdlib:js/include/objectRegistry.js',
                'remoto!stdlib:js/include/utils.js',
                'include/modal/modal',
                'remoto!stdlib:js/panes/panes/contentSelector.css',
        ],
        function(pane,paneManager,objectRegistry,utils,modal)
        {
                'use strict';
 
                contentSelector.prototype = new pane;
                function contentSelector(layout)
                {
                        pane.call(this, layout);
 
                        this._type = "contentSelector";
 
                        this._transitioner = null;
                        this._value = null;
                        this._video = null;
                        this._mediaTracker = null;
                        this._playing = false;
 
                        //this._multi = false;                                  //really only for button mode, but may be useful in the future
 
                        //this._panes = [];
                        this._mediaItems = [];                                  //list of paths that we care about tracking
                }
 
 
                contentSelector.prototype.createHTML = function()
                {
                        if (this._html) return this._html;
 
                        pane.prototype.createHTML.call(this);
 
                        this._content.addClass("contentSelector");
                        this._content.on( "click", ".contentSelectorImage",             this.imageClick.bind(this) );
 
                        //mouse click/grab scroll
                        var THIS = this;
                        this._content.bind("mousedown", (e) => {
 
                                //console.log(e);
                                var nn = e.target.nodeName.toLowerCase();
                                if (nn === "input")
                                        return;
 
                                var slider = this._content[0];
                        //      var startX = e.pageX;
                                var startY = e.pageY;
                        //      var scrollLeft = slider.scrollLeft;
                                var scrollTop = slider.scrollTop;
                                $("body").bind( "mousemove", (e) => {
                                        //const x = e.pageX;
                                        //slider.scrollLeft = scrollLeft + (startX-x);
                                        const y = e.pageY;
                                        slider.scrollTop = scrollTop + (startY-y);
                                        THIS._scrolling = true;
                                        return false;
                                } );
                                $("body").bind( "mouseup", (e) => {
                                        $("body").unbind("mousemove");
                                        $("body").unbind("mouseup");
                                        setTimeout( function() {
                                                THIS._scrolling = false;
                                        }, 1 );
                                        return false;
                                } );
                                return false;
                        });
 
                        var events = "click touchstart";
                        this._content.on( events, ".contentSelectorMovie",                      this.movieClick.bind(this) );
                        this._content.on( events, ".contentSelectorMovieChapter",               this.movieChapterClick.bind(this) );
                        this._content.on( events, ".contentSelectorMoviePlaystate",             this.moviePlaystateClick.bind(this) );
 
                        this._content.on( "change input", ".contentSelectorMovieVolume",        this.movieVolumeChange.bind(this) );
                        this._content.on( "click", ".contentSelectorButton:not(.contentSelectorButtonInactive)",
                                                                                                this.buttonClick.bind(this) );
                        return this._html;
                }
 
 
                contentSelector.prototype.detach = function()
                {
                        //console.log("PT detach!");
 
                        return;
 
                        /*
                        for (var i=0;i<this._panes.length;i++)                  //don't do this._panes[i].detach()... it will destroy the child panes.
                                if (this._panes[i]._object)
                                        if (this._panes[i]._object.detach)
                                                this._panes[i]._object.detach();
                        */
                }
 
 
                contentSelector.prototype.applySubscription = function(data,metadata)
                {
                        //console.log("CS Apply Subscription",arguments);
 
                        if (this._subscribed)
                                return;
 
                        this._subscribed = true;
 
                        //this._value = data.value;
                        this._transitioner = data.paneTransitioner;
 
                        if (data.class)
                                this._content.addClass(data.class);
 
                        if (this._transitioner)
                                objectRegistry.registerObject( this._transitioner, this );
 
                        var diff = data;
 
                        var movieCount = 0;
 
                        this._content.empty();
 
                        for (var i=0; i<diff.children.length; i++)
                        {
                                var block = $("<div class='contentSelectorGroup'>").appendTo(this._content);
 
                                if (diff.children[i]["class"])
                                        block.addClass(diff.children[i]["class"])
 
                                switch(diff.children[i].type)
                                {
                                        case "movies":          var imgh = $("<h1>").appendTo(block).append(diff.children[i].name);
 
                                                                var movies = $("<div class='contentSelectorMovies'>").appendTo(block);
                                                                var chapters = $("<div class='contentSelectorMovieChapters'>").appendTo(block);
                                                                var controls = $("<div class='contentSelectorMovieControls'>").appendTo(block);
 
                                                                var _movies = diff.children[i].children;
                                                                for (var j=0; j<_movies.length; j++)
                                                                {
                                                                        var m_id = utils.uuid();
 
                                                                        var md = $("<div class='contentSelectorMovie'>").appendTo(movies);
                                                                        //var ma = $("<a href='#'>").appendTo(md);
                                                                        md.append("<img src='"+_movies[j].thumb+"'>");
                                                                        md.append("<br>");
                                                                        md.append(_movies[j].text);
                                                                        md.attr("value",_movies[j].value);
                                                                        md.attr("m_id", m_id );
 
                                                                        md.attr("video",_movies[j].video || _movies[j].value);
 
                                                                        if (_movies[j].video) this._video = _movies[j].video;           //ugly hack!
                                                                        movieCount++;                                                   //gross
 
                                                                        this._mediaItems.push( _movies[j].value );
 
                                                                //chapters
                                                                        var ch = _movies[j].chapters;
                                                                        if (ch.length > 0)
                                                                        {
                                                                                var mcg = $("<div class='contentSelectorMovieChaptersGroup'>").appendTo(chapters);
                                                                                mcg.append("Chapters:<br>");
                                                                                mcg.attr("m_id", m_id );
                                                                                for (var k=0; k<ch.length; k++)
                                                                                {
                                                                                        var mcgc = $("<div class='contentSelectorMovieChapter'>").appendTo(mcg);
                                                                                        mcgc.append("<img src='"+ch[k].thumb+"'>");
                                                                                        mcgc.append("<br>");
                                                                                        mcgc.append(ch[k].text);
                                                                                        mcgc.attr("value",ch[k].value);
                                                                                }
                                                                        }
 
                                                                        if (ch.length === 1)
                                                                        {       //mcg.hide();
                                                                                mcg.remove();           //another gross hack
                                                                        }
 
                                                                        if (_movies[j].html)
                                                                        if (_movies[j].html.trim() !== '')
                                                                        {
                                                                                var text = $("<div class='contentSelectorMovieText'>").appendTo(block);
                                                                                var mt = $("<div class='contentSelectorMovieTextGroup'>").appendTo(text);
                                                                                mt.attr("m_id", m_id );
                                                                                mt.append(_movies[j].html);
                                                                        }
                                                                }
 
                                                        //controls
                                                                //controls.append("<div class='contentSelectorMoviePlaystate'>&#9654; <b>&#8545;</b> PLAY/PAUSE</div>");
                                                                controls.append("<div class='contentSelectorMoviePlaystate'>&#9654;&#xFE0E; PLAY</div>");
                                                                controls.append("<input class='contentSelectorMovieVolume' type='range' min='0' max='1' step='.01'>");
 
                                                                break;
 
                                        case "images":          var imgh = $("<h1>").appendTo(block);
                                                                imgh.append(diff.children[i].name);
                                                                var imgs = diff.children[i].children;
                                                                for (var j=0; j<imgs.length; j++)
                                                                {
                                                                        var imgd = $("<div class='contentSelectorImage'>").appendTo(block);
                                                                        //var imga = $("<a href='#'>").appendTo(imgd);
                                                                        $("<img src='"+imgs[j].thumb+"'>").appendTo(imgd);
                                                                        imgd.append("<br>"+imgs[j].text);
                                                                        imgd.attr("value",imgs[j].value);
                                                                }
                                                                block.append("<br>");
                                                                block.append(diff.children[i].text);
                                                                break;
 
                                        case "html":            //console.log("HTML!");
                                                                //console.log(diff);
                                                                block.append(diff.children[i].html);
                                                                block.on("click", "[trigger]", this.htmlTriggerClick.bind(this));
                                                                break;
 
                                        case "buttons":         //console.log(diff);
                                                                this.drawButtons(diff.children[i].children,block);
                                                                this._mediaItems.push( diff.children[i].value );        //add a watcher for this item
 
                                                                break;
 
                                        default:                block.append("Unknown contentSelector type: "+diff.children[i].type);
                                                                console.log(diff.children[i]);
                                                                break;
                                }
                        }
 
                        if (movieCount !== 1)
                                this._video = null;
 
                        //console.log(this._mediaItems);
 
                        return this.applyDiff(data);
                }
 
 
                contentSelector.prototype.applyDiff = function(diff,user)
                {
                        //console.trace("CS apply diff!");
                        //console.log(diff);
                        //console.log(arguments);
 
                        try
                        {
                                if (diff.attributes && diff.attributes.state)           //for the case where the transitioner is being changed
                                {       this.value = diff.attributes.state.value;
                                        //this.postUpdate( this._value, true );
                                        //console.log("set value 2!");
 
                                        this.setButtonStates(diff.attributes);          //a hack!  kind of inefficient. should use mediaTracker!
                                }
 
                                if (diff.value)                                         //for the case where the group is being changed
                                {       this.value = diff.value;
                                        //console.log("set value 1!");
                                        //console.warn( "diff.value is deprecated... write values to the transitioner instead." );
 
                                        this.setButtonStates(diff.value);               //a hack!  kind of inefficient. should use mediaTracker!
                                }
                        }
                        catch(e)
                        {
                                console.error(e);
                        }
                }
 
 
                contentSelector.prototype.applySettings = function(settings)
                {
                        //console.log("CS apply settings");
                        //console.trace(arguments);
                }
 
 
                contentSelector.prototype.destroy = function()
                {
                        if (this._transitioner)
                                objectRegistry.unregisterObject( this._transitioner, this );
 
                        this.value = null;                                              //will also unregister the current media object
                        this._mediaItems = [];
 
                        pane.prototype.destroy.call(this);
                }
 
 
                contentSelector.prototype.htmlTriggerClick = function(evt)
                {
                        var t = $(evt.currentTarget);
                        var r = JSON.parse( t.attr("trigger") );
 
                        for(var tr in r)
                                this._html.trigger(tr,r[tr]);
 
                        return false;
                }
 
 
                contentSelector.prototype.movieClick = function(evt)
                {
                        var mov = $(evt.currentTarget);
                //      var value = mov.attr("video") || mov.attr("value");
                        var value = mov.attr("value");
                        this.value = value;
 
                        this._video = mov.attr("video");
 
                //      this.play = false;
 
                        var u = { attributes: { state: { value: value } } };
 
                //      objectRegistry.applyDiff( this._transitioner, u, null, this );
                        this.postUpdate( value );
 
                        return false;
                }
 
 
                contentSelector.prototype.movieChapterClick = function(evt)
                {
                        var chapter = $(evt.currentTarget);
                        var chapterValue = chapter.attr("value");
 
                        var u = { attributes: {} };
                        u.attributes.play = { value: true };
                        u.attributes.chapter = { value: chapterValue };
 
                //      objectRegistry.applyDiff( this._transitioner, u, null, this );
                        this.postMovieUpdate( this._video || this._value, u );
 
                        return false;
                }
 
                contentSelector.prototype.movieVolumeChange = function(evt)
                {
                        //console.log("movieVolumeChange",evt);
 
                        var v = $(evt.currentTarget).val();
                        var u = { attributes: { volume: { value: v } } };
 
                //      objectRegistry.applyDiff( this._path, u, null, this );
                        this.postMovieUpdate( this._video || this._value, u );
 
                        return false;
                }
 
                contentSelector.prototype.moviePlaystateClick = function(evt)
                {
                        var u = { attributes: {} };
                        u.attributes.play = { value: !this._playing };
 
                        this.play = !this._playing;
                        //console.log(this._playing);
                        //console.log(this._video);
 
                        this.postMovieUpdate( this._video || this._value, u );
 
                        return false;
                }
 
                contentSelector.prototype.imageClick = function(evt)
                {
                        var img = $(evt.currentTarget);
                        var value = img.attr("value");
                        this.value = value;
 
                        var u = { attributes: { state: { value: value } } };
 
                //      objectRegistry.applyDiff( this._transitioner, u, null, this );
                        this.postUpdate( value );
 
                        return false;
                }
 
                contentSelector.prototype.__defineSetter__("value", function(v)
                {
                        //console.trace(v);
 
                        if (v !== this._value)
                        {
                                if (this._mediaTracker)
                                {       this._mediaTracker.destroy();
                                        this._mediaTracker = null;
                                }
 
                                this._value = objectRegistry.extendDefinition(v,this._value);
                                //this._value = v;
                                //console.log("value: "+this._value);
 
                                this._content.find(".contentSelectorImageSelected").removeClass("contentSelectorImageSelected");
                                this._content.find(".contentSelectorImage[value='"+v+"']").addClass("contentSelectorImageSelected");
 
                                this._content.find(".contentSelectorMovieSelected").removeClass("contentSelectorMovieSelected");
                                this._content.find(".contentSelectorMovieControls").hide();
                                this._content.find(".contentSelectorMovieTextGroup").hide();
                                this._content.find(".contentSelectorMovieChaptersGroup").hide();
                                var m = this._content.find(".contentSelectorMovie[value='"+v+"']").addClass("contentSelectorMovieSelected");
                                if (m.length)
                                {
                                        var m_id = m.attr("m_id");
                                        this._content.find("[m_id='"+m_id+"']").show();
                                        this._content.find(".contentSelectorMovieControls").show();
                                }
 
                                if (this._value && this._mediaItems.indexOf(this._value) > -1)
                                {       this._mediaTracker = new mediaTracker(this._value,this);
                                }
                        }
                });
 
                contentSelector.prototype.__defineSetter__("chapter", function(chapter)
                {
                        var c = (chapter.value) ? chapter.value : chapter;
 
                        //console.log("chapter: "+c);
                        //console.log(chapter);
 
                        this._content.find(".contentSelectorMovieChapterSelected").removeClass("contentSelectorMovieChapterSelected");
                        //this._content.find(".contentSelectorMovieChaptersGroup:visible").find(".contentSelectorMovieChapter[value='"+c+"']").addClass("contentSelectorMovieChapterSelected");
                        this._content.find(".contentSelectorMovieChaptersGroup").find(".contentSelectorMovieChapter[value='"+c+"']").addClass("contentSelectorMovieChapterSelected");
                });
 
                contentSelector.prototype.__defineSetter__("play", function(play)
                {
                        var p = play.value;
 
                        if (play.value === undefined) {
                                p = play;
                        }
 
                        //console.log("play: "+p);
 
                        this._playing = p;
 
                        if (p)
                        {
                                this._content.find( ".contentSelectorMoviePlaystate" ).html("<span class='video-pause'>PAUSE</span>");
                        }
                        else
                        {
                                this._content.find( ".contentSelectorMoviePlaystate" ).html("<span class='video-play'>PLAY</span>");
                        }
                });
 
                contentSelector.prototype.__defineSetter__("volume", function(v)
                {
                        var vol = Math.min( Math.max( v.value, 0 ), 1 );
 
                        //console.log("volume: "+vol);
 
                        this._content.find( ".contentSelectorMovieVolume" ).val(vol);
                });
 
                /*
                contentSelector.prototype.postUpdate = function(u)
                {
                        var update = {};
 
                //      update[this._path] = u;
                        update[this._transitioner] = u;
 
                        return this.postUpdateCallback.call(this,update);
                }
                */
 
                contentSelector.prototype.postUpdate = function(v,target)//,selfOnly)
                {
                        target = target || this._transitioner;
                        target = utils.cleanPath( target );
 
                        var u1 = { attributes: { state: { value: v } } };
                        var u2 = { value: v };
 
                        var update = {};
                        //if (!selfOnly)
                                update[target] = u1;
                        update[this._path] = u2;                                        //we don't need this... just sending to the pane transitioner is enough
 
                        return this.postUpdateCallback.call(this,update);
                }
 
                contentSelector.prototype.postMovieUpdate = function(m,u)
                {
                        m = utils.cleanPath( m );
 
                        var update = {};
                        update[m] = u;
 
                        return this.postUpdateCallback.call(this,update);
                }
 
                /*
                contentSelector.prototype.postButtonUpdate = function(m,u)
                {
                        var update = {};
                        update[m] = u;
 
                        return this.postUpdateCallback.call(this,update);
                }
                */
 
                contentSelector.prototype.drawButtons = function(buttons,block)
                {
                        var max = 0;
 
                        for (var b in buttons.buttons)
                        {
                                var button = buttons.buttons[b];
 
                                var t = $("<div class='contentSelectorButton'>");
                                t.text( button.name );
 
                                var c = ["height","width","top","bottom","left","right"];
                                for (var i=0;i<c.length;i++)
                                        if (button.hasOwnProperty(c[i]))
                                                t.css( c[i], button[c[i]] );
 
                                t.addClass( button["class"] );
                                t.attr( "attribute", button.attribute );
                                t.attr( "value", button.value );
                                if(button.data)
                                        t.attr("data-light",button.data);
 
 
                                if (button.target)
                                        t.attr("target",utils.cleanPath(button.target) );
 
                                if (button.modal)
                                {
                                        var m_id = "modal_"+utils.uuid();
 
                                        var m = $("<div class='contentSelectorModalContent'>");
                                        m.attr("id", m_id);
                                        m.append( button.modalHTML );
                                        m.appendTo( block );
 
                                        t.attr("modal",m_id);
                                }
 
                                if (button.toggle)
                                        t.attr("toggle",button.toggle);
 
                                if (button.trigger)
                                        t.attr("trigger", JSON.stringify(button.trigger) );
 
                                if (!button.enabled) t.addClass( "contentSelectorButtonInactive" );
                                        t.appendTo( block );
 
                                if (button.top && button.top + button.height > max)
                                        max = button.top + button.height;
                                if (button.bottom && button.bottom + button.height > max)
                                        max = button.bottom + button.height;
                        }
 
                        block.css( { "height": max+"px" } );
 
                        for (var g in buttons.groups)
                        {
                                //console.log(g);
                        }
                }
 
                /*
                contentSelector.prototype.applyFilter = function(evt)
                {
 
                        var checkDatas = $('div.contentSelectorButton.building_unit').data();
                        var priceRange = $('input.price').value();
                        var bedroomsRange = $('input.bedrooms').value();
                        var bathroomsRange = $('input.bathrooms').value();
                        var tarrace = $('input.tarrace').value();
                        for(var data in checkDatas)
                        {
 
                                if(data.bedrooms > bedroomsRange[0] && data.bedrooms < bedroomsRange[1]
                                        && data.price > priceRange[0] && data.price < priceRange[1]
                                        && data.bathrooms > bathroomsRange[0] && data.bathrooms < bathroomsRange[1]
                                        && data.tarrace == tarrace)
                                {
 
                                }
                        }
                }
                */
 
                //set the current state of any buttons
                contentSelector.prototype.setButtonStates = function(state)
                {
                        //console.log(state);
 
                        if (typeof(state)=="object")
                        for (var attr in state)
                        {
                                //if(attr != "all")
                                //{
                                        var v = state[attr].value;
                                        //var v = state[attr];
                                        this._content.find(".contentSelectorButton[attribute='"+attr+"']").removeClass("contentSelectorButtonSelected");
                                        this._content.find(".contentSelectorButton[attribute='"+attr+"'][value='"+v+"']").addClass("contentSelectorButtonSelected");
                                //}
                        }
                }
 
                contentSelector.prototype.buttonClick = function(evt)
                {
                        //console.log("button click!");
                        //console.log(evt);
                        //console.log( this._value );
 
                        var t = $(evt.currentTarget);
                        var attrs = t.attr("attribute");
                        var target = t.attr("target");
                        var modalID = t.attr("modal");
                        var toggle = t.attr("toggle");
                        var val = t.attr("value");
                        var attr;
 
                        attrs = attrs ? attrs.split(",") : [];
                        target = utils.cleanPath( target );
 
                        var u = { attributes:{} };
                        var u2 = { value: {} };
 
                        for (var i=0; i<attrs.length; i++)
                        {
                                attr = attrs[i];
 
                                if (attr === '')
                                        continue;
 
                                if (toggle)
                                {
                                        if (this._value && this._value[attr])
                                        {       val = this._value[attr].value == "true" || this._value[attr].value === true ? false : true;
                                                this._value[attr].value = val;
                                        }
                                }
 
                                //console.log("click: "+attr+" "+val+" :: "+this._value);
 
                                u.attributes[attr] = { value: val };
                                u2.value[attr] = { value:val };
                        }
 
                        var update = {};
                        update[ target ] = u;
                        update[ this._path ] = u2;
 
                        this.postUpdateCallback.call(this,update);
                        this.setButtonStates( u2.value );
 
 
                        if (modalID)
                        {
                                //console.log("would open modal "+modalID+" here!");
                                var self = this;
                                var bModal = {
                                        exec:   function(_modal)
                                                {
                                                        var mount = _modal._center;
                                                        //var mount = _modal._mount;
 
                                                        var m = $("<div class='contentSelectorModal'/>").appendTo(mount);
 
                                                        m.append( $("#"+modalID).clone().show() );
 
                                                        var bs = $("<div class='contentSelectorModalButtons'>").appendTo(m);
                                                        var b = $("<button>").text("Close");
                                                        b.bind("click", function() { _modal.execEvent("close"); return false; });
                                                        b.appendTo(bs);
 
                                                        setTimeout( function() {
                                                        mount.bind("click", function() { _modal.execEvent("close"); return false; });
                                                        }, 100 );
 
                                                        m.bind("click", false);
 
                                                        m.on("click","div.contentSelectorImage",function(e) {
 
                                                                        console.log("allowing event to bubble!");
 
                                                                        $(e.target).parent().siblings().children().removeClass("active");
                                                                        $(e.target).addClass("active");
                                                                        self.imageClick(e);
 
 
                                                        } );
 
                                                        $(window).trigger("modalOpen");
 
 
 
                                                },
                                };
 
                                modal.exec( bModal, { "close":false } );
                        }
                }
 
                //a holding object to track media activity
                function mediaTracker(path,selector)
                {
                        //console.log("new media tracker: "+path);
 
                        this._path = utils.cleanPath(path);
                        this._subscribed = false;
                        this._type = null;
                        this._selector = selector;
 
                        objectRegistry.registerObject( this._path, this );
                }
 
                mediaTracker.prototype.destroy = function()
                {
                        //console.log("destroy media tracker");
 
                        objectRegistry.unregisterObject( this._path, this );
 
                        this._selector = null;
                }
 
                mediaTracker.prototype.applySubscription = function(data,metadata)
                {
                        //console.log("Media Tracker apply subscription");
                        //console.log(arguments);
 
                        this._type = metadata.type;
 
                        this.applyDiff(data);
                }
 
                mediaTracker.prototype.applyDiff = function(diff,user)
                {
                        //console.log("Media Tracker apply diff",this,arguments);
 
                        switch( this._type )
                        {
                                case "video":
                                case "videoPlayer":     //console.log(diff);
                                                        if (diff.attributes)
                                                                for (var a in diff.attributes)
                                                                        if (this._selector.__proto__.hasOwnProperty(a))
                                                                                this._selector[a] = diff.attributes[a];
                                                                        //else
                                                                        //      console.log("selector has no attribute: "+a);
                                                        break;
 
                                case "requireModule":   //console.log("require module tracker!");
                                                        //console.log(diff);
                                                        if (diff.attributes)
                                                                this._selector.setButtonStates(diff.attributes);
                                                        break;
 
                                default:                //console.log("Type: "+this._type);
                                                        break;
                        }
                }
 
                return contentSelector;
        }
);