Sharing Deep Linking

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 not-sharable">
        <button class="sharebut">share</button>
    </div>
    <div id="tab3" class="tab-panel tab-panel-3">
        <button class="sharebut">share</button>
    </div>
    <div id="tab4" class="tab-panel tab-panel-4">
        <div class="slider sharable">&lt;
            <div class="slide slide-1">
                <div class="newpicture"></div>
                <button class="sharebut">share</button>
            </div>
            <div class="slide slide-2">
                <div class="newpicture"></div>
                <button class="sharebut">share</button>
            </div>&gt;</div>
    </div>
</div>
<br>
<br>
<input id='link' value='' />
<br/>
<input id='hexlink' value='' />
<br/>
<button id='deep'>on page load</button>

CSS

.tab-panel {
    display:inline-block;
    border:1px solid red;
    width:200px;
    height:130px;
    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

/* 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') */

function page_change(p) {
    alert("Change to page: " + p);
}

function tab() {

    this.sharecb = function () {
        return "tab1.tab_change(4)"
    }
    this.tab_change = function (tab) {
        alert("tab_change to tab:" + tab);
        $(".tab-panel-" + tab).addClass('selected');
    }
    return this
}
var tab1 = new tab();

$(".tab").data('share_callback', tab1.sharecb);

function slider() {

    this.sharecb = function () {
        return "slider1.slider_change(1)"
    }
    this.slider_change = function (slide) {
        alert("slider_change to slide:" + slide);
        $(".slide-" + slide).addClass('selected');
    }
    return this

}
var slider1 = new slider();

$(".slider").data('share_callback', slider1.sharecb);

$('.sharebut').on('click', 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).data('share_callback'));
        s.unshift($(this).data('share_callback')($button))

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

});


$('#deep').on('click', function () {
    var v = $('#link').val();
    var arr = JSON.parse(v);
    for (var i = 0; i < arr.length; i++) {
        eval(arr[i]);
    }
});

function convertToHex(str) {
    var...