@essetwide/material-walkthrough
Version:
A material tour (eg Inbox from Google) for your site, enhancing the UX.
23 lines (20 loc) • 4.38 kB
JavaScript
/**
* Copyright 2017 Esset Software LTD.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/**
* @license Apache License 2.0.
* @copyright Esset Software LTD.
*/
!function(t){function n(n,e){l(n=t(n),e.onClose),x.css("display","none"),u(n,function(){o(e.content,e.color,e.acceptText),g.css("display","block"),a(n,function(){g.addClass("opened"),c(n,function(){x.css("display","")})})}),e.onSet&&e.onSet(_)}function e(){r(),p(),g.css({marginTop:"-500px",marginLeft:"-500px"}),g.addClass("closed"),setTimeout(function(){g.css("display","none"),g.removeClass("opened")},k)}function o(t,n,e){n=n||f,_.html(t),g.css("border-color",n),b.text(e)}function i(t){var n=function(){u(t,function(){a(t,function(){c(t)})})};return n.toString=function(){return"updateHandler -> #"+t[0].id},n}function l(o,l){y&&r(),y=i(o),t(window).on("resize",y),t.walk._mutationObserver=new MutationObserver(y),t.walk._mutationObserver.observe(document.body,{childList:!0,subtree:!0}),b.on("click",function o(){l&&l(),t.walk._points&&t.walk._points[t.walk._currentIndex+1]?(t.walk._currentIndex++,n(t.walk._points[t.walk._currentIndex].target,t.walk._points[t.walk._currentIndex])):(t.walk._currentIndex=0,t.walk._points=null,t.walk._callback&&t.walk._callback(),t.walk._callback=null,e()),b.off("click",o)})}function r(){t.walk._mutationObserver&&t.walk._mutationObserver.disconnect(),t.walk._mutationObserver=null,t(window).off("resize",y)}function u(n,e){var o=n.offset(),i=window.getComputedStyle(n[0]).position,l=t(window).height(),r=t(document.body).height(),u=("absolute"==i||"relative"==i)&&parseInt(window.getComputedStyle(n[0]).top)>r,a=o.top-l/2;a>0&&"fixed"!=i?(a+l>r&&!u&&(a=r-l),t("body,html").animate({scrollTop:a},k,function(){e()})):t("body,html").animate({scrollTop:0},k,function(){e()})}function a(t,n){var e=t.offset(),o=t.outerHeight(),i=t.outerWidth(),l=o>i?o:i;l<h&&(l=h),g.css({height:l+m+"px",width:l+m+"px","margin-left":-(l+m)/2+"px","margin-top":-(l+m)/2+"px",left:e.left+i/2+"px",top:e.top+o/2+"px"}),setTimeout(function(){n()},250)}function c(n,e){var o=n.offset(),i=o.left+(g.outerWidth()-m)+x.outerWidth()<t(window).outerWidth(),l=o.left-m-x.outerWidth()>0,r=g[0].getBoundingClientRect().top-x.outerHeight()>0,u=g[0].getBoundingClientRect().top+g.outerHeight()+x.outerHeight()<t(window).outerHeight(),a="100%",c="100%",w=0,d=0,s="left";i||(a=l?"-"+x.outerWidth()+"px":u?"0%":"25%",s=l?"right":"center",w=l?0:u?"20px":"-20px"),u||(c=r?"-"+x.outerHeight()+"px":g.outerHeight()/2-x.outerHeight()/2+"px",d=r?0:i?"20px":"-20px"),x.css({left:a,top:c,"text-align":s,"margin-top":w,"margin-left":d}),e&&e()}function w(t){(t=t||window.event).preventDefault&&t.preventDefault(),t.returnValue=!1}function d(t){if(C[t.keyCode])return w(t),!1}function s(){t("html").css({height:"100vh",overflow:"hidden"}),window.addEventListener&&window.addEventListener("DOMMouseScroll",w,!1),window.onwheel=w,window.onmousewheel=document.onmousewheel=w,window.ontouchmove=w,document.onkeydown=d}function p(){t("html").css({height:"",overflow:"auto"}),window.removeEventListener&&window.removeEventListener("DOMMouseScroll",w,!1),window.onmousewheel=document.onmousewheel=null,window.onwheel=null,window.ontouchmove=null,document.onkeydown=null}var f="#2196F3",k=500,h=60,m=20,v="<div id='walk-wrapper'><div id='walk-content-wrapper'><div id='walk-content'></div><button id='walk-action'></button></div></div>",g={},x={},_={},b={},y=null;t.fn.walk=function(t){var e=this;s(),g.removeClass("closed"),n(e,t)},t.walk=function(n,e){t.walk._points=n,t.walk._currentIndex=0,t.walk._callback=e,t(n[0].target).walk(n[0])},t.walk._points=null,t.walk._currentIndex=0,t.walk._mutationObserver=null,function(){t("body").append(v),g=t("#walk-wrapper"),x=t("#walk-content-wrapper"),_=t("#walk-content"),b=t("#walk-action")}();var C={37:1,38:1,39:1,40:1,32:1,33:1,34:1}}(window.$);