Update README.md

README.md

@@ -10,6 +10,62 @@ Live Demo: http://fdim.github.io/ng-pull/example/
 As simple as "bower install ng-pull" :)
 
 ## usage
-todo
 
-Have a look at examples to see this module in action.
+To use this pull gesture, simply add on-pull-(down|up|left|right) attribute with an expression to execute when progress reaches 100%. If expression evaluates to false, item will remain pushed until $reset function is invoked. 
+
+
+```
+<div class="container items-list" on-pull-down="loadNewItems()" pull-down-distance="60" pull-down-progress="$pullDownProgress" on-pull-up="loadMoreItems($reset)" pull-up-distance="60" pull-up-progress="$pullUpProgress">
+      <div class="pull-to-refresh-indicator" ng-style="{'margin-top':($pullDownProgress/100*60)+'px'}">
+        <div>
+          <div>{{$pullDownProgress|number:2}}</div>
+          <div>{{$pullDownProgress==100?'Release to request new items':'Pull down to refresh'}}</div>
+        </div>
+      </div>
+      <!-- or -->
+      <!-- <div pull-down-container>
+          <div>{{$pullDownProgress|number:2}}</div>
+          <div>{{$pullDownProgress==100?'Release to request new items':'Pull down to refresh'}}</div>
+      </div> -->
+      <ul>
+        <li ng-repeat="i in items" pull-left-disabled="i.disabled" on-pull-left="false" pull-left-distance="120" pull-left-reset="$cancelDelete" pull-left-progress="$pullLeftProgress" on-pull-right="archiveItem(i)" pull-right-distance="150" pull-right-disabled="i.disabled">
+          <div pull-right-container>
+            <p style="padding-top:20px; text-align:right;">{{$pullRightProgress|number:2}} archived</p>
+          </div>
+          <div pull-target>
+            <div class="image"></div>
+            <div class="content">
+              <h3>{{i.title}}</h3>
+              <p>{{i.intro}}</p>
+            </div>
+          </div>
+          <div pull-left-container>
+            <p style="padding-top:20px;" ng-if="$pullLeftProgress<100">{{$pullLeftProgress|number:2}} deleted</p>
+            <p style="padding-top:20px;" ng-if="$pullLeftProgress==100">
+              <button ng-click="$cancelDelete(i)">cancel</button>
+              <button ng-click="removeItem(i)">delete</button>
+            </p>
+          </div>
+        </li>
+      </ul>
+      <div pull-up-container style="text-align:center;">
+          <div>{{$pullUpProgress|number:2}}</div>
+          <div ng-if="!loadingMore">{{$pullUpProgress==100?'Release to begin loading':'Pull down to load more'}}</div>
+          <div ng-if="loadingMore">Please wait, loading</div>
+      </div>
+    </div>
+    
+```
+
+Have a look at the example for more details.
+
+## options
+You can customise behavior by providing additional attributes:
+* pull-(down|up|left|right)-distance : number of pixels user has to move the element in order to trigger the expression. Default:100
+* pull-(down|up|left|right)-progress : scope variable name to store progress value. Default: $pull(Down|Up|Left|right)Progress
+* pull-(down|up|left|right)-threshold : progress value to cancel the gesture if it is not reached within timeout. Default: 5
+* pull-(down|up|left|right)-timeout : number of ms given for the user to reach threshold value or gesture will be cancelled. Default: 300
+* pull-(down|up|left|right)-disabled : an expression to watch to enable or disable gesture
+* pull-(down|up|left|right)-reset : scope variable name to expose reset function. Default: $pull(Down|Up|Left|right)Reset
+
+Note that directive are not using isolated scope.