Implementation Of a Model View Binding

Syncronizes the model with the view and vice versa so every change in the model gets automatically reflected in the view.

Create the controller

    new nivo.Controller('MainCtrl', function($scope) {
        // Assign some defaults to the scope
        $scope.title = "Implementation Of a Model View Binding";
        $scope.contents = {
            copy: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam'
        }

        // Alter some models to see some changes
        setTimeout(function(){
            // whenever you want a model to be reflected in the view you need to call the set-method
            $scope.title += ' ...got extended'; // alter the model
            $scope.set('title'); // and trigger the update
        }, 1000 );

        setTimeout(function(){
            $scope.set('title', 'Some totally new title'); // or just pass a new value directly to the model
        }, 2000);
    });

Create the view

    <div nv-controller="MainCtrl">
        <h1>{{title}}</h1>

        <p>
            {{contents.copy}}
        </p>

        <div>
            <label>Title</label>
            <input type="text" nv-model="title" />
        </div>

        <div>
            <label>Copy</label>
            <textarea nv-model="contents.copy"></textarea>
        </div>

        <p>
            {{title}} : {{contents.copy}}</p>
    </div>

Update The Fontsize Of A View On Resize

ResponsiveModule.add(view, breakpointInfo [, breakpointInfo2])

ResponsiveModule provides a single method to initialize the automated update of the fontsize for a given view. If desired you can pass multiple scaleDefinitions.

Scaledefinition

In order to configure the way views get resized by their fontsize you can adjust a few details:

{int} viewWidthOrig The actual width of the view when ResponsiveModule was not in use
{array} scaleRange The range in which the resizement should be applied [(int)min, (int)max]
{array} fontsizeRange The range in which the fontsize will be applied within the given scaleRange [(float)min, (float)max]
{callable} onChangeValue The callback that will be called everytime the fontsize was adjusted

    var view = document.querySelector('html');

    // ResponsiveModule
    nivo.ResponsiveModule.addBreakpoint( view, {
        viewWidthOrig: 1024,            // the original width of the view
        scaleRange: [768, Infinity],    // The range the fontsize adjustment takes place
        fontsizeRange: [0, Infinity],   // Sometimes you recognize that there must be a deviating min/max-fontsize for the given scaleRange
        onChangeValue: function( value ){
            // fontsize = value;
        }
    }, {
        viewWidthOrig: 767,
        scaleRange: [0, 767],
        fontsizeRange: [0, Infinity],
        onChangeValue: function( value ){
            // fontsize = value;
        }
    });

SubviewInteractiveTransition

This is an example of how you can handle interactive transitions on Subviews.

In this demo..

.. the TileContainerViewControllers containerView hosts two views which you can toggle interactively by take control over the transition animation defined in in the TileContainerViewController.

GCMS

You can utilize GCMS to store all your strings in a well organized Google Speadsheet. This not only keeps your templates from getting messed by too much contents but also enables others to easily manage the contents of your project.

Here you can find the Spreadsheet used for the example.

How to

    require('../src/gcms.class.php');

    $gcms = new Nivo\GCMS();

    // Assign A Custom Storage Folder For The Cached Contents
    $gcms->storage = __DIR__ . ""/storage/gcms/"";

    // Get The Contents Of The Two Worksheets
    $sheet1 = $gcms->getContents('cachefile-sheet1.txt', '1uZY1LNd4id-l8DElqVMQoam24HK1rGDwKXZEfr_0FbI', 0);
    $sheet2 = $gcms->getContents('cachefile-sheet2.txt', '1uZY1LNd4id-l8DElqVMQoam24HK1rGDwKXZEfr_0FbI', 134327007);"

• $sheet1 now contains all contents assigned in the first worksheet.
• $sheet2 now contains all contents assigned in the second worksheet.

nivo.photoshop.extract

A Photoshop Plugin Supporting You Exporting Your Assets