Sharing Deep Linking (V2)

by Ben Clayton

HTML

<div class="tab sharable">
    <div id="tab1" class="tab-panel tab-panel-1">
        <button class="sharebut">share</button>
    </div>
    <div id="tab2" class="tab-panel tab-panel-2">
        <div class="pgrid sharable"></div>
    </div>
</div>
<br>
<br>
<input id='link' value='' />
<br/>
<input id='hexlink' value='' />
<br/>
<button id='deep'>on page load</button>/* The concept is to make a structure which can be processed generically to so a shared picture / page can be redisplayed. Including operations like: 1) Change to correct page 2) Changing to correct tab (in multiple nested tabs) 3) Slide to correct slide in Slick Slider 4) Scroll to named element? 5) check timestamp and report link is too old. 6) check version to know how to break string. */ /* The tabset should ideally be refound by unique id/name via a jquery selector (don't want global handles like 'tab1') */

CSS

.tab-panel {
    display:inline-block;
    border:1px solid red;
    width:400px;
    height:200px;
    margin:10px;
}
.tab-panel.selected {
    border:4px solid red;
}
.slider {
    border:1px solid blue;
    width:90%;
    height:100px;
    margin:3%;
}
.slide {
    display:inline-block;
    border:1px solid blue;
    width:30%;
    margin:3%;
}
.slide.selected {
    border:4px solid blue;
}
.newpicture {
    width:90%;
    height:50px;
    margin:3%;
    background-color:#C0C0C0
}
#link, #hexlink {
    width:650px;
}

JavaScript

var griddata = [{
    "width": "968",
        "height": "648",
        "rgb": "rgb(163,150,146)",
        "Path": "ballons.png",
        "type": 11,
        "UniqueID": 4234
}, {
    "width": "968",
        "height": "648",
        "rgb": "rgb(163,150,146)",
        "Path": "ball.png",
        "type": 11,
        "UniqueID": 5001
}];


function base() {
    this.sharebutClick = function () {
        var s = [];
        var $button = $(this);
        if ($(this).parents('.not-sharable').length > 0) {
            alert('NO SHARE POSS');
            return;
        }

        $(this).parents('.sharable').each(function () {
            console.log( $(this) );
            s.unshift( $(this).data('sharecb')() );

        });
        s.unshift("page_change('" + location.href + "')");
        var j = JSON.stringify(s);
        $('#link').val(j);
        $('#hexlink').val(convertBase64(j));

    };
    this.sharecb = function (cfg) {
        return "base"
    }

}


function tab() {
    this.el = null;
    this.sharecb = function (cfg) {
        return "tab1.tab_change(4)"
    }
    this.tab_change = function (tab) {
        alert("tab_change to tab:" + tab);
        $(".tab-panel-" + tab).addClass('selected');
    }
    this.init = function (el) {
        this.el = el;
        this.el.data('object', this);
    }
    return this
}
tab.prototype = new base();

var tab1 = new tab();
tab1.init($(".tab"));

function picture(data) {
    this.width = data.width;
    this.height = data.height;
    this.UniqueID = data.UniqueID;
    this.Path = data.Path;

    this.sharecb = function (cfg) {
        return {
            ".image": "name" + this.UniqueID
        };
    }
    this.htmlobj = function () {
        var $elobj = $('<div class="image sharable">' +
            '<div class="newpicture"></div>' +
            '<button class="sharebut">share</button>' +
            '</div>');
        $elobj.data('object', this);
        $elobj.find('.sharebut').on('click',...