Skip to content

Commit

Permalink
Add chaining
Browse files Browse the repository at this point in the history
  • Loading branch information
@serkanyersen
serkanyersen committed Nov 24, 2015
1 parent f8273f0 commit b77eaee
Show file tree
Hide file tree
Showing 5 changed files with 112 additions and 72 deletions.
55 changes: 35 additions & 20 deletions docs/ifvisible.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -920,7 +920,9 @@ <h2 id="exports">Exports</h2>

</div>

<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">return</span> <span class="hljs-property">@on</span>(<span class="hljs-string">"focus"</span>, callback) <span class="hljs-keyword">if</span> <span class="hljs-keyword">typeof</span> callback <span class="hljs-keyword">is</span> <span class="hljs-string">"function"</span></pre></div></div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> <span class="hljs-keyword">typeof</span> callback <span class="hljs-keyword">is</span> <span class="hljs-string">"function"</span>
<span class="hljs-property">@on</span>(<span class="hljs-string">"focus"</span>, callback)
<span class="hljs-keyword">else</span></pre></div></div>

</li>

Expand All @@ -935,10 +937,11 @@ <h2 id="exports">Exports</h2>

</div>

<div class="content"><div class='highlight'><pre> status = <span class="hljs-string">"active"</span>
customEvent.fire <span class="hljs-keyword">this</span>, <span class="hljs-string">"focus"</span>
customEvent.fire <span class="hljs-keyword">this</span>, <span class="hljs-string">"wakeup"</span> <span class="hljs-comment"># When focused page will woke up too.</span>
customEvent.fire <span class="hljs-keyword">this</span>, <span class="hljs-string">"statusChanged"</span>, { <span class="hljs-attribute">status</span>: status }</pre></div></div>
<div class="content"><div class='highlight'><pre> status = <span class="hljs-string">"active"</span>
customEvent.fire <span class="hljs-keyword">this</span>, <span class="hljs-string">"focus"</span>
customEvent.fire <span class="hljs-keyword">this</span>, <span class="hljs-string">"wakeup"</span> <span class="hljs-comment"># When focused page will woke up too.</span>
customEvent.fire <span class="hljs-keyword">this</span>, <span class="hljs-string">"statusChanged"</span>, { <span class="hljs-attribute">status</span>: status }
@</pre></div></div>

</li>

Expand Down Expand Up @@ -969,7 +972,9 @@ <h2 id="exports">Exports</h2>

</div>

<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">return</span> <span class="hljs-property">@on</span>(<span class="hljs-string">"blur"</span>, callback) <span class="hljs-keyword">if</span> <span class="hljs-keyword">typeof</span> callback <span class="hljs-keyword">is</span> <span class="hljs-string">"function"</span></pre></div></div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> <span class="hljs-keyword">typeof</span> callback <span class="hljs-keyword">is</span> <span class="hljs-string">"function"</span>
<span class="hljs-property">@on</span>(<span class="hljs-string">"blur"</span>, callback)
<span class="hljs-keyword">else</span></pre></div></div>

</li>

Expand All @@ -984,10 +989,11 @@ <h2 id="exports">Exports</h2>

</div>

<div class="content"><div class='highlight'><pre> status = <span class="hljs-string">"hidden"</span>
customEvent.fire <span class="hljs-keyword">this</span>, <span class="hljs-string">"blur"</span>
customEvent.fire <span class="hljs-keyword">this</span>, <span class="hljs-string">"idle"</span> <span class="hljs-comment"># When blurred page is idle too</span>
customEvent.fire <span class="hljs-keyword">this</span>, <span class="hljs-string">"statusChanged"</span>, { <span class="hljs-attribute">status</span>: status }</pre></div></div>
<div class="content"><div class='highlight'><pre> status = <span class="hljs-string">"hidden"</span>
customEvent.fire <span class="hljs-keyword">this</span>, <span class="hljs-string">"blur"</span>
customEvent.fire <span class="hljs-keyword">this</span>, <span class="hljs-string">"idle"</span> <span class="hljs-comment"># When blurred page is idle too</span>
customEvent.fire <span class="hljs-keyword">this</span>, <span class="hljs-string">"statusChanged"</span>, { <span class="hljs-attribute">status</span>: status }
@</pre></div></div>

