Refactor binding and parameters

README.md

@@ -8,8 +8,7 @@ A flexible grid layout for responsive dashboards.
 Install with [Bower](http://bower.io/) / [npm](http://www.npmjs.com/), or simply download the files from the root folder:
 
 ```sh
-$ bower install angular-widget-grid
-$ npm install angular-widget-grid
+$ bower install marchrius/angular-widget-grid
 ```
 
 Add `<script>` and `<link>` tags to your `index.html`:
@@ -28,8 +27,8 @@ angular.module('myApp', ['widgetGrid']);
 ## Usage
 #### Minimal Example
 ```html
-<wg-grid columns="20" rows="15" style="width: 400px; height: 300px;">
-  <wg-widget position="{ top: 2, left: 4, height: 6, width: 8 }">
+<wg-grid wg-columns="20" wg-rows="15" style="width: 400px; height: 300px;">
+  <wg-widget wg-position="{ top: 2, left: 4, height: 6, width: 8 }">
     <div style="background-color: rgb(140, 198, 0);"></div>
   </wg-widget>
 </wg-grid>
@@ -40,41 +39,41 @@ When no valid widget position is provided, the module searches for a suitable on
 
 ### Adding Traits
 #### Widgets
-##### `wg-movable`
+##### `wg-movable` (default: `true`)
 ```html
-<wg-widget wg-movable editable="true" position="...">
+<wg-widget wg-movable="{ enabled: true }" wg-editable="true" wg-position="...">
 ```
-If `editable` is true, users will be able to move the respective widget.
+If `wg-editable` is true, users will be able to move the respective widget.
 
 ![Moving Widgets](https://raw.githubusercontent.com/patbuergin/angular-widget-grid/master/doc/wg-2.png)
 
-##### `wg-resizable`
+##### `wg-resizable` (default: `true`)
 ```html
-<wg-widget wg-resizable editable="true" position="...">
+<wg-widget wg-resizable="{ enabled: true }" wg-editable="true" wg-position="...">
 ```
-If `editable` is true, users will be able to resize the respective widget.
+If `wg-editable` is true, users will be able to resize the respective widget.
 
 ![Resizing Widgets](https://raw.githubusercontent.com/patbuergin/angular-widget-grid/master/doc/wg-3.png)
 
 Optionally, you can limit the resize directions: 
 ```html
-<wg-widget wg-resizable="{ directions: ['NW', 'NE', 'E', 'SW'] }" ...>
+<wg-widget wg-resizable="{ editable: true, directions: ['NW', 'NE', 'E', 'SW'] }" ...>
 ```
 
 ![Restricted Resizing](https://raw.githubusercontent.com/patbuergin/angular-widget-grid/master/doc/wg-4.png)
 
 #### Grid: Options
 ##### `showGrid` (default: `false`)  
 ```html
-<wg-grid columns="20" rows="15" options="{ showGrid: true }">
+<wg-grid wg-columns="20" wg-rows="15" wg-options="{ showGrid: true }">
 ```
 Toggles the gridlines.
 
 ![Gridlines Enabled](https://raw.githubusercontent.com/patbuergin/angular-widget-grid/master/doc/wg-5.png)
 
 ##### `highlightNextPosition` (default: `false`)
 ```html
-<wg-grid columns="20" rows="15" options="{ highlightNextPosition: true, showGrid: true }">
+<wg-grid wg-columns="20" wg-rows="15" wg-options="{ highlightNextPosition: true, showGrid: true }">
 ```
 Highlights the largest free area in the grid, if any. This area will be automatically assigned to the next widget with a falsy or conflicting position.
 
@@ -83,7 +82,7 @@ Highlights the largest free area in the grid, if any. This area will be automati
 
 ##### `clickThrough` (default: `false`)  
 ```html
-<wg-grid columns="20" rows="15" options="{ clickThrough: true }">
+<wg-grid wg-columns="20" wg-rows="15" wg-options="{ clickThrough: true }">
 ```
 Passes the mouse down event to the underlying element, when the widget wasn't dragged. This enables the possibility to both have the widget moveable and be able to click or select elements within the widget content.
 
@@ -110,4 +109,9 @@ $ npm install -g bower grunt grunt-cli
 $ npm install
 $ bower install
 $ grunt serve
-```
+```
+
+----
+Created by [patbuergin](https://github.com/patbuergin) / [angular-widget-grid](https://github.com/patbuergin/angular-widget-grid)
+
+This repository is maintained by [Marchrius](https://github.com/marchrius)