Sausage.js example

Sausage.js example

by azproduction

HTML

<script src="http://sausage-js.googlecode.com/svn/trunk/Sausage.js"></script>
<h1>Sausage.js - Context Switch</h1>
<pre>
var context = {'foo': {'bar': '100500'}, 'bar': '888', 'zoo': /.*/};
$$(context)
('foo')
('bar', -1)
('zoo')
(); // undefined
</pre>


<h1>Sausage.js - Fixed Context</h1>
<pre>
var context = {'foo': {'bar': '100500'}, 'bar': '888', 'zoo': /.*/};
 $$(context, {fixedContext: true})
('foo')
('bar', -1)
('zoo')
(); // /.*/
</pre>

<h1>Sausage.js - Function call</h1>
<pre>
var context = {'foo': 1};
$(context)
('foo', 1000)
(function (context) {
    return '' + context.foo / 2;
})
('length')
(function (context) {
    return typeof context;
})
(); // number
</pre>

<h1>Sausage.js - DOM Chain Wrapper</h1>
<pre>
$$(document)
('getElementById', 'div1')
('style')
    ('width', '100px')
    ({
        height: '100px',
        color: 'red',
        border: 'solid 1px blue'
    })
(); // CSSStyleDeclaration Object
</pre>
<div id="div1">Test</div>

<h1>Sausage.js - jQuery Chain Wrapper</h1>
<pre>
$$(jQuery)
(['#div2'])
('css', {width: '100px', height:'100px', color: 'red', border: 'solid 1px blue'})
('animate', {width: '200px', height:'200px'})
();
</pre>
<div id="div2">Test</div>

<h1>Sausage.js - Canvas Chain Wrapper</h1>
<pre>
var canvasContext = $$(document)('querySelectorAll', 'canvas')(0)('getContext', '2d')();
$$(canvasContext, {fixedContext: true})
('fillStyle', '#eee')
('strokeStyle', 'blue')
('beginPath')
('moveTo', 10, 10)
('lineTo', 100, 10)
('lineTo', 100, 100)
('lineTo', 10, 100)
('lineTo', 10, 10)
('closePath')
('stroke')
('fill')
();
</pre>
<canvas></canvas>

CSS

h1 {
    font-size: 25px;
    margin: 10px 0;
}
pre {
    margin: 10px 0;
}

JavaScript

var context, result, canvasContext;


// Example 1. Context Switch
context = {'foo': {'bar': '100500'}, 'bar': '888', 'zoo': /./};
// Creating Sausage with {'foo': {'bar': '100500'}, 'bar': '888', 'zoo': /./}
result = $$(context)
('foo')     // Switch context to {'bar': '100500'}
('bar', -1) // Change foo.bar property
('zoo')     // Switch to foo.bar.zoo
();         // Returns context - undefined '100500'.zoo - null


//  Example 2. Fixed Context
context = {'foo': {'bar': '100500'}, 'bar': '888', 'zoo': /./};
//  Creating Sausage with {'foo': {'bar': '100500'}, 'bar': '888', 'zoo': /./}
result = $$(context, {fixedContext: true})
('foo')     //  Trying to switch context to {'bar': '100500'} but context keeps cos of fixedContext: true
('bar', -1) // Change bar
('zoo')     // Switch to zoo
();         //  Returns context- /./




//  Example 3. Function call
context = {'foo': 1};
//  Creating Sausage with {'foo': 1}
result = $$(context)
('foo', 1000)
(function (context) { // Pass function as arg to work with current context
    return '' + context.foo / 2; // Return current context - string '500'
})
('length') // Switch to  '500'.length
(function (context) {
    return typeof context; //  Return current context - string 'number'
})
(); //  Returns context - number




//  Example 4. DOM Chain Wrapper
result = $$(document)
('getElementById', 'div1')
('style')
    ('width', '100px') // Changing property
    ({  // Pass object to bulk edit
        height: '100px',
        color: 'red',
        border: 'solid 1px blue'
    })
(); // CSSStyleDeclaration Object



//  Example 5. jQuery Chain Wrapper
result = $$(jQuery)
(['#div2']) // If first arg - array and current context - function, then context calls with args in array
('css', {width: '100px', height:'100px', color: 'red', border: 'solid 1px blue'})
('animate', {width: '200px', height:'200px'})
(); // jQuery



//  Example 6. Canvas Chain Wrapper
canvasContext = ('v'=='\v') || $$(document)('querySelectorAll',...