</li>

Expand Down Expand Up @@ -1017,7 +1023,9 @@ <h2 id="exports">Exports</h2>

</div>

<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">return</span> <span class="hljs-property">@on</span>(<span class="hljs-string">"idle"</span>, callback) <span class="hljs-keyword">if</span> <span class="hljs-keyword">typeof</span> callback <span class="hljs-keyword">is</span> <span class="hljs-string">"function"</span></pre></div></div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> <span class="hljs-keyword">typeof</span> callback <span class="hljs-keyword">is</span> <span class="hljs-string">"function"</span>
<span class="hljs-property">@on</span>(<span class="hljs-string">"idle"</span>, callback)
<span class="hljs-keyword">else</span></pre></div></div>

</li>

Expand All @@ -1032,9 +1040,10 @@ <h2 id="exports">Exports</h2>

</div>

<div class="content"><div class='highlight'><pre> status = <span class="hljs-string">"idle"</span>
customEvent.fire <span class="hljs-keyword">this</span>, <span class="hljs-string">"idle"</span>
customEvent.fire <span class="hljs-keyword">this</span>, <span class="hljs-string">"statusChanged"</span>, { <span class="hljs-attribute">status</span>: status }</pre></div></div>
<div class="content"><div class='highlight'><pre> status = <span class="hljs-string">"idle"</span>
customEvent.fire <span class="hljs-keyword">this</span>, <span class="hljs-string">"idle"</span>
customEvent.fire <span class="hljs-keyword">this</span>, <span class="hljs-string">"statusChanged"</span>, { <span class="hljs-attribute">status</span>: status }
@</pre></div></div>

</li>

Expand Down Expand Up @@ -1066,7 +1075,9 @@ <h2 id="exports">Exports</h2>

</div>

<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">return</span> <span class="hljs-property">@on</span>(<span class="hljs-string">"wakeup"</span>, callback) <span class="hljs-keyword">if</span> <span class="hljs-keyword">typeof</span> callback <span class="hljs-keyword">is</span> <span class="hljs-string">"function"</span></pre></div></div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> <span class="hljs-keyword">typeof</span> callback <span class="hljs-keyword">is</span> <span class="hljs-string">"function"</span>
<span class="hljs-property">@on</span>(<span class="hljs-string">"wakeup"</span>, callback)
<span class="hljs-keyword">else</span></pre></div></div>

</li>

Expand All @@ -1081,9 +1092,10 @@ <h2 id="exports">Exports</h2>

</div>

<div class="content"><div class='highlight'><pre> status = <span class="hljs-string">"active"</span>
customEvent.fire <span class="hljs-keyword">this</span>, <span class="hljs-string">"wakeup"</span>
customEvent.fire <span class="hljs-keyword">this</span>, <span class="hljs-string">"statusChanged"</span>, { <span class="hljs-attribute">status</span>: status }</pre></div></div>
<div class="content"><div class='highlight'><pre> status = <span class="hljs-string">"active"</span>
customEvent.fire <span class="hljs-keyword">this</span>, <span class="hljs-string">"wakeup"</span>
customEvent.fire <span class="hljs-keyword">this</span>, <span class="hljs-string">"statusChanged"</span>, { <span class="hljs-attribute">status</span>: status }
@</pre></div></div>

</li>

Expand All @@ -1106,7 +1118,8 @@ <h2 id="exports">Exports</h2>

<div class="content"><div class='highlight'><pre> <span class="hljs-attribute">on</span>: <span class="hljs-function"><span class="hljs-params">(name, callback)</span> -&gt;</span>
init() <span class="hljs-comment"># Auto init on first call</span>
customEvent.add <span class="hljs-keyword">this</span>, name, callback</pre></div></div>
customEvent.add <span class="hljs-keyword">this</span>, name, callback
@</pre></div></div>

