generic opener DEV 0.3

by moob

HTML

<h1>Generic opener</h1>
<p>Vestibulum id ligula porta felis euismod semper. <a href="#test1" data-target-visibility='{"action":"toggle"}' >Toggle #test1</a> Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.<p>
    
    <p>Any <code>link</code> with a <code>data-target-visibility</code> can be open/closed/toggled depending on the data-target-visibility value (a JSON string).<br />
        <strong><code>data-target-visibility='{"action":["open"|"close"|"toggle"],"animation":["slide"|"fade"|"collapse"]","speed"["fast"|"slow"|int]}'</code></strong><br />
        <code>open</code> = initially closed, opens on click, will not close<br />
        <code>close</code> = initially opened, closes on click, will not open<br />
        <code>toggle</code> = initially closed, toggles open or closed on click<br />
    </p>
    <p>
        <br />
        <a href="#test2" data-target-visibility='{"action":"toggle","animation":"slide","duration":1000}'><strong>Toggle with a transition duration of 1 second:</strong><br />&lt;a href="#test2" data-target-visibility='{"action":"toggle","animation":"slide","duration":1000}'&gt;</a><br />
        <a href="#test2" data-target-visibility='{"action":"toggle","animation":"slide","speed":100}'><strong>Toggle with a transition speed of 100 pixels per second:</strong><br />&lt;a href="#test2" data-target-visibility='{"action":"toggle","animation":"slide","pixelsPerSecond":100}'&gt;</a>
    </p>      
        
<div id="test1">
    I'm only opened when you click on an anchorred link to me that contains the attribute data-target-visibility='{"action":["toggle"|"show"]}'.<br />
    <a href="#test1" data-target-visibility='{"action":"close","duration":100}'>close me fast</a>
</div>
    
    
    <div id="test2">
    I'm test two. I'm 100px high;
</div>
    
    
    <h4>Anchored link toggler:</h4>
    <ul>
        <li><a href="#i3" data-target-visibility='unmatched'>3 asdas</a></li>
...

CSS

#test1 {display:block; background-color:#ccc; padding:0px; height:200px;}
#test2 {display:block; background-color:#ccc; padding:0px; height:100px;}

.open {background-color:green;}
.closed {background-color:inherit;}

*[data-self-visibility]{background-color:#ccc; padding:10px;}

JavaScript

/* DEV */
(function ($) {
        
    $.fn.targetOpener = function (options) {
        var settings = $.extend({
            action: 'toggle',
            animation: 'slide',
            speed: 400,
            duration: 400, //regular animation speed.IE time taken to do complete animation regardless of object size. Ideally we should add a PixelsPerSecond speed option
            pixelsPerSecond: 0, //if >0 the transition speed is calculated in pixels per seconds
            easing: "swing", //'swing' or linear
            complete: null //function callback on complete
        }, options);
        
        

        
        return this.each(function () {
            
            var zis = $(this),
                standardTriggers = $("[data-target-visibility]"),
                childTogglers = $("[data-self-visibility]"),
                transitionSpeed = function(el,pps){
                    /* (height/pixelsPerSecond)*1000 */
                    var dim = parseInt(el.outerHeight());
                    return (dim/pps)*1000;
                }
            
            
            /* standard triggers - open/closes/toggles matched children by id */
            standardTriggers.each(function(){
                
                var trigger = $(this),
                    target = $(""+trigger.attr("href")),
                    vdata = trigger.data("target-visibility"),
                    action = settings.action,
                    animation = settings.animation,
                    duration = vdata.duration || settings.duration,
                    pixelsPerSecond = vdata.pixelsPerSecond || settings.pixelsPerSecond,
                    easing = settings.easing;
                /**/
                console.log("pixelsPerSecond"+pixelsPerSecond);    
                if(pixelsPerSecond > 0){                    
                    duration = transitionSpeed(target,pixelsPerSecond);
                    easing = "linear";
                };
               ...