2020-03-20 18:02:02 +00:00
<!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/vue.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 >
2020-03-23 17:04:33 +00:00
< div id = "stars" > < / div >
< div id = "stars2" > < / div >
< header role = "banner" class = "o-header" >
2020-03-20 18:02:02 +00:00
< 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 " >
< 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 = "Vue" > < a href = "#Vue" class = "headerlink" title = "Vue" > < / a > Vue< / h1 > < p > Vue provides the official npm package < code > vue-rx< / code > that provides RxJS integration, which simplifies the use of Subspace with Vue.js< / p >
< h3 id = "Example" > < a href = "#Example" class = "headerlink" title = "Example" > < / a > Example< / h3 > < div class = "c-notification" >
This example is available in < a href = "https://github.com/embark-framework/subspace/tree/master/examples/vue" target = "_blank" > Github< / a >
< / div >
< h4 id = "MyComponent-vue" > < a href = "#MyComponent-vue" class = "headerlink" title = "MyComponent.vue" > < / a > MyComponent.vue< / h4 >
<!-- Has Prism -->
< pre class = "line-numbers" style = "" > < code class = "language-js" > < template>
< ul v-if=" !!eventData$" >
< li> < b> someValue: < / b> {{eventData$.someValue}}< / li>
< li> < b> anotherValue: < / b> {{eventData$.anotherValue}}< / li>
< / ul>
< / template>
< script>
export default {
name: ' MyComponent' ,
props: {
eventData: Object
},
subscriptions() { / / provide Rx observables
return {
eventData$: this.eventData
}
}
}
< / script>
< / code > < / pre >
< h4 id = "App-vue" > < a href = "#App-vue" class = "headerlink" title = "App.vue" > < / a > App.vue< / h4 >
<!-- Has Prism -->
< pre class = "line-numbers" style = "" > < code class = "language-js" > < template>
< div id=" app" >
< button v-on:click=" createTrx" > Create a Transaction< / button>
< MyComponent v-bind:event-data=" myEventObservable$" v-if=" !!myEventObservable$" / >
< / div>
< / template>
< script>
import MyComponent from ' ./ components/ MyComponent.vue' ;
import Subspace from " @embarklabs/ subspace" ;
export default {
name: ' app' ,
data: function(){
return {
myEventObservable$: null,
MyContractInstance: null
};
},
created: async function(){
this.MyContractInstance = ...; / / TODO: obtain a web3.eth.contract instance
const subspace = new Subspace(web3);
await subspace.init();
this.myEventObservable$ = subspace.trackEvent(this.MyContractInstance, " MyEvent" , {filter: {}, fromBlock: 1 });
},
methods: {
createTrx: function(){
this.MyContractInstance.methods
.myFunction()
.send({ from: web3.eth.defaultAccount });
}
},
components: {
MyComponent
}
}
< / script>
< / code > < / pre >
< h4 id = "Further-read" > < a href = "#Further-read" class = "headerlink" title = "Further read" > < / a > Further read< / h4 > < ul >
< li > < a href = "https://www.npmjs.com/package/vue-rx" target = "_blank" rel = "noopener" > vue-rx< / a > < / li >
< / ul >
< / 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 > ( f u n c t i o n ( r o o t , f a c t o r y ) {
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 >