</li>

Expand All @@ -1130,7 +1143,8 @@ <h2 id="exports">Exports</h2>

<div class="content"><div class='highlight'><pre> <span class="hljs-attribute">off</span>: <span class="hljs-function"><span class="hljs-params">(name, callback)</span> -&gt;</span>
init() <span class="hljs-comment"># Auto init on first call</span>
customEvent.remove <span class="hljs-keyword">this</span>, name, callback</pre></div></div>
customEvent.remove <span class="hljs-keyword">this</span>, name, callback
@</pre></div></div>

</li>

Expand Down Expand Up @@ -1226,6 +1240,7 @@ <h2 id="exports">Exports</h2>

<div class="content"><div class='highlight'><pre> init()
status <span class="hljs-keyword">is</span> (check <span class="hljs-keyword">or</span> <span class="hljs-string">"active"</span>)

<span class="hljs-keyword">return</span> ifvisible
)</pre></div></div>

Expand Down
59 changes: 37 additions & 22 deletions src/ifvisible.coffee
View file
Original file line number Diff line number Diff line change
Expand Up @@ -322,12 +322,15 @@
focus: (callback) ->

# if first argument is a callback then set an event
return @on("focus", callback) if typeof callback is "function"
# else trigger event
status = "active"
customEvent.fire this, "focus"
customEvent.fire this, "wakeup" # When focused page will woke up too.
customEvent.fire this, "statusChanged", { status: status }
if typeof callback is "function"
@on("focus", callback)
else
# else trigger event
status = "active"
customEvent.fire this, "focus"
customEvent.fire this, "wakeup" # When focused page will woke up too.
customEvent.fire this, "statusChanged", { status: status }
@


# When User swicthes tabs or minimizes the window
Expand All @@ -337,23 +340,29 @@
blur: (callback) ->

# if first argument is a callback then set an event
return @on("blur", callback) if typeof callback is "function"
# else trigger event
status = "hidden"
customEvent.fire this, "blur"
customEvent.fire this, "idle" # When blurred page is idle too
customEvent.fire this, "statusChanged", { status: status }
if typeof callback is "function"
@on("blur", callback)
else
# else trigger event
status = "hidden"
customEvent.fire this, "blur"
customEvent.fire this, "idle" # When blurred page is idle too
customEvent.fire this, "statusChanged", { status: status }
@


# When page is focused but user is doing nothing on the page
idle: (callback) ->

# if first argument is a callback then set an event
return @on("idle", callback) if typeof callback is "function"
# else trigger event
status = "idle"
customEvent.fire this, "idle"
customEvent.fire this, "statusChanged", { status: status }
if typeof callback is "function"
@on("idle", callback)
else
# else trigger event
status = "idle"
customEvent.fire this, "idle"
customEvent.fire this, "statusChanged", { status: status }
@


# When user started to make interactions on the page such as:
Expand All @@ -362,11 +371,14 @@
wakeup: (callback) ->

# if first argument is a callback then set an event
return @on("wakeup", callback) if typeof callback is "function"
# else trigger event
status = "active"
customEvent.fire this, "wakeup"
customEvent.fire this, "statusChanged", { status: status }
if typeof callback is "function"
@on("wakeup", callback)
else
# else trigger event
status = "active"
customEvent.fire this, "wakeup"
customEvent.fire this, "statusChanged", { status: status }
@

# Set an event to ifvisible object
# ```
Expand All @@ -380,6 +392,7 @@
on: (name, callback) ->
init() # Auto init on first call
customEvent.add this, name, callback
@

# Remove an event from ifvisible object
# ```
Expand All @@ -394,6 +407,7 @@
off: (name, callback) ->
init() # Auto init on first call
customEvent.remove this, name, callback
@

# if page is visible then run given code in given seconds of intervals
# ```
Expand Down Expand Up @@ -432,5 +446,6 @@
# Auto init on first call
init()
status is (check or "active")

return ifvisible
)
66 changes: 38 additions & 28 deletions src/ifvisible.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit b77eaee

Please sign in to comment.