882 lines
60 KiB
HTML
882 lines
60 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="de" dir="ltr">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<title>SUBSPACE</title>
|
|||
|
|
<meta name="description" content="Reactive ÐApp Development">
|
|||
|
|
<meta http-equiv="X-UA-CompatibleSUBSPACE" content="IE=Edge,chrome=1">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|||
|
|
<!-- Canonical links -->
|
|||
|
|
<link rel="canonical" href="http://localhost:4000/de/api.html">
|
|||
|
|
|
|||
|
|
<!-- Icon -->
|
|||
|
|
<meta name="msapplication-TileColor" content="#080E1A">
|
|||
|
|
<link rel="icon" type="image/png" href="/images/favicon.png" sizes="32x32" />
|
|||
|
|
|
|||
|
|
<link rel="apple-touch-icon" sizes="76x76" href="/images/apple-touch-icon-60x60-precomposed.png">
|
|||
|
|
<link rel="apple-touch-icon" sizes="76x76" href="/images/apple-touch-icon-76x76-precomposed.png">
|
|||
|
|
<link rel="apple-touch-icon" sizes="120x120" href="/images/apple-touch-icon-120x120-precomposed.png">
|
|||
|
|
<link rel="apple-touch-icon" sizes="152x152" href="/images/apple-touch-icon-152x152-precomposed.png">
|
|||
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-precomposed.png">
|
|||
|
|
<link rel="apple-touch-icon" href="/images/apple-touch-icon-precomposed.png">
|
|||
|
|
<!-- CSS -->
|
|||
|
|
|
|||
|
|
<link rel="stylesheet" href="/css/application.css">
|
|||
|
|
|
|||
|
|
<!-- endbuild -->
|
|||
|
|
|
|||
|
|
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
|
|||
|
|
|
|||
|
|
<meta property="og:image" content="/img/share.png?v=0.0.5" />
|
|||
|
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.4/styles/dracula.min.css">
|
|||
|
|
<meta name="generator" content="Hexo 4.2.0"></head>
|
|||
|
|
<body>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
<header role="banner" class="o-header">
|
|||
|
|
<div class="o-header__container c-spotlightbox">
|
|||
|
|
<div class="o-constrained">
|
|||
|
|
<div class="o-header__top js-header">
|
|||
|
|
<div><a href="/de/" class="a-logo">Keycard</a></div>
|
|||
|
|
<nav role="navigation" class="o-navigation c-navigation">
|
|||
|
|
<a href="#" class="c-navigation__trigger js-navigation-open">
|
|||
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon"><title>navigation-menu</title><rect x="0.5" y="2.5" width="23" height="3" rx="1" ry="1"/><rect x="0.5" y="10.5" width="23" height="3" rx="1" ry="1"/><rect x="0.5" y="18.5" width="23" height="3" rx="1" ry="1"/></svg>
|
|||
|
|
</a>
|
|||
|
|
<div class="o-navigation__list c-navigation__list js-navigation-list">
|
|||
|
|
<a href="/de/" class="a-logo"></a>
|
|||
|
|
<a href="#" class="o-navigation__close js-navigation-close">
|
|||
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon"><title>close</title><path d="M14.3,12.179a.25.25,0,0,1,0-.354l9.263-9.262A1.5,1.5,0,0,0,21.439.442L12.177,9.7a.25.25,0,0,1-.354,0L2.561.442A1.5,1.5,0,0,0,.439,2.563L9.7,11.825a.25.25,0,0,1,0,.354L.439,21.442a1.5,1.5,0,0,0,2.122,2.121L11.823,14.3a.25.25,0,0,1,.354,0l9.262,9.263a1.5,1.5,0,0,0,2.122-2.121Z"/></svg>
|
|||
|
|
</a>
|
|||
|
|
<a href="/de/getting-started.html" title="Getting started"
|
|||
|
|
class="o-navigation__item ">
|
|||
|
|
Getting started
|
|||
|
|
</a>
|
|||
|
|
<a href="/de/integrations-overview.html" title="Getting started"
|
|||
|
|
class="o-navigation__item ">
|
|||
|
|
Integrations
|
|||
|
|
</a>
|
|||
|
|
<a href="/de/api.html" title="Getting started"
|
|||
|
|
class="o-navigation__item ">
|
|||
|
|
API
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</nav>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</header>
|
|||
|
|
|
|||
|
|
<div class="o-distance">
|
|||
|
|
|
|||
|
|
<!-- The main content area -->
|
|||
|
|
<main role="main">
|
|||
|
|
|
|||
|
|
<div class="o-constrained o-content">
|
|||
|
|
<div class="o-grid">
|
|||
|
|
<div class="o-grid__column-1-1 o-grid__column-large-1-3">
|
|||
|
|
<a href="" title="Docs categories" class="a-button js-docs-trigger c-side-navigation__trigger">Docs categories</a>
|
|||
|
|
|
|||
|
|
<ul class="c-side-navigation js-docs-sidebar">
|
|||
|
|
<li class="c-side-navigation__header">
|
|||
|
|
<a href="#" class="c-side-navigation__header__offset js-docs-trigger-close">
|
|||
|
|
<svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect x="1.5752" y="0.368273" width="22" height="1" rx="0.5" transform="rotate(45 1.5752 0.368273)" fill="#090909"></rect> <rect x="0.868164" y="15.9246" width="22" height="1" rx="0.5" transform="rotate(-45 0.868164 15.9246)" fill="#090909"></rect> </svg>
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="c-side-navigation__item ">
|
|||
|
|
<a href="de/how-it-works.html" class="c-side-navigation__item__anchor">How it works</a>
|
|||
|
|
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="c-side-navigation__item ">
|
|||
|
|
<a href="de/getting-started.html" class="c-side-navigation__item__anchor">Getting Started</a>
|
|||
|
|
|
|||
|
|
<ul class="c-side-navigation__item__tree">
|
|||
|
|
|
|||
|
|
<li class="c-side-navigation__item ">
|
|||
|
|
<a href="de/getting-started.html#Installation" class="c-side-navigation__item__anchor">Installation</a>
|
|||
|
|
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="c-side-navigation__item ">
|
|||
|
|
<a href="de/getting-started.html#Importing-the-library" class="c-side-navigation__item__anchor">Importing the library</a>
|
|||
|
|
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="c-side-navigation__item ">
|
|||
|
|
<a href="de/getting-started.html#Connecting-to-a-web3-provider" class="c-side-navigation__item__anchor">Connecting to a web3 provider</a>
|
|||
|
|
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="c-side-navigation__item ">
|
|||
|
|
<a href="de/getting-started.html#Enhancing-your-contract-objects" class="c-side-navigation__item__anchor">Enhancing your contract objects</a>
|
|||
|
|
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="c-side-navigation__item ">
|
|||
|
|
<a href="de/getting-started.html#Reacting-to-data" class="c-side-navigation__item__anchor">Reacting to data</a>
|
|||
|
|
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="c-side-navigation__item ">
|
|||
|
|
<a href="de/getting-started.html#Tracking-state" class="c-side-navigation__item__anchor">Tracking state</a>
|
|||
|
|
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="c-side-navigation__item ">
|
|||
|
|
<a href="de/getting-started.html#Tracking-events" class="c-side-navigation__item__anchor">Tracking events</a>
|
|||
|
|
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="c-side-navigation__item ">
|
|||
|
|
<a href="de/getting-started.html#Tracking-balances" class="c-side-navigation__item__anchor">Tracking balances</a>
|
|||
|
|
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="c-side-navigation__item ">
|
|||
|
|
<a href="de/getting-started.html#Getting-block-data-gas-prices-and-block-time" class="c-side-navigation__item__anchor">Getting block data, gas prices and block time</a>
|
|||
|
|
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="c-side-navigation__item ">
|
|||
|
|
<a href="de/getting-started.html#Subscriptions" class="c-side-navigation__item__anchor">Subscriptions</a>
|
|||
|
|
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="c-side-navigation__item ">
|
|||
|
|
<a href="de/getting-started.html#Cleanup" class="c-side-navigation__item__anchor">Cleanup</a>
|
|||
|
|
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="c-side-navigation__item ">
|
|||
|
|
|
|||
|
|
<span class="c-side-navigation__item__anchor">Integrations</span>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<ul class="c-side-navigation__item__tree">
|
|||
|
|
|
|||
|
|
<li class="c-side-navigation__item ">
|
|||
|
|
<a href="integrations-overview.html" class="c-side-navigation__item__anchor">Overview</a>
|
|||
|
|
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="c-side-navigation__item ">
|
|||
|
|
<a href="react.html" class="c-side-navigation__item__anchor">React</a>
|
|||
|
|
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="c-side-navigation__item ">
|
|||
|
|
<a href="vue.html" class="c-side-navigation__item__anchor">Vue</a>
|
|||
|
|
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="c-side-navigation__item ">
|
|||
|
|
|
|||
|
|
<span class="c-side-navigation__item__anchor">Redux</span>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<ul class="c-side-navigation__item__tree">
|
|||
|
|
|
|||
|
|
<li class="c-side-navigation__item ">
|
|||
|
|
<a href="redux.html" class="c-side-navigation__item__anchor">redux</a>
|
|||
|
|
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="c-side-navigation__item ">
|
|||
|
|
<a href="redux-observable.html" class="c-side-navigation__item__anchor">redux-observable</a>
|
|||
|
|
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="c-side-navigation__item ">
|
|||
|
|
<a href="reactive-graphql.html" class="c-side-navigation__item__anchor">reactive-graphql</a>
|
|||
|
|
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="c-side-navigation__item ">
|
|||
|
|
<a href="apollo-client.html" class="c-side-navigation__item__anchor">apollo-client</a>
|
|||
|
|
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="c-side-navigation__item ">
|
|||
|
|
<a href="de/tutorial.html" class="c-side-navigation__item__anchor">Tutorial</a>
|
|||
|
|
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="c-side-navigation__item is-active">
|
|||
|
|
<a href="de/api.html" class="c-side-navigation__item__anchor">API</a>
|
|||
|
|
|
|||
|
|
<ul class="c-side-navigation__item__tree">
|
|||
|
|
|
|||
|
|
<li class="c-side-navigation__item ">
|
|||
|
|
<a href="de/api.html#general" class="c-side-navigation__item__anchor">General</a>
|
|||
|
|
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="c-side-navigation__item ">
|
|||
|
|
<a href="de/api.html#Contract-methods" class="c-side-navigation__item__anchor">Contract methods</a>
|
|||
|
|
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="c-side-navigation__item ">
|
|||
|
|
<a href="de/api.html#Blocks-gas-price-and-block-time" class="c-side-navigation__item__anchor">Blocks, gas price and block time</a>
|
|||
|
|
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="c-side-navigation__item ">
|
|||
|
|
<a href="de/api.html#Low-level-API-for-data-tracking" class="c-side-navigation__item__anchor">Low level API for data tracking</a>
|
|||
|
|
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<div class="o-grid__column-1-1 o-grid__column-large-2-3">
|
|||
|
|
<h1 id="API"><a href="#API" class="headerlink" title="API"></a>API</h1><h2 id="General"><a href="#General" class="headerlink" title="General"></a>General</h2><h3 id="new-Subspace-web3-options"><a href="#new-Subspace-web3-options" class="headerlink" title="new Subspace(web3 [, options])"></a><code>new Subspace(web3 [, options])</code></h3><p>Constructor. </p>
|
|||
|
|
<p><strong>Parameters</strong></p>
|
|||
|
|
<ol>
|
|||
|
|
<li><code>web3</code> - <code>Object</code>: a <code>web3.js</code> object.</li>
|
|||
|
|
<li><code>options</code> - <code>Object</code> (optional): Options used to initialize Subspace<ul>
|
|||
|
|
<li><code>dbFilename</code> - <code>String</code> (optional): Name of the database where the information will be stored (default <code>'subspace.db'</code>)</li>
|
|||
|
|
<li><code>callInterval</code> - Interval of time in milliseconds to query a contract/address to determine changes in state or balance. It’s only used with HttpProviders (default: <code>undefined</code>. Obtains data every block using the average block time as an interval).</li>
|
|||
|
|
<li><code>refreshLastNBlocks</code> - Ignores last N blocks (from current block), stored in the local db and refresh them via a web3 subscription. Useful for possible reorgs (default: 12),</li>
|
|||
|
|
<li><code>disableSubscriptions</code> - Subspace by default will attempt to use websocket subscriptions if the current provider supports them, otherwise it will use polling because it asumes the provider is an HttpProvider. This functionality can be disabled by passing true to this option. (default: undefined)</li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
</ol>
|
|||
|
|
<h3 id="init"><a href="#init" class="headerlink" title="init()"></a><code>init()</code></h3><p>Initializes <strong>Subspace</strong></p>
|
|||
|
|
<p><strong>Returns</strong><br><code>Promise</code> that once it’s resolved, will mean that <strong>Subspace</strong> is available to use</p>
|
|||
|
|
<h3 id="close"><a href="#close" class="headerlink" title="close()"></a><code>close()</code></h3><p>Dispose and perform the cleanup necessary to remove the internal subscriptions and interval timers created by <strong>Subspace</strong> during its normal execution.</p>
|
|||
|
|
<h3 id="contract-instance-abi-address"><a href="#contract-instance-abi-address" class="headerlink" title="contract(instance|{abi,address})"></a><code>contract(instance|{abi,address})</code></h3><p>Adds a <code>track</code> method to the web3 contract objects. You can obtain this functionality by passing a <code>web3.eth.Contract</code> instance, or the <code>abi</code> and <code>address</code> of your contract</p>
|
|||
|
|
<p><strong>Returns</strong><br><code>web3.eth.Contract</code> object enhanced with <code>.track()</code> functions for methods and events.</p>
|
|||
|
|
<h2 id="Contract-methods"><a href="#Contract-methods" class="headerlink" title="Contract methods"></a>Contract methods</h2><h3 id="myContract-events-MyEvent-track-options"><a href="#myContract-events-MyEvent-track-options" class="headerlink" title="myContract.events.MyEvent.track([options])"></a><code>myContract.events.MyEvent.track([options])</code></h3><p>Track a contract event.</p>
|
|||
|
|
<p><strong>Parameters</strong></p>
|
|||
|
|
<ol>
|
|||
|
|
<li><code>options</code> - <code>Object</code> (optional): web3 filter options object to limit the number of events based on a block number range, or indexed filters<ul>
|
|||
|
|
<li><code>filter</code> - <code>Object</code> (optional): Lets you filter events by indexed parameters, e.g. <code>{filter: {myNumber: [12,13]}}</code> means all events where <code>"myNumber"</code> is <code>12</code> or <code>13</code>.</li>
|
|||
|
|
<li><code>fromBlock</code> - <code>Number</code> (optional): The block number from which to get events on.</li>
|
|||
|
|
<li><code>toBlock</code> - <code>Number</code> (optional): The block number to get events up to (Defaults to <code>"latest"</code>)</li>
|
|||
|
|
<li><code>topics</code> - <code>Array</code> (optional): This allows you to manually set the topics for the event filter. If given the filter property and event signature, (<code>topic[0]</code>) will not be set automatically.</li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
</ol>
|
|||
|
|
<p><strong>Returns</strong><br><code>RxJS Observable</code> which will stream the event <code>returnValues</code>.</p>
|
|||
|
|
<h3 id="myContract-methods-myMethod-param1-track-callOptions"><a href="#myContract-methods-myMethod-param1-track-callOptions" class="headerlink" title="myContract.methods.myMethod([param1[, ...]]).track([callOptions])"></a><code>myContract.methods.myMethod([param1[, ...]]).track([callOptions])</code></h3><p>Track a constant function / contract state variable on each block mined, or depending on the <code>callInterval</code> option used during <strong>Subspace</strong> initialization.</p>
|
|||
|
|
<p><strong>Parameters</strong></p>
|
|||
|
|
<ol>
|
|||
|
|
<li><code>callOptions</code> - <code>Object</code> (optional): The options used for calling.<ul>
|
|||
|
|
<li><code>from</code> - <code>String</code> (optional): The address the call “transaction” should be made from.</li>
|
|||
|
|
<li><code>gasPrice</code> - <code>String</code> (optional): The gas price in wei to use for this call “transaction”.</li>
|
|||
|
|
<li><code>gas</code> - <code>Number</code> (optional): The maximum gas provided for this call “transaction” (gas limit).</li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
</ol>
|
|||
|
|
<p><strong>Returns</strong><br><code>RxJS Observable</code> which will stream the function / variable values. Data type will depend on the contract function invoked. </p>
|
|||
|
|
<h3 id="myContract-trackBalance-address-tokenAddress"><a href="#myContract-trackBalance-address-tokenAddress" class="headerlink" title="myContract.trackBalance(address [, tokenAddress])"></a><code>myContract.trackBalance(address [, tokenAddress])</code></h3><p>Track a contract’s balance changes for an address on each block mined, or depending on the <code>callInterval</code> option used during <strong>Subspace</strong> initialization.</p>
|
|||
|
|
<p><strong>Parameters</strong></p>
|
|||
|
|
<ol>
|
|||
|
|
<li><code>address</code> - <code>String</code>: The address to get the balance of.</li>
|
|||
|
|
<li><code>tokenAddress</code> - <code>String</code> (optional): If you want to track the balance for an ERC20 contract, here you can specify the token address. Otherwise, Only ETH balances will be returned.</li>
|
|||
|
|
</ol>
|
|||
|
|
<p><strong>Returns</strong><br><code>RxJS Observable</code> which will stream a string containing the address balance.</p>
|
|||
|
|
<h2 id="Blocks-gas-price-and-block-time"><a href="#Blocks-gas-price-and-block-time" class="headerlink" title="Blocks, gas price and block time"></a>Blocks, gas price and block time</h2><h3 id="trackBlock"><a href="#trackBlock" class="headerlink" title="trackBlock()"></a><code>trackBlock()</code></h3><p>Receive the block information for any new block. It’s the reactive equivalent to <code>web3.eth.getBlock("latest")</code>.</p>
|
|||
|
|
<p><strong>Returns</strong><br><code>RxJS Observable</code> which will stream a block object for the latest block received</p>
|
|||
|
|
<h3 id="trackBlockNumber"><a href="#trackBlockNumber" class="headerlink" title="trackBlockNumber()"></a><code>trackBlockNumber()</code></h3><p>Returns the latest block number. It’s the reactive equivalent to <code>web3.eth.getBlockNumber</code>.</p>
|
|||
|
|
<p><strong>Returns</strong><br><code>RxJS Observable</code> with the latest block number</p>
|
|||
|
|
<h3 id="trackGasPrice"><a href="#trackGasPrice" class="headerlink" title="trackGasPrice()"></a><code>trackGasPrice()</code></h3><p>Returns the current gas price oracle. It’s the reactive equivalent to <code>web3.eth.getGasPrice</code>.</p>
|
|||
|
|
<p><strong>Returns</strong><br><code>RxJS Observable</code> with the average gas price in wei.</p>
|
|||
|
|
<h3 id="trackAverageBlocktime"><a href="#trackAverageBlocktime" class="headerlink" title="trackAverageBlocktime()"></a><code>trackAverageBlocktime()</code></h3><p>Average block time of the last 10 blocks.</p>
|
|||
|
|
<p><strong>Returns</strong><br><code>RxJS Observable</code> with the moving average block time of the last 10 blocks. The time is returned in milliseconds:</p>
|
|||
|
|
<h2 id="Low-level-API-for-data-tracking"><a href="#Low-level-API-for-data-tracking" class="headerlink" title="Low level API for data tracking"></a>Low level API for data tracking</h2><p>These are used in case you don’t want to decorate your web3 contract objects, or if you want to track the balance for an specific address.</p>
|
|||
|
|
<h3 id="trackEvent-contractObject-eventName-options"><a href="#trackEvent-contractObject-eventName-options" class="headerlink" title="trackEvent(contractObject, eventName [, options])"></a><code>trackEvent(contractObject, eventName [, options])</code></h3><p>Track a contract event.</p>
|
|||
|
|
<p><strong>Parameters</strong></p>
|
|||
|
|
<ol>
|
|||
|
|
<li><code>contractObject</code> - <code>web3.eth.Contract</code>: An already initialized contract object pointing to an address and containing a valid ABI.</li>
|
|||
|
|
<li><code>eventName</code> - <code>String</code>: The name of the event to subscribe.</li>
|
|||
|
|
<li><code>options</code> - <code>Object</code> (optional): web3 filter options object to limit the number of events based on a block number range, or indexed filters<ul>
|
|||
|
|
<li><code>filter</code> - <code>Object</code> (optional): Lets you filter events by indexed parameters, e.g. <code>{filter: {myNumber: [12,13]}}</code> means all events where <code>"myNumber"</code> is <code>12</code> or <code>13</code>.</li>
|
|||
|
|
<li><code>fromBlock</code> - <code>Number</code> (optional): The block number from which to get events on.</li>
|
|||
|
|
<li><code>toBlock</code> - <code>Number</code> (optional): The block number to get events up to (Defaults to <code>"latest"</code>)</li>
|
|||
|
|
<li><code>topics</code> - <code>Array</code> (optional): This allows you to manually set the topics for the event filter. If given the filter property and event signature, (<code>topic[0]</code>) will not be set automatically.</li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
</ol>
|
|||
|
|
<p><strong>Returns</strong><br><code>RxJS Observable</code> which will stream the event <code>returnValues</code>.</p>
|
|||
|
|
<h3 id="trackProperty-contractObject-functionName-functionArgs-callOptions"><a href="#trackProperty-contractObject-functionName-functionArgs-callOptions" class="headerlink" title="trackProperty(contractObject, functionName [, functionArgs] [, callOptions])"></a><code>trackProperty(contractObject, functionName [, functionArgs] [, callOptions])</code></h3><p>Track a constant function / contract state variable on each block mined, or depending on the <code>callInterval</code> option used during <strong>Subspace</strong> initialization.</p>
|
|||
|
|
<p><strong>Parameters</strong></p>
|
|||
|
|
<ol>
|
|||
|
|
<li><code>contractObject</code> - <code>web3.eth.Contract</code>: An already initialized contract object pointing to an address and containing a valid ABI.</li>
|
|||
|
|
<li><code>functionName</code> - <code>String</code>: Name of the function or variable whose values will be tracked.</li>
|
|||
|
|
<li><code>functionArgs</code> - <code>Array</code> (optional): Array of arguments that the tracked function receives</li>
|
|||
|
|
<li><code>callOptions</code> - <code>Object</code> (optional): The options used for calling.<ul>
|
|||
|
|
<li><code>from</code> - <code>String</code> (optional): The address the call “transaction” should be made from.</li>
|
|||
|
|
<li><code>gasPrice</code> - <code>String</code> (optional): The gas price in wei to use for this call “transaction”.</li>
|
|||
|
|
<li><code>gas</code> - <code>Number</code> (optional): The maximum gas provided for this call “transaction” (gas limit).</li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
</ol>
|
|||
|
|
<p><strong>Returns</strong><br><code>RxJS Observable</code> which will stream the function / variable values. Data type will depend on the contract function invoked. </p>
|
|||
|
|
<h3 id="trackBalance-address-tokenAddress"><a href="#trackBalance-address-tokenAddress" class="headerlink" title="trackBalance(address [, tokenAddress])"></a><code>trackBalance(address [, tokenAddress])</code></h3><p>Track balance changes for an address on each block mined, or depending on the <code>callInterval</code> option used during <strong>Subspace</strong> initialization.</p>
|
|||
|
|
<p><strong>Parameters</strong></p>
|
|||
|
|
<ol>
|
|||
|
|
<li><code>address</code> - <code>String</code>: The address to get the balance of.</li>
|
|||
|
|
<li><code>tokenAddress</code> - <code>String</code> (optional): If you want to track the balance for an ERC20 contract, here you can specify the token address. Otherwise, Only ETH balances will be returned.</li>
|
|||
|
|
</ol>
|
|||
|
|
<p><strong>Returns</strong><br><code>RxJS Observable</code> which will stream a string containing the address balance.</p>
|
|||
|
|
<h3 id="trackLogs-options-abi"><a href="#trackLogs-options-abi" class="headerlink" title="trackLogs(options [, abi])"></a><code>trackLogs(options [, abi])</code></h3><p>Tracks incoming logs, filtered by the given options.</p>
|
|||
|
|
<p><strong>Parameters</strong></p>
|
|||
|
|
<ol>
|
|||
|
|
<li><code>options</code> - <code>Object</code> (optional): web3 filter options object to limit the number of logs<ul>
|
|||
|
|
<li><code>address</code> - <code>String|Array</code> (optional): An address or a list of addresses to only get logs from particular account(s).</li>
|
|||
|
|
<li><code>fromBlock</code> - <code>Number</code> (optional): The block number from which to get events on.</li>
|
|||
|
|
<li><code>topics</code> - <code>Array</code> (optional): An array of values which must each appear in the log entries. The order is important, if you want to leave topics out use null, e.g. [null, ‘0x00…’]. You can also pass another array for each topic with options for that topic e.g. [null, [‘option1’, ‘option2’]].</li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li><code>abi</code> - <code>Array</code> (optional): Array containing the ABI for the inputs of the logs received. It will automatically decode the logs using this ABI instead of returning the hexadecimal data.</li>
|
|||
|
|
</ol>
|
|||
|
|
<p><strong>Returns</strong><br><code>RxJS Observable</code> which will stream the logs. If the inputs ABI is included in the call, the logs will be automatically decoded.</p>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</main>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<footer role="contentinfo" class="c-spotlightbox o-distance js-inviewport-item">
|
|||
|
|
<div class="o-constrained">
|
|||
|
|
<div class="o-banner o-center">
|
|||
|
|
<p class="h3 o-banner__item">You want to dive <strong>into the framework?</strong></p>
|
|||
|
|
<a href="/de/getting-started.html" title="" class="a-button o-banner__item">Getting
|
|||
|
|
started</a>
|
|||
|
|
</div>
|
|||
|
|
<span class="c-divider u-background-color-light o-distance-xl"></span>
|
|||
|
|
<div class="o-grid o-distance-xl">
|
|||
|
|
<div class="o-grid__column-1-1 o-grid__column-xlarge-2-4">
|
|||
|
|
<div>
|
|||
|
|
<a href="./" class="a-logo">Subspace</a>
|
|||
|
|
</div>
|
|||
|
|
<div class="c-box u-inline-block u-border-color-light o-distance-m">
|
|||
|
|
<div class="o-media-short">
|
|||
|
|
<span class="u-text-color-quiet">We are part of EmbarkLabs</span>
|
|||
|
|
<img src="/images/embark-logo.svg" class="o-vertical-alignment__item">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="o-grid__column-1-2 o-grid__column-large-1-4 o-grid__column-xlarge-1-4">
|
|||
|
|
<p class="h6 u-text-color-quiet u-text-uppercase">Resources</p>
|
|||
|
|
<ul class="o-list">
|
|||
|
|
<li><a href="/de/getting-started.html" title="footer.resources.links.contact">Getting started</a></li>
|
|||
|
|
<li><a href="/de/overview-integrations.html" title="footer.resources.links.privacy">Integrations</a></li>
|
|||
|
|
<li><a href="/de/api.html" target="_blank" title="footer.resources.links.privacy" target="_blank">API</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
<div class="o-grid__column-1-2 o-grid__column-large-1-4 o-grid__column-xlarge-1-4">
|
|||
|
|
<p class="h6 u-text-color-quiet u-text-uppercase">The Status Network</p>
|
|||
|
|
<ul class="o-list">
|
|||
|
|
<li><a href="https://status.im/" title="footer.status.links.status" target="_blank">Status</a></li>
|
|||
|
|
<li><a href="https://dap.ps/" title="dap.ps" target="_blank">dap.ps</a></li>
|
|||
|
|
<li><a href="https://teller.exchange/" title="Teller" target="_blank">Teller</a></li>
|
|||
|
|
<li><a href="https://assemble.fund/" title="Assemble" target="_blank">Assemble</a></li>
|
|||
|
|
<li><a href="https://embark.status.im/" title="Embark" target="_blank">Embark</a></li>
|
|||
|
|
<li><a href="https://subspace.status.im/" title="Subspace" target="_blank">Subspace</a></li>
|
|||
|
|
<li><a href="https://vac.dev/" title="Vac" target="_blank">Vac</a></li>
|
|||
|
|
<li><a href="https://nimbus.status.im/" title="Nimbus" target="_blank">Nimbus</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="o-distance">
|
|||
|
|
<p class="o-vertical-alignment o-center u-text-color-quiet">
|
|||
|
|
MIT Licensed | Subspace is part of the Status Network
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</footer>
|
|||
|
|
<script
|
|||
|
|
src="https://code.jquery.com/jquery-3.3.1.min.js"
|
|||
|
|
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
|
|||
|
|
crossorigin="anonymous"></script>
|
|||
|
|
|
|||
|
|
<!-- Fathom - simple website analytics - https://github.com/usefathom/fathom -->
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
(function(f, a, t, h, o, m){
|
|||
|
|
a[h]=a[h]||function(){
|
|||
|
|
(a[h].q=a[h].q||[]).push(arguments)
|
|||
|
|
};
|
|||
|
|
o=f.createElement('script'),
|
|||
|
|
m=f.getElementsByTagName('script')[0];
|
|||
|
|
o.async=1; o.src=t; o.id='fathom-script';
|
|||
|
|
m.parentNode.insertBefore(o,m)
|
|||
|
|
})(document, window, '//fathom.status.im/tracker.js', 'fathom');
|
|||
|
|
fathom('set', 'siteId', 'DNONS');
|
|||
|
|
fathom('trackPageview');
|
|||
|
|
</script>
|
|||
|
|
<!-- / Fathom -->
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
/*!
|
|||
|
|
* jQuery.anchorScroll jQuery Plugin v1.0
|
|||
|
|
*
|
|||
|
|
* Author: Virgiliu Diaconu
|
|||
|
|
* http://www.virgiliu.com
|
|||
|
|
* Licensed under the MIT license.
|
|||
|
|
*/
|
|||
|
|
!function(o){"use strict";o.anchorScroll=function(l,t){var n=this;n.$el=o(l),n.el=l,n.init=function(){n.options=o.extend({},o.anchorScroll.defaultOptions,t)},n.$el.click(function(t){if(t.preventDefault(),o(t.target).closest("a").length&&o(n.el.hash).length){var e=o(n.el.hash).offset().top-n.options.offsetTop,s="this"===n.$el.data("classTo")?n.el:n.$el.data("classTo"),c=n.$el.data("onScroll"),a=n.$el.data("scrollEnd");"function"==typeof n.options.scrollStart&&n.options.scrollStart.call(l),o(s).addClass(c).removeClass(a),o("html,body").animate({scrollTop:e},n.options.scrollSpeed).promise().done(function(){o(s).addClass(a).removeClass(c),"function"==typeof n.options.scrollEnd&&n.options.scrollEnd.call(l)})}}),n.init()},o.anchorScroll.defaultOptions={scrollSpeed:800,offsetTop:0},o.fn.anchorScroll=function(l){return this.each(function(){new o.anchorScroll(this,l)})}}(jQuery,window,document);
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<script>(function(root, factory) {
|
|||
|
|
if (typeof define === "function" && define.amd) {
|
|||
|
|
define([], function() {
|
|||
|
|
return factory();
|
|||
|
|
});
|
|||
|
|
} else if (typeof exports === "object") {
|
|||
|
|
module.exports = factory();
|
|||
|
|
} else {
|
|||
|
|
root.Headhesive = factory();
|
|||
|
|
}
|
|||
|
|
})(this, function() {
|
|||
|
|
"use strict";
|
|||
|
|
var _mergeObj = function(to, from) {
|
|||
|
|
for (var p in from) {
|
|||
|
|
if (from.hasOwnProperty(p)) {
|
|||
|
|
to[p] = typeof from[p] === "object" ? _mergeObj(to[p], from[p]) : from[p];
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return to;
|
|||
|
|
};
|
|||
|
|
var _throttle = function(func, wait) {
|
|||
|
|
var _now = Date.now || function() {
|
|||
|
|
return new Date().getTime();
|
|||
|
|
};
|
|||
|
|
var context, args, result;
|
|||
|
|
var timeout = null;
|
|||
|
|
var previous = 0;
|
|||
|
|
var later = function() {
|
|||
|
|
previous = _now();
|
|||
|
|
timeout = null;
|
|||
|
|
result = func.apply(context, args);
|
|||
|
|
context = args = null;
|
|||
|
|
};
|
|||
|
|
return function() {
|
|||
|
|
var now = _now();
|
|||
|
|
var remaining = wait - (now - previous);
|
|||
|
|
context = this;
|
|||
|
|
args = arguments;
|
|||
|
|
if (remaining <= 0) {
|
|||
|
|
clearTimeout(timeout);
|
|||
|
|
timeout = null;
|
|||
|
|
previous = now;
|
|||
|
|
result = func.apply(context, args);
|
|||
|
|
context = args = null;
|
|||
|
|
} else if (!timeout) {
|
|||
|
|
timeout = setTimeout(later, remaining);
|
|||
|
|
}
|
|||
|
|
return result;
|
|||
|
|
};
|
|||
|
|
};
|
|||
|
|
var _getScrollY = function() {
|
|||
|
|
return window.pageYOffset !== undefined ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
|
|||
|
|
};
|
|||
|
|
var _getElemY = function(elem, side) {
|
|||
|
|
var pos = 0;
|
|||
|
|
var elemHeight = elem.offsetHeight;
|
|||
|
|
while (elem) {
|
|||
|
|
pos += elem.offsetTop;
|
|||
|
|
elem = elem.offsetParent;
|
|||
|
|
}
|
|||
|
|
if (side === "bottom") {
|
|||
|
|
pos = pos + elemHeight;
|
|||
|
|
}
|
|||
|
|
return pos;
|
|||
|
|
};
|
|||
|
|
var Headhesive = function(elem, options) {
|
|||
|
|
if (!("querySelector" in document && "addEventListener" in window)) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
this.visible = false;
|
|||
|
|
this.options = {
|
|||
|
|
offset: 300,
|
|||
|
|
offsetSide: "top",
|
|||
|
|
classes: {
|
|||
|
|
clone: "headhesive",
|
|||
|
|
stick: "headhesive--stick",
|
|||
|
|
unstick: "headhesive--unstick"
|
|||
|
|
},
|
|||
|
|
throttle: 250,
|
|||
|
|
onInit: function() {},
|
|||
|
|
onStick: function() {},
|
|||
|
|
onUnstick: function() {},
|
|||
|
|
onDestroy: function() {}
|
|||
|
|
};
|
|||
|
|
this.elem = typeof elem === "string" ? document.querySelector(elem) : elem;
|
|||
|
|
this.options = _mergeObj(this.options, options);
|
|||
|
|
this.init();
|
|||
|
|
};
|
|||
|
|
Headhesive.prototype = {
|
|||
|
|
constructor: Headhesive,
|
|||
|
|
init: function() {
|
|||
|
|
this.clonedElem = this.elem.cloneNode(true);
|
|||
|
|
this.clonedElem.className += " " + this.options.classes.clone;
|
|||
|
|
document.body.insertBefore(this.clonedElem, document.body.firstChild);
|
|||
|
|
if (typeof this.options.offset === "number") {
|
|||
|
|
this.scrollOffset = this.options.offset;
|
|||
|
|
} else if (typeof this.options.offset === "string") {
|
|||
|
|
this._setScrollOffset();
|
|||
|
|
} else {
|
|||
|
|
throw new Error("Invalid offset: " + this.options.offset);
|
|||
|
|
}
|
|||
|
|
this._throttleUpdate = _throttle(this.update.bind(this), this.options.throttle);
|
|||
|
|
this._throttleScrollOffset = _throttle(this._setScrollOffset.bind(this), this.options.throttle);
|
|||
|
|
window.addEventListener("scroll", this._throttleUpdate, false);
|
|||
|
|
window.addEventListener("resize", this._throttleScrollOffset, false);
|
|||
|
|
this.options.onInit.call(this);
|
|||
|
|
},
|
|||
|
|
_setScrollOffset: function() {
|
|||
|
|
if (typeof this.options.offset === "string") {
|
|||
|
|
this.scrollOffset = _getElemY(document.querySelector(this.options.offset), this.options.offsetSide);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
destroy: function() {
|
|||
|
|
document.body.removeChild(this.clonedElem);
|
|||
|
|
window.removeEventListener("scroll", this._throttleUpdate);
|
|||
|
|
window.removeEventListener("resize", this._throttleScrollOffset);
|
|||
|
|
this.options.onDestroy.call(this);
|
|||
|
|
},
|
|||
|
|
stick: function() {
|
|||
|
|
if (!this.visible) {
|
|||
|
|
this.clonedElem.className = this.clonedElem.className.replace(new RegExp("(^|\\s)*" + this.options.classes.unstick + "(\\s|$)*", "g"), "");
|
|||
|
|
this.clonedElem.className += " " + this.options.classes.stick;
|
|||
|
|
this.visible = true;
|
|||
|
|
this.options.onStick.call(this);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
unstick: function() {
|
|||
|
|
if (this.visible) {
|
|||
|
|
this.clonedElem.className = this.clonedElem.className.replace(new RegExp("(^|\\s)*" + this.options.classes.stick + "(\\s|$)*", "g"), "");
|
|||
|
|
this.clonedElem.className += " " + this.options.classes.unstick;
|
|||
|
|
this.visible = false;
|
|||
|
|
this.options.onUnstick.call(this);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
update: function() {
|
|||
|
|
if (_getScrollY() > this.scrollOffset) {
|
|||
|
|
this.stick();
|
|||
|
|
} else {
|
|||
|
|
this.unstick();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
return Headhesive;
|
|||
|
|
});</script>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):a("object"==typeof exports?require("jquery"):window.jQuery||window.Zepto)}(function(a){var b,c,d,e,f,g,h="Close",i="BeforeClose",j="AfterClose",k="BeforeAppend",l="MarkupParse",m="Open",n="Change",o="mfp",p="."+o,q="mfp-ready",r="mfp-removing",s="mfp-prevent-close",t=function(){},u=!!window.jQuery,v=a(window),w=function(a,c){b.ev.on(o+a+p,c)},x=function(b,c,d,e){var f=document.createElement("div");return f.className="mfp-"+b,d&&(f.innerHTML=d),e?c&&c.appendChild(f):(f=a(f),c&&f.appendTo(c)),f},y=function(c,d){b.ev.triggerHandler(o+c,d),b.st.callbacks&&(c=c.charAt(0).toLowerCase()+c.slice(1),b.st.callbacks[c]&&b.st.callbacks[c].apply(b,a.isArray(d)?d:[d]))},z=function(c){return c===g&&b.currTemplate.closeBtn||(b.currTemplate.closeBtn=a(b.st.closeMarkup.replace("%title%",b.st.tClose)),g=c),b.currTemplate.closeBtn},A=function(){a.magnificPopup.instance||(b=new t,b.init(),a.magnificPopup.instance=b)},B=function(){var a=document.createElement("p").style,b=["ms","O","Moz","Webkit"];if(void 0!==a.transition)return!0;for(;b.length;)if(b.pop()+"Transition"in a)return!0;return!1};t.prototype={constructor:t,init:function(){var c=navigator.appVersion;b.isLowIE=b.isIE8=document.all&&!document.addEventListener,b.isAndroid=/android/gi.test(c),b.isIOS=/iphone|ipad|ipod/gi.test(c),b.supportsTransition=B(),b.probablyMobile=b.isAndroid||b.isIOS||/(Opera Mini)|Kindle|webOS|BlackBerry|(Opera Mobi)|(Windows Phone)|IEMobile/i.test(navigator.userAgent),d=a(document),b.popupsCache={}},open:function(c){var e;if(c.isObj===!1){b.items=c.items.toArray(),b.index=0;var g,h=c.items;for(e=0;e<h.length;e++)if(g=h[e],g.parsed&&(g=g.el[0]),g===c.el[0]){b.index=e;break}}else b.items=a.isArray(c.items)?c.items:[c.items],b.index=c.index||0;if(b.isOpen)return void b.updateItemHTML();b.types=[],f="",c.mainEl&&c.mainEl.length?b.ev=c.mainEl.eq(0):b.ev=d,c.key?(b.popupsCache[c.key]||(b.popupsCache[c.key]={}),b.currTemplate=b.popupsCache[c.key]):b.currTemplate={},b.st=a.extend(!0,{},a.magnificPopup.defaults,c),b.fixedContentPos="auto"===b.st.fixedContentPos?!b.probablyMobile:b.st.fixedContentPos,b.st.modal&&(b.st.closeOnContentClick=!1,b.st.closeOnBgClick=!1,b.st.showCloseBtn=!1,b.st.enableEscapeKey=!1),b.bgOverlay||(b.bgOverlay=x("bg").on("click"+p,function(){b.close()}),b.wrap=x("wrap").attr("tabindex",-1).on("click"+p,function(a){b._checkIfClose(a.target)&&b.close()}),b.container=x("container",b.wrap)),b.contentContainer=x("content"),b.st.preloader&&(b.preloader=x("preloader",b.container,b.st.tLoading));var i=a.magnificPopup.modules;for(e=0;e<i.length;e++){var j=i[e];j=j.charAt(0).toUpperCase()+j.slice(1),b["init"+j].call(b)}y("BeforeOpen"),b.st.showCloseBtn&&(b.st.closeBtnInside?(w(l,function(a,b,c,d){c.close_replaceWith=z(d.type)}),f+=" mfp-close-btn-in"):b.wrap.append(z())),b.st.alignTop&&(f+=" mfp-align-top"),b.fixedContentPos?b.wrap.css({overflow:b.st.overflowY,overflowX:"hidden",overflowY:b.st.overflowY}):b.wrap.css({top:v.scrollTop(),position:"absolute"}),(b.st.fixedBgPos===!1||"auto"===b.st.fixedBgPos&&!b.fixedContentPos)&&b.bgOverlay.css({height:d.height(),position:"absolute"}),b.st.enableEscapeKey&&d.on("keyup"+p,function(a){27===a.keyCode&&b.close()}),v.on("resize"+p,function(){b.updateSize()}),b.st.closeOnContentClick||(f+=" mfp-auto-cursor"),f&&b.wrap.addClass(f);var k=b.wH=v.height(),n={};if(b.fixedContentPos&&b._hasScrollBar(k)){var o=b._getScrollbarSize();o&&(n.marginRight=o)}b.fixedContentPos&&(b.isIE7?a("body, html").css("overflow","hidden"):n.overflow="hidden");var r=b.st.mainClass;return b.isIE7&&(r+=" mfp-ie7"),r&&b._addClassToMFP(r),b.updateItemHTML(),y("BuildControls"),a("html").css(n),b.bgOverlay.add(b.wrap).prependTo(b.st.prependTo||a(document.body)),b._lastFocusedEl=document.activeElement,setTimeout(function(){b.content?(b._addClassToMFP(q),b._setFocus()):b.bgOverlay.addClass(q),d.on("focusin"+p,b._onFocusIn)},16),b.isOpen=!0,b.updateSize(k),y(m),c},close:function(){b.isOpen&&(y(i),b.isOpen=!1,b.st.removalDelay&&!b.isLowIE&&b.supportsTransition?(b._addClassToMFP(r)
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
(function (global, factory) {
|
|||
|
|
typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('jquery')) :
|
|||
|
|
typeof define === 'function' && define.amd ? define(['jquery'], factory) :
|
|||
|
|
(factory(global.jQuery));
|
|||
|
|
}(this, (function ($) { 'use strict';
|
|||
|
|
|
|||
|
|
$ = $ && $.hasOwnProperty('default') ? $['default'] : $;
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* @author Mudit Ameta
|
|||
|
|
* @license https://github.com/zeusdeux/isInViewport/blob/master/license.md MIT
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
// expose isInViewport as a custom pseudo-selector
|
|||
|
|
$.extend($.expr.pseudos || $.expr[':'], {
|
|||
|
|
// if $.expr.createPseudo is available, use it
|
|||
|
|
'in-viewport': $.expr.createPseudo
|
|||
|
|
? $.expr.createPseudo(function (argsString) { return function (currElement) { return isInViewport(currElement, getSelectorArgs(argsString)); }; })
|
|||
|
|
: function (currObj, index, meta) { return isInViewport(currObj, getSelectorArgs(meta[3])); }
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
// expose isInViewport as a function too
|
|||
|
|
// this lets folks pass around actual objects as options (like custom viewport)
|
|||
|
|
// and doesn't tie 'em down to strings. It also prevents isInViewport from
|
|||
|
|
// having to look up and wrap the dom element corresponding to the viewport selector
|
|||
|
|
$.fn.isInViewport = function(options) {
|
|||
|
|
return this.filter(function (i, el) { return isInViewport(el, options); })
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
$.fn.run = run;
|
|||
|
|
|
|||
|
|
// lets you chain any arbitrary function or an array of functions and returns a jquery object
|
|||
|
|
function run(args) {
|
|||
|
|
var this$1 = this;
|
|||
|
|
|
|||
|
|
if (arguments.length === 1 && typeof args === 'function') {
|
|||
|
|
args = [args];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!(args instanceof Array)) {
|
|||
|
|
throw new SyntaxError('isInViewport: Argument(s) passed to .do/.run should be a function or an array of functions')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
args.forEach(function (arg) {
|
|||
|
|
if (typeof arg !== 'function') {
|
|||
|
|
console.warn('isInViewport: Argument(s) passed to .do/.run should be a function or an array of functions');
|
|||
|
|
console.warn('isInViewport: Ignoring non-function values in array and moving on');
|
|||
|
|
} else {
|
|||
|
|
[].slice.call(this$1).forEach(function (t) { return arg.call($(t)); });
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
return this
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
// gets the width of the scrollbar
|
|||
|
|
function getScrollbarWidth(viewport) {
|
|||
|
|
// append a div that has 100% width to get true width of viewport
|
|||
|
|
var el = $('<div></div>').css({
|
|||
|
|
width: '100%'
|
|||
|
|
});
|
|||
|
|
viewport.append(el);
|
|||
|
|
|
|||
|
|
// subtract true width from the viewport width which is inclusive
|
|||
|
|
// of scrollbar by default
|
|||
|
|
var scrollBarWidth = viewport.width() - el.width();
|
|||
|
|
|
|||
|
|
// remove our element from DOM
|
|||
|
|
el.remove();
|
|||
|
|
return scrollBarWidth
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
// Returns true if DOM element `element` is in viewport
|
|||
|
|
function isInViewport(element, options) {
|
|||
|
|
var ref = element.getBoundingClientRect();
|
|||
|
|
var top = ref.top;
|
|||
|
|
var bottom = ref.bottom;
|
|||
|
|
var left = ref.left;
|
|||
|
|
var right = ref.right;
|
|||
|
|
|
|||
|
|
var settings = $.extend({
|
|||
|
|
tolerance: 0,
|
|||
|
|
viewport: window
|
|||
|
|
}, options);
|
|||
|
|
var isVisibleFlag = false;
|
|||
|
|
var $viewport = settings.viewport.jquery ? settings.viewport : $(settings.viewport);
|
|||
|
|
|
|||
|
|
if (!$viewport.length) {
|
|||
|
|
console.warn('isInViewport: The viewport selector you have provided matches no element on page.');
|
|||
|
|
console.warn('isInViewport: Defaulting to viewport as window');
|
|||
|
|
$viewport = $(window);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var $viewportHeight = $viewport.height();
|
|||
|
|
var $viewportWidth = $viewport.width();
|
|||
|
|
var typeofViewport = $viewport[0].toString();
|
|||
|
|
|
|||
|
|
// if the viewport is other than window recalculate the top,
|
|||
|
|
// bottom,left and right wrt the new viewport
|
|||
|
|
// the [object DOMWindow] check is for window object type in PhantomJS
|
|||
|
|
if ($viewport[0] !== window && typeofViewport !== '[object Window]' && typeofViewport !== '[object DOMWindow]') {
|
|||
|
|
// use getBoundingClientRect() instead of $.Offset()
|
|||
|
|
// since the original top/bottom positions are calculated relative to browser viewport and not document
|
|||
|
|
var viewportRect = $viewport[0].getBoundingClientRect();
|
|||
|
|
|
|||
|
|
// recalculate these relative to viewport
|
|||
|
|
top = top - viewportRect.top;
|
|||
|
|
bottom = bottom - viewportRect.top;
|
|||
|
|
left = left - viewportRect.left;
|
|||
|
|
right = right - viewportRect.left;
|
|||
|
|
|
|||
|
|
// get the scrollbar width from cache or calculate it
|
|||
|
|
isInViewport.scrollBarWidth = isInViewport.scrollBarWidth || getScrollbarWidth($viewport);
|
|||
|
|
|
|||
|
|
// remove the width of the scrollbar from the viewport width
|
|||
|
|
$viewportWidth -= isInViewport.scrollBarWidth;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// handle falsy, non-number and non-integer tolerance value
|
|||
|
|
// same as checking using isNaN and then setting to 0
|
|||
|
|
// bitwise operators deserve some love too you know
|
|||
|
|
settings.tolerance = ~~Math.round(parseFloat(settings.tolerance));
|
|||
|
|
|
|||
|
|
if (settings.tolerance < 0) {
|
|||
|
|
settings.tolerance = $viewportHeight + settings.tolerance; // viewport height - tol
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// the element is NOT in viewport iff it is completely out of
|
|||
|
|
// viewport laterally or if it is completely out of the tolerance
|
|||
|
|
// region. Therefore, if it is partially in view then it is considered
|
|||
|
|
// to be in the viewport and hence true is returned. Because we have adjusted
|
|||
|
|
// the left/right positions relative to the viewport, we should check the
|
|||
|
|
// element's right against the viewport's 0 (left side), and the element's
|
|||
|
|
// left against the viewport's width to see if it is outside of the viewport.
|
|||
|
|
|
|||
|
|
if (right <= 0 || left >= $viewportWidth) {
|
|||
|
|
return isVisibleFlag
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// if the element is bound to some tolerance
|
|||
|
|
isVisibleFlag = settings.tolerance ? top <= settings.tolerance && bottom >= settings.tolerance : bottom > 0 && top <= $viewportHeight;
|
|||
|
|
|
|||
|
|
return isVisibleFlag
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
// get the selector args from the args string proved by Sizzle
|
|||
|
|
function getSelectorArgs(argsString) {
|
|||
|
|
if (argsString) {
|
|||
|
|
var args = argsString.split(',');
|
|||
|
|
|
|||
|
|
// when user only gives viewport and no tolerance
|
|||
|
|
if (args.length === 1 && isNaN(args[0])) {
|
|||
|
|
args[1] = args[0];
|
|||
|
|
args[0] = void 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
tolerance: args[0] ? args[0].trim() : void 0,
|
|||
|
|
viewport: args[1] ? $(args[1].trim()) : void 0
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return {}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
})));
|
|||
|
|
|
|||
|
|
//# sourceMappingURL=isInViewport.js.map
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.19.0/prism.min.js"></script>
|
|||
|
|
<script>
|
|||
|
|
$(document).ready(function() {
|
|||
|
|
$(document).on('scroll',function(e)
|
|||
|
|
{
|
|||
|
|
$('h2[id]').each(function()
|
|||
|
|
{
|
|||
|
|
if ( $(this).offset().top < window.pageYOffset + 100
|
|||
|
|
&& $(this).offset().top +
|
|||
|
|
$(this).height() > window.pageYOffset + 100
|
|||
|
|
)
|
|||
|
|
{
|
|||
|
|
|
|||
|
|
$(this).addClass('is-active');
|
|||
|
|
|
|||
|
|
var data = $(this).attr('id');
|
|||
|
|
|
|||
|
|
window.location.hash = '#!' + data;
|
|||
|
|
|
|||
|
|
var $location = window.location.hash.replace(/^#!/, '');
|
|||
|
|
|
|||
|
|
$('.js-docs-sidebar a').each(function() {
|
|||
|
|
if($(this).attr('href').indexOf($location) > -1) {
|
|||
|
|
$(this).addClass('is-active');
|
|||
|
|
} else {
|
|||
|
|
$(this).removeClass('is-active');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
$(window).scroll(function() {
|
|||
|
|
$('.js-inviewport-item').isInViewport({
|
|||
|
|
tolerance: 0
|
|||
|
|
})
|
|||
|
|
.addClass('is-active');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
var options = {
|
|||
|
|
classes: {
|
|||
|
|
clone: 'o-header__top--clone',
|
|||
|
|
stick: 'is-sticky',
|
|||
|
|
unstick: 'is-unsticky'
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
if($(window).width() >= 767) {
|
|||
|
|
var header = new Headhesive('.js-header', options);
|
|||
|
|
}
|
|||
|
|
$('.js-navigation-open').on('click', function(event) {
|
|||
|
|
event.preventDefault();
|
|||
|
|
|
|||
|
|
$('.js-navigation-list').addClass('is-active');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$('.js-navigation-close').on('click', function(event) {
|
|||
|
|
event.preventDefault();
|
|||
|
|
|
|||
|
|
$('.js-navigation-list').removeClass('is-active');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$('.js-header-keyvisual').addClass('is-active');
|
|||
|
|
|
|||
|
|
// Popup
|
|||
|
|
$('.js-popup').magnificPopup({
|
|||
|
|
type: 'inline',
|
|||
|
|
preloader: false,
|
|||
|
|
focus: '#name',
|
|||
|
|
|
|||
|
|
// When elemened is focused, some mobile browsers in some cases zoom in
|
|||
|
|
// It looks not nice, so we disable it:
|
|||
|
|
callbacks: {
|
|||
|
|
beforeOpen: function() {
|
|||
|
|
if($(window).width() < 700) {
|
|||
|
|
this.st.focus = false;
|
|||
|
|
} else {
|
|||
|
|
this.st.focus = '#name';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Scroll
|
|||
|
|
$('.js-anchor-scroll').anchorScroll({
|
|||
|
|
scrollSpeed: 800, // scroll speed
|
|||
|
|
offsetTop: 100, // offset for fixed top bars (defaults to 0)
|
|||
|
|
onScroll: function () {
|
|||
|
|
// callback on scroll start
|
|||
|
|
},
|
|||
|
|
scrollEnd: function () {
|
|||
|
|
// callback on scroll end
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$('.js-docs-trigger').on('click', function(event) {
|
|||
|
|
event.preventDefault();
|
|||
|
|
|
|||
|
|
$('.js-docs-sidebar').addClass('is-active');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$('.js-docs-trigger-close').on('click', function(event) {
|
|||
|
|
event.preventDefault();
|
|||
|
|
|
|||
|
|
$('.js-docs-sidebar').removeClass('is-active');
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
|
|||
|
|
</body>
|
|||
|
|
</html>
|
|||
|
|
|