implement navigation;
This commit is contained in:
@@ -0,0 +1,42 @@
|
||||
|
||||
|
||||
(function ()
|
||||
{
|
||||
var anchors = document.querySelectorAll('.app-nav a');
|
||||
|
||||
for (var i = anchors.length - 1; i >= 0; i--)
|
||||
{
|
||||
anchors[i].addEventListener('click', changePart, false);
|
||||
}
|
||||
|
||||
|
||||
|
||||
function changePart(e)
|
||||
{
|
||||
e.preventDefault();
|
||||
|
||||
var id = this.id;
|
||||
var parts = document.querySelectorAll('div[data-part]');
|
||||
var isActive = false;
|
||||
|
||||
for (var i = parts.length - 1; i >= 0; i--)
|
||||
{
|
||||
isActive = parts[i].getAttribute("data-part") === id;
|
||||
|
||||
parts[i].style.display = isActive ? "block" : "none";
|
||||
|
||||
changeActiveClass(this);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function changeActiveClass(el)
|
||||
{
|
||||
for (var i = anchors.length - 1; i >= 0; i--)
|
||||
{
|
||||
anchors[i].classList.remove('is-active');
|
||||
}
|
||||
el.classList.add('is-active');
|
||||
}
|
||||
|
||||
})();
|
||||
@@ -61,6 +61,16 @@ object, embed
|
||||
.article
|
||||
{
|
||||
color: darken($midColor, 10%);
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
div[data-part]
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
div[data-part="gettingstarted"]
|
||||
{
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
@@ -103,6 +113,7 @@ object, embed
|
||||
padding: 0 15px;
|
||||
color: white;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
|
||||
&.is-active
|
||||
{
|
||||
|
||||
+103
-81
@@ -45,69 +45,95 @@
|
||||
|
||||
<div class="app-main">
|
||||
<nav class="app-nav">
|
||||
<a href="#gettingstarted" class="is-active">Getting Started</a>
|
||||
<a href="#authentication">Authentication</a>
|
||||
<a href="#retrieve">Retrieve</a>
|
||||
<a href="#add">Add</a>
|
||||
<a href="#modify">Modify</a>
|
||||
<a id="gettingstarted" class="is-active">Getting Started</a>
|
||||
<a id="authentication">Authentication</a>
|
||||
<a id="retrieve">Retrieve</a>
|
||||
<a id="add">Add</a>
|
||||
<a id="modify">Modify</a>
|
||||
</nav>
|
||||
<article class="article">
|
||||
|
||||
<h2 id="gettingstarted">Getting Started</h2>
|
||||
<p>Request a <a href="http://getpocket.com/developer/apps/">Consumer Key on Pocket.</a></p>
|
||||
<p>Include the PocketSharp namespace and it's associated models (you will need them later):</p>
|
||||
<p>
|
||||
<pre class="language-clike"><code>using PocketSharp;
|
||||
using PocketSharp.Models;</code></pre>
|
||||
</p>
|
||||
<p>Initialize PocketClient with:</p>
|
||||
<p>
|
||||
<pre class="language-clike"><code>PocketClient _client = new PocketClient("[YOUR_CONSUMER_KEY]", "[YOUR_ACCESS_CODE]");</code></pre>
|
||||
</p>
|
||||
<p>Do a simple request - e.g. a search for <code>CSS</code>:</p>
|
||||
<p>
|
||||
<pre class="language-clike"><code>_client.Search("css").ForEach(
|
||||
item => Console.WriteLine(item.ID + " | " + item.Title)
|
||||
);</code></pre>
|
||||
</p>
|
||||
<p>Which will output:</p>
|
||||
<pre class="language-markup"><code>330361896 | CSS Front-end Frameworks with comparison : By usabli.ca
|
||||
345541438 | Editr - HTML, CSS, JavaScript playground
|
||||
251743431 | CSS Architecture
|
||||
343693149 | CSS3 Transitions - Thank God We Have A Specification!
|
||||
...
|
||||
</code></pre>
|
||||
<div data-part="gettingstarted">
|
||||
<h2>Getting Started</h2>
|
||||
<p>Request a <a href="http://getpocket.com/developer/apps/">Consumer Key on Pocket.</a></p>
|
||||
<p>Include the PocketSharp namespace and it's associated models (you will need them later):</p>
|
||||
<p>
|
||||
<pre class="language-clike"><code>using PocketSharp;
|
||||
using PocketSharp.Models;</code></pre>
|
||||
</p>
|
||||
<p>Initialize PocketClient with:</p>
|
||||
<p>
|
||||
<pre class="language-clike"><code>PocketClient _client = new PocketClient("[YOUR_CONSUMER_KEY]", "[YOUR_ACCESS_CODE]");</code></pre>
|
||||
</p>
|
||||
<p>Do a simple request - e.g. a search for <code>CSS</code>:</p>
|
||||
<p>
|
||||
<pre class="language-clike"><code>_client.Search("css").ForEach(
|
||||
item => Console.WriteLine(item.ID + " | " + item.Title)
|
||||
);</code></pre>
|
||||
</p>
|
||||
<p>Which will output:</p>
|
||||
<pre class="language-markup"><code>330361896 | CSS Front-end Frameworks with comparison : By usabli.ca
|
||||
345541438 | Editr - HTML, CSS, JavaScript playground
|
||||
251743431 | CSS Architecture
|
||||
343693149 | CSS3 Transitions - Thank God We Have A Specification!
|
||||
...
|
||||
</code></pre>
|
||||
|
||||
<h2>Create an instance</h2>
|
||||
<p>Constructor:</p>
|
||||
<h2>Create an instance</h2>
|
||||
<p>Constructor:</p>
|
||||
<p>
|
||||
<pre class="language-clike"><code>PocketClient(string consumerKey, string accessCode = null, Uri callbackUri = null)</code></pre>
|
||||
</p>
|
||||
<p>
|
||||
<code>consumerKey</code>: The API key
|
||||
<br>
|
||||
<code>accessCode</code>: Provide an access code if the user is already authenticated
|
||||
<br>
|
||||
<code>callbackUri</code>: The callback URL is called by Pocket after authentication
|
||||
</p>
|
||||
<p>Example:</p>
|
||||
<p>
|
||||
<pre class="language-clike"><code>PocketClient _client = new PocketClient(
|
||||
consumerKey: "123498237423498723498723",
|
||||
callbackUri: new Uri("http:⁄⁄ceecore.com"),
|
||||
accessCode: "097809-oi987-izi8-jk98-oiuu89"
|
||||
);</code></pre>
|
||||
</p>
|
||||
<p>You can change the <em>Access Code</em> after initialization:</p>
|
||||
<p>
|
||||
<pre class="language-clike"><code>_client.AccessCode = "[YOU_ACCESS_CODE]";</code></pre>
|
||||
</p>
|
||||
<p>
|
||||
<strong>Before authentication</strong> you will need to provide the <code>callbackUri</code> for authentication requests.
|
||||
<br>
|
||||
<strong>After authentication</strong> you will need to provide the <code>accessCode</code>.
|
||||
</p>
|
||||
|
||||
<h2>Release History</h2>
|
||||
<ul>
|
||||
<li>2013-07-07 v0.3.1 authentication fixes</li>
|
||||
<li>2013-07-02 v0.3.0 update authentication process </li>
|
||||
<li>2013-06-27 v0.2.0 add, modify item & modify tags</li>
|
||||
<li>2013-06-26 v0.1.0 authentication & retrieve functionality</li>
|
||||
</ul>
|
||||
<h2>Used Packages</h2>
|
||||
<ul>
|
||||
<li><a href="http://restsharp.org/">RestSharp</a></li>
|
||||
<li><a href="https://github.com/ServiceStack/ServiceStack.Text">ServiceStack.Text</a></li>
|
||||
</ul>
|
||||
<h2>Contributors</h2>
|
||||
<p>
|
||||
<pre class="language-clike"><code>PocketClient(string consumerKey, string accessCode = null, Uri callbackUri = null)</code></pre>
|
||||
<a href="https://github.com/ceee" title="Tobias Klika @ceee on github">
|
||||
<img src="http://gravatar.com/avatar/9c61b1f4307425f12f05d3adb930ba66?s=40" alt="twitter/artistandsocial" /></a> <a href="https://github.com/ceee">Tobias Klika @ceee</a>
|
||||
</p>
|
||||
<p>
|
||||
<code>consumerKey</code>: The API key
|
||||
<br>
|
||||
<code>accessCode</code>: Provide an access code if the user is already authenticated
|
||||
<br>
|
||||
<code>callbackUri</code>: The callback URL is called by Pocket after authentication
|
||||
</p>
|
||||
<p>Example:</p>
|
||||
<p>
|
||||
<pre class="language-clike"><code>PocketClient _client = new PocketClient(
|
||||
consumerKey: "123498237423498723498723",
|
||||
callbackUri: new Uri("http:⁄⁄ceecore.com"),
|
||||
accessCode: "097809-oi987-izi8-jk98-oiuu89"
|
||||
);</code></pre>
|
||||
</p>
|
||||
<p>You can change the <em>Access Code</em> after initialization:</p>
|
||||
<p>
|
||||
<pre class="language-clike"><code>_client.AccessCode = "[YOU_ACCESS_CODE]";</code></pre>
|
||||
</p>
|
||||
<p>
|
||||
<strong>Before authentication</strong> you will need to provide the <code>callbackUri</code> for authentication requests.
|
||||
<br>
|
||||
<strong>After authentication</strong> you will need to provide the <code>accessCode</code>.
|
||||
</p>
|
||||
<h2 id="authentication">Authentication</h2>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div data-part="authentication">
|
||||
|
||||
|
||||
<h2>Authentication</h2>
|
||||
<p>In order to communicate with a Pocket User, you will need a consumer key (which is generated by <a href="http://getpocket.com/developer/apps/">creating a new application on Pocket</a>) and an <strong>Access Code</strong>.</p>
|
||||
<p>The authentication is a 3-step process:</p>
|
||||
<h4>1) Generate authentication URI</h4>
|
||||
@@ -139,7 +165,13 @@ Note that <code>GetAccessCode</code> can only be called with an existing <em>req
|
||||
<br>
|
||||
Without it you would always have to redo the authentication process.
|
||||
</p>
|
||||
<h2 id="retrieve">Retrieve</h2>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div data-part="retrieve">
|
||||
|
||||
<h2>Retrieve</h2>
|
||||
<p>Get list of all items:</p>
|
||||
<p>
|
||||
<pre class="language-clike"><code>List<PocketItem> items = _client.Retrieve();
|
||||
@@ -175,7 +207,12 @@ var parameters = new RetrieveParameters()
|
||||
List<pocketitem> items = _client.Retrieve(parameters);
|
||||
</code></pre>
|
||||
</p>
|
||||
<h2 id="add">Add</h2>
|
||||
|
||||
</div>
|
||||
|
||||
<div data-part="add">
|
||||
|
||||
<h2>Add</h2>
|
||||
<p>
|
||||
Adds a new item to your pocket list.
|
||||
Accepts four parameters, with <code>uri</code> being required.
|
||||
@@ -192,7 +229,12 @@ Accepts four parameters, with <code>uri</code> being required.
|
||||
</p>
|
||||
<p>The title can be included for cases where an item does not have a title, which is typical for image or PDF URLs. If Pocket detects a title from the content of the page, this parameter will be ignored.</p>
|
||||
<p>If you are adding Pocket support to a Twitter client, please send along a reference to the tweet status id (with the tweetID). This allows Pocket to show the original tweet alongside the article.</p>
|
||||
<h2 id="modify">Modify</h2>
|
||||
|
||||
</div>
|
||||
|
||||
<div data-part="modify">
|
||||
|
||||
<h2>Modify</h2>
|
||||
<p>All Modify methods accept either the itemID (as int) or a <code>PocketItem</code> as parameter.</p>
|
||||
<p>Archive the specified item:</p>
|
||||
<pre class="language-clike"><code>bool isSuccess = _client.Archive(myPocketItem);
|
||||
@@ -235,27 +277,7 @@ Accepts four parameters, with <code>uri</code> being required.
|
||||
<pre class="language-clike"><code>bool isSuccess = _client.RenameTag(myPocketItem, "oldTagName", "newTagName");
|
||||
</code></pre>
|
||||
|
||||
<hr />
|
||||
<h2>Release History</h2>
|
||||
<ul>
|
||||
<li>2013-07-07 v0.3.1 authentication fixes</li>
|
||||
<li>2013-07-02 v0.3.0 update authentication process </li>
|
||||
<li>2013-06-27 v0.2.0 add, modify item & modify tags</li>
|
||||
<li>2013-06-26 v0.1.0 authentication & retrieve functionality</li>
|
||||
</ul>
|
||||
<h2>Used Packages</h2>
|
||||
<ul>
|
||||
<li><a href="http://restsharp.org/">RestSharp</a></li>
|
||||
<li><a href="https://github.com/ServiceStack/ServiceStack.Text">ServiceStack.Text</a></li>
|
||||
</ul>
|
||||
<h2>Contributors</h2>
|
||||
<p>
|
||||
| <a href="http://twitter.com/artistandsocial" title="Follow @artistandsocial on Twitter">
|
||||
<img src="http://gravatar.com/avatar/9c61b1f4307425f12f05d3adb930ba66?s=70" alt="twitter/artistandsocial" /></a> |
|
||||
|---|
|
||||
| <a href="https://github.com/ceee">Tobias Klika @ceee</a> |
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
</article>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user