generic opener DEV 0.5

by moob

HTML

<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 2 methods for this: <code>data-target-visibility</code> (for when you want to control any id'ed element) and <code>data-self-visibility</code> (for when you want to add a more/less controls to the 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-visibility=''><code>&lt;a href='#test1' data-target-visibility=''&gt;</code></a>
    <br />
    Toggle using the 'pop' animation:<br />
    <a href='#test1' data-target-visibility='{"animation":"pop", "speed":"fast"}'><code>&lt;a href='#test1' data-target-visibility='{"animation":"pop"}'&gt;</code></a>
    <br />
    Toggle using the 'fade' animation:<br />
    <a href='#test1' data-target-visibility='{"animation":"fade", "speed":100}'><code>&lt;a href='#test1' data-target-visibility='{"animation":"fade"}'&gt;</code></a>
    <br />
    Open only ('drawer' animation):<br />
    <a href='#test1' data-target-visibility='{"action":"open","animation":"drawer"}'><code>&lt;a href='#test1' data-target-visibility='{"action":"open","animation":"drawer"}'&gt;</code></a>
     <br />
    Close only:<br />
    <a href='#test1' data-target-visibility='{"action":"close"}'><code>&lt;a href='#test1' data-target-visibility='{"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 data-target-visibility='{"action":["toggle"|"show"]}'.<br />
    <a href="#test1" data-target-visibility='{"action":"close","duration":100}'>close me fast</a><br />
    <a href="#test1" data-target-visibility='{"action":"close","speed":20}'>close me at slow (just 20px per second)</a>
</div>
    
    <p id="notice"><strong>Important:</strong> <code>data-target-visibility</code> and...

CSS

/* Example styles for demo */
body {font-family:Arial, san-serif;}
#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-visibility*="open"].opened{cursor:not-allowed; display:none;}
*[data-target-visibility*="open"].opened:before{content:'/';}
*[data-target-visibility*="close"].closed{cursor:not-allowed; display:none;}
*[data-target-visibility*="close"].closed:before{content:'/';}

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

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:1px 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'
            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'
            complete: 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 = parseInt(_target.outerHeight());
                    _duration =...