generic opener DEV 0.6

by moob

HTML

<a href='#test1' data-target-reveal=''>I'm outside of the element on which this plugin is invoked so I should perform like an anhorred link (assuming my target is visible)</a>

<div id="testWrapper">
    <h1>Generic Opener Oojit</h1>
<p>The GOO is designed to allow you to toggle/open/close target elements by simply including a data-attribute in your markup. There are 3 methods for this: 
    <br />
    <code>data-target-reveal</code> - control the visibility of any id'ed element.<br />
    <code>data-self-reveal</code> - hides self and append more/less controls to the element.<br />
    <code>data-accordion</code> - invokes an accordion on the suitably formed element.
</p>

<p>
    For example, here's a anchorred link to #test1. It's data-target-visibility is set with NO options:<br />
    <a href='#test1' data-target-reveal=''><code>&lt;a href='#test1' data-target-reveal=''&gt;</code></a>
    <br />
    Toggle using the 'pop' animation:<br />
    <a href='#test1' data-target-reveal='{"animation":"pop", "speed":"fast"}'><code>&lt;a href='#test1' data-target-reveal='{"animation":"pop"}'&gt;</code></a>
    <br />
    'fade' is supported but is shit:<br />
    <a href='#test1' data-target-reveal='{"animation":"fade", "speed":100, "scrollToTarget":true}'><code>&lt;a href='#test1' data-target-reveal='{"animation":"fade"}'&gt;</code></a>
    <br />
    Open only ('drawer' animation):<br />
    <a href='#test1' data-target-reveal='{"action":"open","animation":"drawer"}'><code>&lt;a href='#test1' data-target-reveal='{"action":"open","animation":"drawer"}'&gt;</code></a>
     <br />
    Close only:<br />
    <a href='#test1' data-target-reveal='{"action":"close"}'><code>&lt;a href='#test1' data-target-reveal='{"action":"close"}'&gt;</code></a>
    
</p>
    <div id="test1">
        I'm only opened when you click on an anchorred link to me that contains the attribute <code>data-target-reveal</code>.<br />
    <a href="#test1"...

CSS

/* Example styles for demo */
body {font-family:Arial, san-serif;}
#testWrapper {margin:10px; padding:10px; border:1px solid #666;}
#test1 {display:block; padding:20px;}
#test2 {display:block; padding:20px;}

.opened {text-decoration:none; background-color:#eeffee;}
.closed {text-decoration:none; background-color:#ffeeee;}
a.opened:before, a.closed:before  {content : "-"; text-decoration:none; color:#aaa; width:1em; display:inline-block; text-align:center;}
a.closed:before {content : "+";}

*[data-target-reveal*="open"].opened{cursor:not-allowed; display:none;}
*[data-target-reveal*="open"].opened:before{content:'/';}
*[data-target-reveal*="close"].closed{cursor:not-allowed; display:none;}
*[data-target-reveal*="close"].closed:before{content:'/';}

*[data-self-reveal*="open"]{}
*[data-self-reveal]{}

code {background-color:#eee; color:#111; padding:2px; display:inline; border-radius:5px; border:1px solid #fff;}
a code {background-color:#eeeeff;}

#notice {padding:5px; background-color:#ffeeee; border:1px solid #aa0000; border-radius:5px;}

.animwraptemp {outline:0px dotted red}

div[data-accordion] {border-bottom:1px solid #333;}
div[data-accordion] h5 {display:block; border-top:1px solid #333; margin:0; padding:3px; cursor:pointer;}
div[data-accordion] div div {display:block; padding:3px;}

/* End example styles for demo. There are no required styles associated with this plugin */

JavaScript

/* DEV */
(function ($) {
        
    $.fn.targetOpener = function (options) {
        var settings = $.extend({
            action: 'toggle',//toggle, open, close
            animation: 'slide', //'slide','fade','drawer','pop','text'
            duration: "normal", //Transition time taken to complete animation regardless of object size (in milliseconds or "slow", "normal", "fast" keyword)
            speed: 0, //if (>0) the transition duration is calculated in based on this speed (in pixels per seconds or "slow", "normal", "fast" keyword)
            easing: "swing", //standard jquery easing - 'swing' or 'linear'
            scrollToTarget: false, //scrolls to target
            ready: null //optional function callback on initialisation
        }, options);
        
        
        
        getCalcDuration = function(_target,_duration,_speed,_easing){
            var durations = {slow:600, fast:200, _default:400};//transition time        
            var speeds = {slow:100, fast:1000, _default:500};//pixels per second
            //duration may be a keyword
                if(parseInt(_duration) >= 0){
                    //
                } else {
                    if(durations.hasOwnProperty(_duration)){
                        _duration = durations[_duration];
                    } else {
                        _duration = durations._default;
                    }
                };
            //speed may be a keyword
                if(parseInt(_speed) >= 0){
                    //
                } else {
                    if(speeds.hasOwnProperty(_speed)){
                        _speed = speeds[_speed];
                    } else {
                        _speed = speeds._default;
                    }
                };
            //if speed is set we want to move at a pixelPerSecond speed:    
                if(_speed > 0){
                    //calculate the time to perform the transition at this speed
                    var _h =...