diff --git a/demo.js b/demo.js new file mode 100644 index 0000000..7a6037b --- /dev/null +++ b/demo.js @@ -0,0 +1,7 @@ +import * as riot from 'riot'; +import TinyOnePage from './src/TinyOnePage.riot'; + +riot.register('tiny-one-page', TinyOnePage); + +// adding component with animate object +riot.mount('tiny-one-page'); diff --git a/dist/css/demo.css b/dist/css/demo.css new file mode 100644 index 0000000..ad4dd12 --- /dev/null +++ b/dist/css/demo.css @@ -0,0 +1 @@ +.navbar{position:fixed;width:100%;text-align:center;background-color:#fff}.navbar li{display:inline-block;margin:0 .3em}.navbar li a{display:block;transition:all .1s ease-in-out}.navbar li.current a,.navbar li a:hover{transform:scale(1.3)}.section{padding:6em;line-height:1.8} \ No newline at end of file diff --git a/dist/index.html b/dist/index.html index 952c39b..03cfd68 100644 --- a/dist/index.html +++ b/dist/index.html @@ -3,32 +3,66 @@ - Tiny Hamburger | Demo 386 Top + Tiny One Page | Demo - - - +
- -
- + diff --git a/dist/js/demo.js b/dist/js/demo.js new file mode 100644 index 0000000..b11fd94 --- /dev/null +++ b/dist/js/demo.js @@ -0,0 +1 @@ +!function(t){var e={};function n(o){if(e[o])return e[o].exports;var r=e[o]={i:o,l:!1,exports:{}};return t[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)n.d(o,r,function(e){return t[e]}.bind(null,r));return o},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="/",n(n.s=1)}([function(t,e,n){(function(n){var o,r;window.Element&&!Element.prototype.closest&&(Element.prototype.closest=function(t){var e,n=(this.document||this.ownerDocument).querySelectorAll(t),o=this;do{for(e=n.length;0<=--e&&n.item(e)!==o;);}while(e<0&&(o=o.parentElement));return o}),function(){function t(t,e){e=e||{bubbles:!1,cancelable:!1,detail:void 0};var n=document.createEvent("CustomEvent");return n.initCustomEvent(t,e.bubbles,e.cancelable,e.detail),n}"function"!=typeof window.CustomEvent&&(t.prototype=window.Event.prototype,window.CustomEvent=t)}(),function(){for(var t=0,e=["ms","moz","webkit","o"],n=0;nb.durationMax?b.durationMax:b.durationMin&&v=S)return h.cancelScroll(!0),a=n,u=m,0===(r=o)&&document.body.focus(),u||(r.focus(),document.activeElement!==r&&(r.setAttribute("tabindex","-1"),r.focus(),r.style.outline="none"),t.scrollTo(0,a)),i("scrollStop",l,o,s),!(d=y=null)}(O,A)||(d=t.requestAnimationFrame(x),y=e)};0===t.pageYOffset&&t.scrollTo(0,0),E=o,M=l,m||history.pushState&&M.updateURL&&history.pushState({smoothScroll:JSON.stringify(M),anchor:E.id},document.title,E===document.documentElement?"#top":"#"+E.id),"matchMedia"in t&&t.matchMedia("(prefers-reduced-motion)").matches?t.scrollTo(0,Math.floor(A)):(i("scrollStart",l,o,s),h.cancelScroll(!0),t.requestAnimationFrame(x))}}},m=function(e){if(!e.defaultPrevented&&!(0!==e.button||e.metaKey||e.ctrlKey||e.shiftKey)&&"closest"in e.target&&(l=e.target.closest(s))&&"a"===l.tagName.toLowerCase()&&!e.target.closest(u.ignore)&&l.hostname===t.location.hostname&&l.pathname===t.location.pathname&&/#/.test(l.href)){var n,r=o(l.hash);if("#"===r){if(!u.topOnEmptyHash)return;n=document.documentElement}else n=document.querySelector(r);(n=n||"#top"!==r?n:document.documentElement)&&(e.preventDefault(),function(e){if(history.replaceState&&e.updateURL&&!history.state){var n=t.location.hash;n=n||"",history.replaceState({smoothScroll:JSON.stringify(e),anchor:n||t.pageYOffset},document.title,n||t.location.href)}}(u),h.animateScroll(n,l))}},f=function(t){if(null!==history.state&&history.state.smoothScroll&&history.state.smoothScroll===JSON.stringify(u)){var e=history.state.anchor;"string"==typeof e&&e&&!(e=document.querySelector(o(history.state.anchor)))||h.animateScroll(e,null,{updateURL:!1})}};return h.destroy=function(){u&&(document.removeEventListener("click",m,!1),t.removeEventListener("popstate",f,!1),h.cancelScroll(),d=c=l=u=null)},function(){if(!("querySelector"in document&&"addEventListener"in t&&"requestAnimationFrame"in t&&"closest"in t.Element.prototype))throw"Smooth Scroll: This browser does not support the required JavaScript methods and browser APIs.";h.destroy(),u=n(e,a||{}),c=u.header?document.querySelector(u.header):null,document.addEventListener("click",m,!1),u.updateURL&&u.popstate&&t.addEventListener("popstate",f,!1)}(),h}}(r)}.apply(e,[]))||(t.exports=o)}).call(this,n(2))},function(t,e,n){n(3),t.exports=n(4)},function(t,e){var n;n=function(){return this}();try{n=n||new Function("return this")()}catch(t){"object"==typeof window&&(n=window)}t.exports=n},function(t,e,n){"use strict";n.r(e);const o=new Map,r=Symbol("riot-component"),i=new Set,s="is",a="value",u=Symbol("attributes"),l=Symbol("template");var c=Object.freeze({COMPONENTS_IMPLEMENTATION_MAP:o,DOM_COMPONENT_INSTANCE_PROPERTY:r,PLUGINS_SET:i,IS_DIRECTIVE:s,VALUE_ATTRIBUTE:a,ATTRIBUTES_KEY_SYMBOL:u,TEMPLATE_KEY_SYMBOL:l});function d(t){Array.from(t).forEach(t=>t.parentNode&&t.parentNode.removeChild(t))}const h=2;var m={EACH:0,IF:1,SIMPLE:h,TAG:3,SLOT:4};const{indexOf:f}=[],p=(t,e,n,o,r,i)=>{const s="selectedIndex"in e;let a=s;for(;ot==e,b=t=>t,v=(t,e,n,o,r,i,s)=>{const a=i-r;if(a<1)return-1;for(;n-e>=a;){let a=e,u=r;for(;an{if(r-o<2)e.removeChild(t(n[o],-1));else{const i=e.ownerDocument.createRange();i.setStartBefore(t(n[o],-1)),i.setEndAfter(t(n[r-1],-1)),i.deleteContents()}},O=(t,e,n)=>{let o=1,r=e;for(;o>>0;n{((t,e,n,o,r,i,s,a,u)=>{const l=new Map,c=t.length;let d=s,h=0;for(;h{const a=n+i,u=[];let l,c,d,h,m,f,p;t:for(l=0;l<=a;l++){if(l>50)return null;for(p=l-1,m=l?u[l-1]:[0,0],f=u[l]=[],c=-l;c<=l;c+=2){for(d=(h=c===-l||c!==l&&m[p+c-1]=0;l--){for(;h>0&&d>0&&s(o[r+h-1],t[e+d-1]);)g[b--]=0,h--,d--;if(!l)break;p=l-1,m=l?u[l-1]:[0,0],(c=h-d)===-l||c!==l&&m[p+c-1]{let u=0,l=os;)--u;l=a+o-u;const m=Array(l);let f=c[u];for(--n;f;){const{newi:t,oldi:e}=f;for(;n>t;)m[--l]=1,--n;for(;s>e;)m[--l]=-1,--s;m[--l]=0,--n,--s,f=f.prev}for(;n>=e;)m[--l]=1,--n;for(;s>=i;)m[--l]=-1,--s;return m})(n,o,r,i,s,a,u,l),t,e,n,o,s,a,c,h)};function M(t){return null==t}function T(t){return!M(t.content)}const A=Object.seal({childrenMap:null,node:null,root:null,condition:null,evaluate:null,template:null,isTemplateTag:!1,nodes:[],getKey:null,indexName:null,itemName:null,afterPlaceholder:null,placeholder:null,mount(t,e){return this.update(t,e)},update(t,e){const{placeholder:n}=this,o=this.evaluate(t),r=o?Array.from(o):[],i=n.parentNode,{newChildrenMap:s,batches:a,futureNodes:u}=function(t,e,n,o){const{condition:r,template:i,childrenMap:s,itemName:a,getKey:u,indexName:l,root:c,isTemplateTag:d}=o,h=new Map,m=[],f=[];return t.forEach((t,o)=>{const p=function(t,e){let{itemName:n,indexName:o,index:r,item:i}=e;t[n]=i,o&&(t[o]=r);return t}(Object.create(e),{itemName:a,indexName:l,index:o,item:t}),g=u?u(p):o,b=s.get(g);if(function(t,e){return!!t&&!1===Boolean(t(e))}(r,p))return;const v=b?b.template:i.clone(),y=b?v.el:c.cloneNode(),w=!b,O=d&&w?function(t){const e=t.dom.cloneNode(!0);return{avoidDOMInjection:!0,fragment:e,children:Array.from(e.childNodes)}}(v):{};w?m.push(()=>v.mount(y,p,n,O)):v.update(p,n),d?f.push(...O.children||v.children):f.push(y),s.delete(g),h.set(g,{template:v,context:p,index:o})}),{newChildrenMap:h,batches:m,futureNodes:f}}(r,t,e,this);return u.length?((t,e,n,o)=>{o||(o={});const r=o.compare||g,i=o.node||b,s=null==o.before?null:i(o.before,0),a=e.length;let u=a,l=0,c=n.length,d=0;for(;l{for(;ot()),this.childrenMap=s,this.nodes=u,this},unmount(t,e){return S(this.childrenMap,e),this.childrenMap=new Map,this.nodes=[],this}});function N(t,e){return(n,o)=>{if(o<0){const{template:n,context:o}=t.pop();n.unmount(o,e,null)}return n}}function S(t,e){return Array.from(t.values()).map(t=>{let{template:n,context:o}=t;return n.unmount(o,e,!0)})}const j=Object.seal({node:null,evaluate:null,parent:null,isTemplateTag:!1,placeholder:null,template:null,mount(t,e){return this.parent.insertBefore(this.placeholder,this.node),this.parent.removeChild(this.node),this.update(t,e)},update(t,e){const n=!!this.evaluate(t),o=!this.value&&n,r=this.value&&!n,i=()=>{const n=this.node.cloneNode();this.parent.insertBefore(n,this.placeholder),this.template=this.template.clone(),this.template.mount(n,t,e)};switch(!0){case o:i();break;case r:this.unmount(t);break;default:n&&this.template.update(t,e)}return this.value=n,this},unmount(t,e){return this.template.unmount(t,e,!0),this}});const C=0;var x={ATTRIBUTE:C,EVENT:1,TEXT:2,VALUE:3};function I(t){return"object"==typeof t}const L="removeAttribute",_="setAttribute";function P(t,e,n,o){let{name:r}=e;r?((function(t){return"boolean"==typeof t}(n)||I(n))&&(t[r]=n),t[function(t){return M(t)||!1===t||""===t||I(t)?L:_}(n)](r,function(t,e){return!0===e?t:e}(r,n))):n?function(t,e){Object.entries(e).forEach(e=>{let[n,o]=e;return P(t,{name:n},o)})}(t,n):o&&function(t,e){Object.keys(e).forEach(e=>t.removeAttribute(e))}(t,o)}const U=/^on/;function D(t){return M(t)?"":t}var B={[C]:P,1:function(t,e,n,o){let{name:r}=e;const i=r.replace(U,"");return o&&t.removeEventListener(i,o),n&&t.addEventListener(i,n,!1),n},2:function(t,e,n){let{childNodeIndex:o}=e;const r=t.childNodes[o],i=D(n);if(r.nodeType===Node.COMMENT_NODE){const e=document.createTextNode(i);t.replaceChild(e,r)}else r.data=D(i)},3:function(t,e,n){t.value=n}};const q=Object.seal({node:null,value:null,mount(t){return this.value=this.evaluate(t),k(this,this.value),this},update(t){const e=this.evaluate(t);return this.value!==e&&(k(this,e),this.value=e),this},unmount(){return 1===this.type&&k(this,null),this}});function k(t,e){return B[t.type](t.node,t,e,t.value)}function H(t,e){return Object.assign({},q,{},e,{node:t})}const F=Object.seal({node:null,name:null,template:null,mount(t,e){const n=!!t.slots&&t.slots.find(t=>{let{id:e}=t;return e===this.name}),{parentNode:o}=this.node;return this.template=n&&G(n.html,n.bindings).createDOM(o),this.template&&(this.template.mount(this.node,e),function t(e){e.firstChild&&(e.parentNode.insertBefore(e.firstChild,e),t(e))}(this.node)),o.removeChild(this.node),this},update(t,e){return this.template&&e&&this.template.update(e),this},unmount(t,e,n){return this.template&&this.template.unmount(e,null,n),this}});function R(t){return t.reduce((t,e)=>{let{bindings:n}=e;return t.concat(n)},[])}const $=Object.seal({node:null,evaluate:null,name:null,slots:null,tag:null,attributes:null,getComponent:null,mount(t){return this.update(t)},update(t,e){const n=this.evaluate(t);return n===this.name?this.tag.update(t):(this.unmount(t,e,!0),this.name=n,this.tag=function(t,e,n){return void 0===e&&(e=[]),void 0===n&&(n=[]),t?t({slots:e,attributes:n}):G(function(t){return t.reduce((t,e)=>t+e.html,"")}(e),[...R(e),{expressions:n.map(t=>Object.assign({type:C},t))}])}(this.getComponent(n),this.slots,this.attributes),this.tag.mount(this.node,t)),this},unmount(t,e,n){return this.tag&&this.tag.unmount(n),this}});var Y={1:function(t,e){let{evaluate:n,template:o}=e;return Object.assign({},j,{node:t,evaluate:n,parent:t.parentNode,placeholder:document.createTextNode(""),template:o.createDOM(t)})},[h]:function(t,e){let{expressions:n}=e;return Object.assign({},(o=n.map(e=>H(t,e)),["mount","update","unmount"].reduce((t,e)=>Object.assign({},t,{[e]:t=>o.map(n=>n[e](t))&&r}),{})));var o,r},0:function(t,e){let{evaluate:n,condition:o,itemName:r,indexName:i,getKey:s,template:a}=e;const u=document.createTextNode(""),l=t.parentNode,c=t.cloneNode();return l.insertBefore(u,t),l.removeChild(t),Object.assign({},A,{childrenMap:new Map,node:t,root:c,condition:o,evaluate:n,isTemplateTag:T(c),template:a.createDOM(t),getKey:s,indexName:i,itemName:r,placeholder:u})},3:function(t,e){let{evaluate:n,getComponent:o,slots:r,attributes:i}=e;return Object.assign({},$,{node:t,evaluate:n,slots:r,attributes:i,getComponent:o})},4:function(t,e){let{name:n}=e;return Object.assign({},F,{node:t,name:n})}};function K(t){const e=t.ownerSVGElement;return!!e||null===e}function Q(t,e){return K(t)?function(t,e){return e.ownerDocument.importNode((new window.DOMParser).parseFromString(`${t}`,"application/xml").documentElement,!0)}(e,t):function(t,e){const n=T(e)?e:document.createElement("template");return n.innerHTML=t,n.content}(e,t)}function z(t,e){switch(!0){case K(t):!function t(e,n){e.firstChild&&(n.appendChild(e.firstChild),t(e,n))}(e,t);break;case T(t):t.parentNode.replaceChild(e,t);break;default:t.appendChild(e)}}const V=Object.freeze({bindings:null,bindingsData:null,html:null,isTemplateTag:!1,fragment:null,children:null,dom:null,el:null,createDOM(t){return this.dom=this.dom||function(t,e){return e&&("string"==typeof e?Q(t,e):e)}(t,this.html),this},mount(t,e,n,o){if(void 0===o&&(o={}),!t)throw new Error("Please provide DOM node to mount properly your template");this.el&&this.unmount(e);const{fragment:r,children:i,avoidDOMInjection:s}=o,{parentNode:a}=i?i[0]:t;return this.isTemplateTag=T(t),this.createDOM(t),this.dom&&(this.fragment=r||this.dom.cloneNode(!0)),this.el=this.isTemplateTag?a:t,this.children=this.isTemplateTag?i||Array.from(this.fragment.childNodes):null,!s&&this.fragment&&z(t,this.fragment),this.bindings=this.bindingsData.map(t=>(function(t,e){const{selector:n,type:o,redundantAttribute:r,expressions:i}=e,s=n?t.querySelector(n):t;return r&&s.removeAttribute(r),(Y[o]||Y[h])(s,Object.assign({},e,{expressions:i||[]}))})(this.el,t)),this.bindings.forEach(t=>t.mount(e,n)),this},update(t,e){return this.bindings.forEach(n=>n.update(t,e)),this},unmount(t,e,n){if(this.el){switch(this.bindings.forEach(o=>o.unmount(t,e,n)),!0){case!0===this.isTemplateTag&&null!==n:d(this.children);break;case!0===n&&null!==this.el.parentNode:this.el.parentNode.removeChild(this.el);break;case null!==n:d(this.el.childNodes)}this.el=null}return this},clone(){return Object.assign({},this,{el:null})}});function G(t,e){return void 0===e&&(e=[]),Object.assign({},V,{html:t,bindingsData:e})}function J(t){return function(t,e){return typeof t===e}(t,"function")}function X(t){throw new Error(t)}function Z(t){return J(t)?t.prototype&&t.prototype.constructor?new t:t():t}function W(t){return t.replace(/-(\w)/g,(t,e)=>e.toUpperCase())}function tt(){return this}function et(t,e,n,o){return void 0===o&&(o={}),Object.defineProperty(t,e,Object.assign({value:n,enumerable:!1,writable:!1,configurable:!0},o)),t}function nt(t,e,n){return Object.entries(e).forEach(e=>{let[o,r]=e;et(t,o,r,n)}),t}function ot(t){return Array.isArray(t)?t:/^\[object (HTMLCollection|NodeList|Object)\]$/.test(Object.prototype.toString.call(t))&&"number"==typeof t.length?Array.from(t):[t]}const rt=t=>1===t.length?t[0]:t;function it(t,e,n){const o="object"==typeof e?e:{[e]:n},r=Object.keys(o);return ot(t).forEach(t=>{r.forEach(e=>t.setAttribute(e,o[e]))}),t}function st(t,e){return function(t,e,n){const o="string"==typeof e?[e]:e;return rt(ot(t).map(t=>rt(o.map(e=>t[n](e)))))}(t,e,"getAttribute")}function at(t){return st(t,s)||t.tagName.toLowerCase()}function ut(t,e){return ot("string"==typeof t?(e||document).querySelectorAll(t):t)}const lt=new Map,ct=(t=>()=>t||(it(t=ut("style[riot]")[0]||document.createElement("style"),"type","text/css"),t.parentNode||document.head.appendChild(t),t))();var dt={CSS_BY_NAME:lt,add(t,e){return lt.has(t)||(lt.set(t,e),this.inject()),this},inject(){return ct().innerHTML=[...lt.values()].join("\n"),this},remove(t){return lt.has(t)&&(lt.delete(t),this.inject()),this}};const ht=Object.freeze({$(t){return ut(t,this.root)[0]},$$(t){return ut(t,this.root)}}),mt=Object.freeze({shouldUpdate:tt,onBeforeMount:tt,onMounted:tt,onBeforeUpdate:tt,onUpdated:tt,onBeforeUnmount:tt,onUnmounted:tt}),ft={update:tt,mount:tt,unmount:tt,clone:tt,createDOM:tt};function pt(t){let{css:e,template:n,exports:r,name:i}=t;const s=n?function(t,e){return t(G,x,m,t=>e[t]||o.get(t))}(n,r?function(t){void 0===t&&(t={});return Object.entries(Z(t)).reduce((t,e)=>{let[n,o]=e;return t[function(t){return t.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase()}(n)]=pt(o),t},{})}(r.components):{}):ft;return t=>{let{slots:n,attributes:o,props:a}=t;const u=Z(r)||{},l=gt({css:e,template:s,componentAPI:u,name:i})({slots:n,attributes:o,props:a});return{mount:(t,e,n)=>l.mount(t,n,e),update:(t,e)=>l.update(e,t),unmount:t=>l.unmount(t)}}}function gt(t){let{css:e,template:n,componentAPI:o,name:r}=t;return e&&r&&dt.add(r,e),function t(e){for(var n=arguments.length,o=new Array(n>1?n-1:0),r=1;r{let[e,n]=t;i[e]||(i[e]=n)}),i),Object.assign({slots:null,root:null},ht,{name:r,css:e,template:n})));var i,s}function bt(t,e){return void 0===e&&(e=[]),Object.assign({},function(t){return Array.from(t.attributes).reduce((t,e)=>(t[W(e.name)]=e.value,t),{})}(t),{},e.reduce((t,e)=>{const{value:n,type:o}=e;switch(!0){case!e.name&&o===x.ATTRIBUTE:return Object.assign({},t,{},n);case o===x.VALUE:t[a]=e.value;break;default:t[W(e.name)]=e.value}return t},{}))}function vt(t,e){return Object.assign({},t,{},Z(e))}function yt(t,e){let{slots:n,attributes:o,props:s}=e;const a=Z(s);return c=function(t){return[...i].reduce((t,e)=>e(t)||t,t)}(nt(Object.create(t),{mount(e,i,s){return void 0===i&&(i={}),this[u]=function(t,e){void 0===e&&(e=[]);const n=e.map(e=>H(t,e)),o={},r=t=>e=>(n.forEach(n=>n[t](e)),o);return Object.assign(o,{expressions:n,mount:r("mount"),update:r("update"),unmount:r("unmount")})}(e,o).mount(s),this.props=Object.freeze(Object.assign({},a,{},bt(e,this[u].expressions))),this.state=vt(this.state,i),this[l]=this.template.createDOM(e).clone(),e[r]=this,t.name&&function(t,e){at(t)!==e&&it(t,"is",e)}(e,t.name),et(this,"root",e),et(this,"slots",n),this.onBeforeMount(this.props,this.state),this[l].mount(e,this,s),this.onMounted(this.props,this.state),this},update(t,e){void 0===t&&(t={}),e&&this[u].update(e);const n=bt(this.root,this[u].expressions);if(!1!==this.shouldUpdate(n,this.props))return this.props=Object.freeze(Object.assign({},a,{},n)),this.state=vt(this.state,t),this.onBeforeUpdate(this.props,this.state),this[l].update(this,e),this.onUpdated(this.props,this.state),this},unmount(t){return this.onBeforeUnmount(this.props,this.state),this[u].unmount(),this[l].unmount(this,{},null===t?null:!t),this.onUnmounted(this.props,this.state),this}})),Object.keys(t).filter(e=>J(t[e])).forEach(t=>{c[t]=c[t].bind(c)}),c;var c}const{DOM_COMPONENT_INSTANCE_PROPERTY:wt,COMPONENTS_IMPLEMENTATION_MAP:Ot,PLUGINS_SET:Et}=c;var Mt,Tt,At=n(0),Nt=n.n(At);!function(t,e){let{css:n,template:o,exports:r}=e;Ot.has(t)&&X(`The component "${t}" was already registered`),Ot.set(t,pt({name:t,css:n,template:o,exports:r}))}("tiny-one-page",{css:null,exports:{state:{},onBeforeMount(){this.content=this.root.innerHTML,this.root.innerHTML=""},onMounted(){this.$(".tiny-one-page__inner").innerHTML=this.content,this.scroll=new Nt.a('.tiny-one-page__inner a[href*="#"]',{offset:function(){return 100}}),window.addEventListener("scroll",this.handleScroll.bind(this),!1),window.location.hash&&this.$(".tiny-one-page__inner a[href$='"+window.location.hash+"']").parentElement.classList.add("current")},isVisible(t){return t.offsetHeight+t.offsetTop-this.options.offset>window.pageYOffset},handleScroll(t){const e=this.$$(".tiny-one-page__inner a");let n=!1;e.forEach(function(t,e){const o=e.hash;this.isVisible(element,o)&&!1===n?(e.add("current"),n=!0):e.classList.remove("current")}.bind(this))}},template:function(t,e,n,o){return t('
',[])},name:"tiny-one-page"}),ut("tiny-one-page").map(t=>(function(t,e,n){const r=n||at(t);return o.has(r)||X(`The component named "${r}" was never registered`),o.get(r)({props:e}).mount(t)})(t,Mt,Tt))},function(t,e){}]); \ No newline at end of file diff --git a/mix-manifest.json b/mix-manifest.json new file mode 100644 index 0000000..9aacdf3 --- /dev/null +++ b/mix-manifest.json @@ -0,0 +1,4 @@ +{ + "/dist/js/demo.js": "/dist/js/demo.js", + "/dist/css/demo.css": "/dist/css/demo.css" +} diff --git a/src/TinyOnePage.riot b/src/TinyOnePage.riot index fc30b50..f7877b5 100644 --- a/src/TinyOnePage.riot +++ b/src/TinyOnePage.riot @@ -1,8 +1,6 @@
-
-
-
+
diff --git a/src/demo.scss b/src/demo.scss new file mode 100644 index 0000000..10688f9 --- /dev/null +++ b/src/demo.scss @@ -0,0 +1,31 @@ +.navbar { + position: fixed; + width: 100%; + text-align: center; + background-color: white; + + li { + display: inline-block; + margin: 0 0.3em; + + a { + display: block; + transition: all .1s ease-in-out; + + &:hover { + transform: scale(1.3); + } + } + + &.current { + a { + transform: scale(1.3); + } + } + } +} + +.section { + padding: 6em; + line-height: 1.8; +} diff --git a/webpack.mix.js b/webpack.mix.js new file mode 100644 index 0000000..319d6af --- /dev/null +++ b/webpack.mix.js @@ -0,0 +1,30 @@ +const mix = require('laravel-mix'); + +/* + |-------------------------------------------------------------------------- + | Mix Asset Management + |-------------------------------------------------------------------------- + | + | Mix provides a clean, fluent API for defining some Webpack build steps + | for your Laravel application. By default, we are compiling the Sass + | file for the application as well as bundling up all the JS files. + | + */ + +mix.webpackConfig({ + module: { + rules: [{ + test: /\.riot$/, + exclude: /node_modules/, + use: [{ + loader: '@riotjs/webpack-loader', + query: { + hot: false + } + }] + } + ]} +}); + +mix.js('demo.js', 'dist/js') +mix.sass('src/demo.scss', 'dist/css');