Stylish Modules as in a module

by Farzad Cyrus

HTML

<div id="header">
    <nav>
        <ul>
            <li><a href="/toggle">Toggle</a></li>
			<li><a href="/modal">Modal</a></li>
			<li><a href="/tooltip">Tooltip</a></li>
        </ul>
    </nav>
</div>
<div id="content">
    <div class="sidebar" data-module="toggle" data-active="true" data-direction="right">
        <button data-trigger>Toggle</button>

        <div class="container">
            <a class="" href="#" data-module="tooltip" data-title="My First Tooltip"><span>Anchor #1</span></a>

            <a class="" href="#" data-module="tooltip" data-title="My Second Tooltip"><span>Anchor #2</span></a>
        </div>

    </div>
</div>


<div class="footer" data-module="toggle:expand" data-on="hover">
    Hello, this is a test.
</div>


<div clsss="module module-modal stylish-module stylish-modal">
    <p>Hello your custom message goes here</p>
</div>

CSS

body {
    font-family: sans-serif;
    font-size: 12px;
    position: relative;
}

#header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	background: #fff;
	box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
	z-index: 9;
	height: 40px;
}
#header nav {
	margin: 0;
	padding: 0;
	height: 100%;
	width: auto;
	text-align: center;
}
#header nav ul {
	list-style:none;
	position: relative;
	height: 100%;
	display: inline-block;
	margin: 0 auto;
	padding: 0;
}
#header nav ul li {
	float: left;
	display: inline-block;
	border-left: 1px solid #eee;
	height: 100%;
	padding: 0;
	margin: 0;
}
#header nav ul li a {
	display: block;
	height: 100%;
	line-height: 100%;
	text-decoration: none;
	width: 100%;
	color: #445;
	padding: 0 16px;
}

.sidebar {
    position: fixed;
    height: 100%;
    left: 0;
    background: #334;
    color: #fff;
    width: 160px;
}

.sidebar button {
    position: absolute;
    top: 48px;
    right: -32px;
    width: 32px;
    height: 32px;
    border: none;
    background: #778;
    color: #fff;
    font-weight: normal;
    cursor: pointer;
    font-size: 9px;
    text-transform: uppercase;
}

.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    right: 0;
    height: 48px;
    line-height: 48px;
    background-color: #22aaaa;
    color: #fff;
    padding: 0 16px;
}

.modal {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 460px;
    height: 240px;
    border-radius
}

JavaScript

var stylish = function(options) {
    var self = this;

    this.init();

    /*
  
    this plugin should be called, stylish or stylishUI 
    or something along these lines
      ___________________________________________
    1) look for data-module in our selector that's coming from
    	options, by default this should be set to 'body', but
      there may be a case where user may want to run it for
      a particular container as this would also speedup
      the page load time
      ___________________________________________
    2) detect what modules should run by looking which modules
    	is used within our selector
      ___________________________________________
    3) initialise the modules 
    		A) each module fires its own ui and event handlers
        B) if each module detects there is missing tag
        /structure, then it should correct it
      ___________________________________________
    4) module names and their types must be valid mapping 
    	from our module object, and should run on valid() method
      as true of false, other methods rely on this method as
      to whether fire or not
  
    // pass the module name to this, it will return the ui
    // for that particular module
    this.ui(moduleName);
      ___________________________________________
    // this fires the modal module
    // this module can be turned off
    this.module.modal();
      ___________________________________________
    // this fires the tabs module
    // this module can be turned off
    this.module.tabs();
      ___________________________________________
    // this module can be turned off
    this.module.toggle();
  
    */

};


stylish.prototype.init = function() {
    var $module = $('[data-module]');

    var self = this;

    $module.each(function(index, element) {
        var module = $(element),
            moduleValue = module.data('module'),
            moduleName = null,
            moduleType = null,
            moduleValueArray =...