mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2024-11-22 23:37:53 +00:00
mermaid: remove jQuery #452
This commit is contained in:
Sören Weber
parent
03c2bf52a9
commit
5f7df12b88
16 changed files with 56 additions and 649 deletions
|
|
@ -20,6 +20,14 @@ This document shows you what's new in the latest release. For a detailed list of
|
|||
|
||||
## 5.11.0 (not yet released)
|
||||
|
||||
- {{% badge style="note" title=" " %}}Change{{% /badge %}} The theme removed the popular [jQuery](https://jquery.com) library from its distribution.
|
||||
|
||||
In case you made changes to the theme that are dependend on this library you can place a copy of jQuery into your `static/js` directory and load it from your own `layouts/partials/custom-header.html` like this:
|
||||
|
||||
````html
|
||||
<script src="{{"js/jquery.min.js"| relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" defer></script>
|
||||
````
|
||||
|
||||
- {{% badge style="note" title=" " %}}Change{{% /badge %}} In the effort to comply with WCAG standards, the implementation of the [`expand` shortcode]({{% relref "shortcodes/expand" %}}) was changed. The functionality of the new implementation does not work with old browsers (Internet Explorer 11).
|
||||
|
||||
- {{% badge style="note" title=" " %}}Change{{% /badge %}} The JavaScript code for handling image lightboxes (provided by [Featherlight](https://noelboss.github.io/featherlight)) was replaced by a CSS-only solution.
|
||||
|
|
|
|||
|
|
@ -15,9 +15,16 @@ Many thanks to [Andy Miller](https://github.com/rhukster) for initially creating
|
|||
|
||||
- [autoComplete](https://github.com/Pixabay/JavaScript-autoComplete) - A lightweight and powerful vanilla JavaScript completion suggester
|
||||
- [clipboard.js](https://clipboardjs.com) - A modern approach to copy text to clipboard
|
||||
- [d3-zoom](https://github.com/d3/d3-zoom) - Pan and zoom SVG, HTML or Canvas using mouse or touch input - plus dependencies
|
||||
- [d3-color](https://github.com/d3/d3-color) - Color spaces! RGB, HSL, Cubehelix, CIELAB, and more
|
||||
- [d3-dispatch](https://github.com/d3/d3-dispatch) - Register named callbacks and call them with arguments
|
||||
- [d3-ease](https://github.com/d3/d3-ease) - Easing functions for smooth animation
|
||||
- [d3-interpolate](https://github.com/d3/d3-interpolate) - Interpolate numbers, colors, strings, arrays, objects, whatever
|
||||
- [d3-selection](https://github.com/d3/d3-selection) - Transform the DOM by selecting elements and joining to data
|
||||
- [d3-timer](https://github.com/d3/d3-timer) - An efficient queue for managing thousands of concurrent animations
|
||||
- [d3-transition](https://github.com/d3/d3-transition) - Animated transitions for D3 selections
|
||||
- [d3-drag](https://github.com/d3/d3-drag) - Drag and drop SVG, HTML or Canvas using mouse or touch input
|
||||
- [Font Awesome](https://fontawesome.com) - The internet's icon library and toolkit
|
||||
- [jQuery](https://jquery.com) - The "Write less, do more" JavaScript library
|
||||
- [jquery-svg-zoom-pan](https://github.com/DanielHoffmann/jquery-svg-pan-zoom) - A jQuery plugin to enable pan and zoom in SVG images
|
||||
- [Lunr](https://lunrjs.com) - Enables a great search experience without the need for external, server-side, search services
|
||||
- [Lunr Languages](https://github.com/MihaiValentin/lunr-languages) - A collection of languages stemmers and stopwords for Lunr Javascript library
|
||||
- [MathJax](https://mathjax.org/) - Beautiful math and chemical formulae in all browsers
|
||||
|
|
|
|||
|
|
@ -53,7 +53,15 @@
|
|||
{{- end }}
|
||||
{{- $wantsMermaid := or (.Page.Store.Get "hasMermaid") (and (.Page.Store.Get (printf "%sIsNested" $outputFormat)) (.Page.Store.Get "nestedHasMermaid")) }}
|
||||
{{- if $wantsMermaid }}
|
||||
<script src="{{"js/jquery.svg.pan.zoom.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}" defer></script>
|
||||
<script src="{{"js/d3/d3-color.min.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}" defer></script>
|
||||
<script src="{{"js/d3/d3-dispatch.min.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}" defer></script>
|
||||
<script src="{{"js/d3/d3-drag.min.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}" defer></script>
|
||||
<script src="{{"js/d3/d3-ease.min.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}" defer></script>
|
||||
<script src="{{"js/d3/d3-interpolate.min.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}" defer></script>
|
||||
<script src="{{"js/d3/d3-selection.min.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}" defer></script>
|
||||
<script src="{{"js/d3/d3-timer.min.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}" defer></script>
|
||||
<script src="{{"js/d3/d3-transition.min.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}" defer></script>
|
||||
<script src="{{"js/d3/d3-zoom.min.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}" defer></script>
|
||||
{{- if isset .Params "custommermaidurl" }}
|
||||
<script src="{{ .Params.customMermaidURL }}" defer></script>
|
||||
{{- else if isset .Site.Params "custommermaidurl" }}
|
||||
|
|
|
|||
|
|
@ -52,5 +52,4 @@
|
|||
{{- end }}
|
||||
window.variants && variants.init( [ {{ delimit $quotedthemevariants ", " | safeJS }} ] );
|
||||
</script>
|
||||
<script src="{{"js/jquery.min.js"| relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" defer></script>
|
||||
{{- end }}
|
||||
2
static/js/d3/d3-color.min.js
vendored
Normal file
2
static/js/d3/d3-color.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
2
static/js/d3/d3-dispatch.min.js
vendored
Normal file
2
static/js/d3/d3-dispatch.min.js
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
// https://d3js.org/d3-dispatch/ v3.0.1 Copyright 2010-2021 Mike Bostock
|
||||
!function(n,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((n="undefined"!=typeof globalThis?globalThis:n||self).d3=n.d3||{})}(this,(function(n){"use strict";var e={value:()=>{}};function t(){for(var n,e=0,t=arguments.length,o={};e<t;++e){if(!(n=arguments[e]+"")||n in o||/[\s.]/.test(n))throw new Error("illegal type: "+n);o[n]=[]}return new r(o)}function r(n){this._=n}function o(n,e){return n.trim().split(/^|\s+/).map((function(n){var t="",r=n.indexOf(".");if(r>=0&&(t=n.slice(r+1),n=n.slice(0,r)),n&&!e.hasOwnProperty(n))throw new Error("unknown type: "+n);return{type:n,name:t}}))}function i(n,e){for(var t,r=0,o=n.length;r<o;++r)if((t=n[r]).name===e)return t.value}function f(n,t,r){for(var o=0,i=n.length;o<i;++o)if(n[o].name===t){n[o]=e,n=n.slice(0,o).concat(n.slice(o+1));break}return null!=r&&n.push({name:t,value:r}),n}r.prototype=t.prototype={constructor:r,on:function(n,e){var t,r=this._,l=o(n+"",r),a=-1,u=l.length;if(!(arguments.length<2)){if(null!=e&&"function"!=typeof e)throw new Error("invalid callback: "+e);for(;++a<u;)if(t=(n=l[a]).type)r[t]=f(r[t],n.name,e);else if(null==e)for(t in r)r[t]=f(r[t],n.name,null);return this}for(;++a<u;)if((t=(n=l[a]).type)&&(t=i(r[t],n.name)))return t},copy:function(){var n={},e=this._;for(var t in e)n[t]=e[t].slice();return new r(n)},call:function(n,e){if((t=arguments.length-2)>0)for(var t,r,o=new Array(t),i=0;i<t;++i)o[i]=arguments[i+2];if(!this._.hasOwnProperty(n))throw new Error("unknown type: "+n);for(i=0,t=(r=this._[n]).length;i<t;++i)r[i].value.apply(e,o)},apply:function(n,e,t){if(!this._.hasOwnProperty(n))throw new Error("unknown type: "+n);for(var r=this._[n],o=0,i=r.length;o<i;++o)r[o].value.apply(e,t)}},n.dispatch=t,Object.defineProperty(n,"__esModule",{value:!0})}));
|
||||
2
static/js/d3/d3-drag.min.js
vendored
Normal file
2
static/js/d3/d3-drag.min.js
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
// https://d3js.org/d3-drag/ v3.0.0 Copyright 2010-2021 Mike Bostock
|
||||
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("d3-dispatch"),require("d3-selection")):"function"==typeof define&&define.amd?define(["exports","d3-dispatch","d3-selection"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).d3=e.d3||{},e.d3,e.d3)}(this,(function(e,t,n){"use strict";const o={passive:!1},r={capture:!0,passive:!1};function i(e){e.stopImmediatePropagation()}function a(e){e.preventDefault(),e.stopImmediatePropagation()}function u(e){var t=e.document.documentElement,o=n.select(e).on("dragstart.drag",a,r);"onselectstart"in t?o.on("selectstart.drag",a,r):(t.__noselect=t.style.MozUserSelect,t.style.MozUserSelect="none")}function c(e,t){var o=e.document.documentElement,i=n.select(e).on("dragstart.drag",null);t&&(i.on("click.drag",a,r),setTimeout((function(){i.on("click.drag",null)}),0)),"onselectstart"in o?i.on("selectstart.drag",null):(o.style.MozUserSelect=o.__noselect,delete o.__noselect)}var l=e=>()=>e;function s(e,{sourceEvent:t,subject:n,target:o,identifier:r,active:i,x:a,y:u,dx:c,dy:l,dispatch:s}){Object.defineProperties(this,{type:{value:e,enumerable:!0,configurable:!0},sourceEvent:{value:t,enumerable:!0,configurable:!0},subject:{value:n,enumerable:!0,configurable:!0},target:{value:o,enumerable:!0,configurable:!0},identifier:{value:r,enumerable:!0,configurable:!0},active:{value:i,enumerable:!0,configurable:!0},x:{value:a,enumerable:!0,configurable:!0},y:{value:u,enumerable:!0,configurable:!0},dx:{value:c,enumerable:!0,configurable:!0},dy:{value:l,enumerable:!0,configurable:!0},_:{value:s}})}function d(e){return!e.ctrlKey&&!e.button}function f(){return this.parentNode}function g(e,t){return null==t?{x:e.x,y:e.y}:t}function h(){return navigator.maxTouchPoints||"ontouchstart"in this}s.prototype.on=function(){var e=this._.on.apply(this._,arguments);return e===this._?this:e},e.drag=function(){var e,v,p,b,m=d,y=f,x=g,_=h,w={},T=t.dispatch("start","drag","end"),j=0,E=0;function k(e){e.on("mousedown.drag",M).filter(_).on("touchstart.drag",z).on("touchmove.drag",D,o).on("touchend.drag touchcancel.drag",S).style("touch-action","none").style("-webkit-tap-highlight-color","rgba(0,0,0,0)")}function M(t,o){if(!b&&m.call(this,t,o)){var a=U(this,y.call(this,t,o),t,o,"mouse");a&&(n.select(t.view).on("mousemove.drag",P,r).on("mouseup.drag",q,r),u(t.view),i(t),p=!1,e=t.clientX,v=t.clientY,a("start",t))}}function P(t){if(a(t),!p){var n=t.clientX-e,o=t.clientY-v;p=n*n+o*o>E}w.mouse("drag",t)}function q(e){n.select(e.view).on("mousemove.drag mouseup.drag",null),c(e.view,p),a(e),w.mouse("end",e)}function z(e,t){if(m.call(this,e,t)){var n,o,r=e.changedTouches,a=y.call(this,e,t),u=r.length;for(n=0;n<u;++n)(o=U(this,a,e,t,r[n].identifier,r[n]))&&(i(e),o("start",e,r[n]))}}function D(e){var t,n,o=e.changedTouches,r=o.length;for(t=0;t<r;++t)(n=w[o[t].identifier])&&(a(e),n("drag",e,o[t]))}function S(e){var t,n,o=e.changedTouches,r=o.length;for(b&&clearTimeout(b),b=setTimeout((function(){b=null}),500),t=0;t<r;++t)(n=w[o[t].identifier])&&(i(e),n("end",e,o[t]))}function U(e,t,o,r,i,a){var u,c,l,d=T.copy(),f=n.pointer(a||o,t);if(null!=(l=x.call(e,new s("beforestart",{sourceEvent:o,target:k,identifier:i,active:j,x:f[0],y:f[1],dx:0,dy:0,dispatch:d}),r)))return u=l.x-f[0]||0,c=l.y-f[1]||0,function o(a,g,h){var v,p=f;switch(a){case"start":w[i]=o,v=j++;break;case"end":delete w[i],--j;case"drag":f=n.pointer(h||g,t),v=j}d.call(a,e,new s(a,{sourceEvent:g,subject:l,target:k,identifier:i,active:v,x:f[0]+u,y:f[1]+c,dx:f[0]-p[0],dy:f[1]-p[1],dispatch:d}),r)}}return k.filter=function(e){return arguments.length?(m="function"==typeof e?e:l(!!e),k):m},k.container=function(e){return arguments.length?(y="function"==typeof e?e:l(e),k):y},k.subject=function(e){return arguments.length?(x="function"==typeof e?e:l(e),k):x},k.touchable=function(e){return arguments.length?(_="function"==typeof e?e:l(!!e),k):_},k.on=function(){var e=T.on.apply(T,arguments);return e===T?k:e},k.clickDistance=function(e){return arguments.length?(E=(e=+e)*e,k):Math.sqrt(E)},k},e.dragDisable=u,e.dragEnable=c,Object.defineProperty(e,"__esModule",{value:!0})}));
|
||||
2
static/js/d3/d3-ease.min.js
vendored
Normal file
2
static/js/d3/d3-ease.min.js
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
// https://d3js.org/d3-ease/ v3.0.1 Copyright 2010-2021 Mike Bostock, 2001 Robert Penner
|
||||
!function(n,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((n="undefined"!=typeof globalThis?globalThis:n||self).d3=n.d3||{})}(this,(function(n){"use strict";function e(n){return((n*=2)<=1?n*n:--n*(2-n)+1)/2}function t(n){return((n*=2)<=1?n*n*n:(n-=2)*n*n+2)/2}var u=function n(e){function t(n){return Math.pow(n,e)}return e=+e,t.exponent=n,t}(3),r=function n(e){function t(n){return 1-Math.pow(1-n,e)}return e=+e,t.exponent=n,t}(3),a=function n(e){function t(n){return((n*=2)<=1?Math.pow(n,e):2-Math.pow(2-n,e))/2}return e=+e,t.exponent=n,t}(3),o=Math.PI,i=o/2;function c(n){return(1-Math.cos(o*n))/2}function s(n){return 1.0009775171065494*(Math.pow(2,-10*n)-.0009765625)}function f(n){return((n*=2)<=1?s(1-n):2-s(n-1))/2}function h(n){return((n*=2)<=1?1-Math.sqrt(1-n*n):Math.sqrt(1-(n-=2)*n)+1)/2}var p=4/11,M=7.5625;function d(n){return(n=+n)<p?M*n*n:n<.7272727272727273?M*(n-=.5454545454545454)*n+.75:n<.9090909090909091?M*(n-=.8181818181818182)*n+.9375:M*(n-=.9545454545454546)*n+.984375}var l=1.70158,I=function n(e){function t(n){return(n=+n)*n*(e*(n-1)+n)}return e=+e,t.overshoot=n,t}(l),O=function n(e){function t(n){return--n*n*((n+1)*e+n)+1}return e=+e,t.overshoot=n,t}(l),x=function n(e){function t(n){return((n*=2)<1?n*n*((e+1)*n-e):(n-=2)*n*((e+1)*n+e)+2)/2}return e=+e,t.overshoot=n,t}(l),v=2*Math.PI,y=function n(e,t){var u=Math.asin(1/(e=Math.max(1,e)))*(t/=v);function r(n){return e*s(- --n)*Math.sin((u-n)/t)}return r.amplitude=function(e){return n(e,t*v)},r.period=function(t){return n(e,t)},r}(1,.3),b=function n(e,t){var u=Math.asin(1/(e=Math.max(1,e)))*(t/=v);function r(n){return 1-e*s(n=+n)*Math.sin((n+u)/t)}return r.amplitude=function(e){return n(e,t*v)},r.period=function(t){return n(e,t)},r}(1,.3),m=function n(e,t){var u=Math.asin(1/(e=Math.max(1,e)))*(t/=v);function r(n){return((n=2*n-1)<0?e*s(-n)*Math.sin((u-n)/t):2-e*s(n)*Math.sin((u+n)/t))/2}return r.amplitude=function(e){return n(e,t*v)},r.period=function(t){return n(e,t)},r}(1,.3);n.easeBack=x,n.easeBackIn=I,n.easeBackInOut=x,n.easeBackOut=O,n.easeBounce=d,n.easeBounceIn=function(n){return 1-d(1-n)},n.easeBounceInOut=function(n){return((n*=2)<=1?1-d(1-n):d(n-1)+1)/2},n.easeBounceOut=d,n.easeCircle=h,n.easeCircleIn=function(n){return 1-Math.sqrt(1-n*n)},n.easeCircleInOut=h,n.easeCircleOut=function(n){return Math.sqrt(1- --n*n)},n.easeCubic=t,n.easeCubicIn=function(n){return n*n*n},n.easeCubicInOut=t,n.easeCubicOut=function(n){return--n*n*n+1},n.easeElastic=b,n.easeElasticIn=y,n.easeElasticInOut=m,n.easeElasticOut=b,n.easeExp=f,n.easeExpIn=function(n){return s(1-+n)},n.easeExpInOut=f,n.easeExpOut=function(n){return 1-s(n)},n.easeLinear=n=>+n,n.easePoly=a,n.easePolyIn=u,n.easePolyInOut=a,n.easePolyOut=r,n.easeQuad=e,n.easeQuadIn=function(n){return n*n},n.easeQuadInOut=e,n.easeQuadOut=function(n){return n*(2-n)},n.easeSin=c,n.easeSinIn=function(n){return 1==+n?1:1-Math.cos(n*i)},n.easeSinInOut=c,n.easeSinOut=function(n){return Math.sin(n*i)},Object.defineProperty(n,"__esModule",{value:!0})}));
|
||||
2
static/js/d3/d3-interpolate.min.js
vendored
Normal file
2
static/js/d3/d3-interpolate.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
2
static/js/d3/d3-selection.min.js
vendored
Normal file
2
static/js/d3/d3-selection.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
2
static/js/d3/d3-timer.min.js
vendored
Normal file
2
static/js/d3/d3-timer.min.js
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
// https://d3js.org/d3-timer/ v3.0.1 Copyright 2010-2021 Mike Bostock
|
||||
!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n((t="undefined"!=typeof globalThis?globalThis:t||self).d3=t.d3||{})}(this,(function(t){"use strict";var n,e,o=0,i=0,r=0,l=0,u=0,a=0,s="object"==typeof performance&&performance.now?performance:Date,c="object"==typeof window&&window.requestAnimationFrame?window.requestAnimationFrame.bind(window):function(t){setTimeout(t,17)};function f(){return u||(c(_),u=s.now()+a)}function _(){u=0}function m(){this._call=this._time=this._next=null}function p(t,n,e){var o=new m;return o.restart(t,n,e),o}function w(){f(),++o;for(var t,e=n;e;)(t=u-e._time)>=0&&e._call.call(void 0,t),e=e._next;--o}function d(){u=(l=s.now())+a,o=i=0;try{w()}finally{o=0,function(){var t,o,i=n,r=1/0;for(;i;)i._call?(r>i._time&&(r=i._time),t=i,i=i._next):(o=i._next,i._next=null,i=t?t._next=o:n=o);e=t,y(r)}(),u=0}}function h(){var t=s.now(),n=t-l;n>1e3&&(a-=n,l=t)}function y(t){o||(i&&(i=clearTimeout(i)),t-u>24?(t<1/0&&(i=setTimeout(d,t-s.now()-a)),r&&(r=clearInterval(r))):(r||(l=s.now(),r=setInterval(h,1e3)),o=1,c(d)))}m.prototype=p.prototype={constructor:m,restart:function(t,o,i){if("function"!=typeof t)throw new TypeError("callback is not a function");i=(null==i?f():+i)+(null==o?0:+o),this._next||e===this||(e?e._next=this:n=this,e=this),this._call=t,this._time=i,y()},stop:function(){this._call&&(this._call=null,this._time=1/0,y())}},t.interval=function(t,n,e){var o=new m,i=n;return null==n?(o.restart(t,n,e),o):(o._restart=o.restart,o.restart=function(t,n,e){n=+n,e=null==e?f():+e,o._restart((function r(l){l+=i,o._restart(r,i+=n,e),t(l)}),n,e)},o.restart(t,n,e),o)},t.now=f,t.timeout=function(t,n,e){var o=new m;return n=null==n?0:+n,o.restart((e=>{o.stop(),t(e+n)}),n,e),o},t.timer=p,t.timerFlush=w,Object.defineProperty(t,"__esModule",{value:!0})}));
|
||||
2
static/js/d3/d3-transition.min.js
vendored
Normal file
2
static/js/d3/d3-transition.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
2
static/js/d3/d3-zoom.min.js
vendored
Normal file
2
static/js/d3/d3-zoom.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
2
static/js/jquery.min.js
vendored
2
static/js/jquery.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,642 +0,0 @@
|
|||
// Generated by CoffeeScript 1.10.0
|
||||
|
||||
/*
|
||||
Base: jQuery SVG Pan Zoom v1.0.3, October 2015 (labeled v1.0.2, June 2015)
|
||||
McShelby.hugo-theme-relearn:
|
||||
Change 1: OnMouseUp restore image cursor (not document cursor)
|
||||
Change 2: add PR #18
|
||||
Change 3: remove default limits enlargement of 15% as image can not be restored to initial size by zooming out only
|
||||
|
||||
|
||||
Author: Daniel Hoffmann Bernardes (daniel.hoffmann.bernardes@gmail.com)
|
||||
|
||||
Repository: https://github.com/DanielHoffmann/jquery-svg-pan-zoom/
|
||||
|
||||
jQuery plugin to enable pan and zoom in SVG images either programmatically or through mouse/touch events.
|
||||
|
||||
[Demo page](http://danielhoffmann.github.io/jquery-svg-pan-zoom/)
|
||||
|
||||
* Features
|
||||
- Programmatically manipulate the SVG viewBox
|
||||
- Mouse and touch events to pan the SVG viewBox
|
||||
- Mousewheel events to zoom in or out the SVG viewBox
|
||||
- Animations
|
||||
- Mousewheel zooming keeps the cursor over the same coordinates relative to the image (A.K.A. GoogleMaps-like zoom)
|
||||
- Limiting the navigable area
|
||||
|
||||
* Requirements
|
||||
|
||||
jQuery
|
||||
|
||||
SVG-enabled browser (does not work with SVG work-arounds that use Flash)
|
||||
|
||||
* The viewBox
|
||||
The viewBox is an attribute of SVG images that defines the area of the SVG that is visible, it is defined by 4 numbers: X, Y, Width, Height. These numbers together specify the visible area. This plugin works by manipulating these four numbers. For example, moving the image to the right alters the X value while zooming in reduces Width and Height.
|
||||
|
||||
|
||||
* Usage
|
||||
```javascript
|
||||
var svgPanZoom= $("svg").svgPanZoom(options)
|
||||
```
|
||||
|
||||
If the selection has more than one element `svgPanZoom` will return an array with a SvgPanZoom object for each image in the same order of the selection. If only one element is selected then the return is a single SvgPanZoom object. If no elements are selected the above call returns `null`
|
||||
|
||||
The returned SvgPanZoom object contains all options, these options can be overriden at any time directly, for example to disable mouseWheel events simply:
|
||||
|
||||
```javascript
|
||||
svgPanZoom.events.mouseWheel= false
|
||||
```
|
||||
|
||||
|
||||
the SvgPanZoom object also has methods for manipulating the viewBox programmatically. For example:
|
||||
|
||||
```javascript
|
||||
svgPanZoom.zoomIn()
|
||||
```
|
||||
|
||||
will zoomIn the image using options.zoomFactor.
|
||||
|
||||
* Building
|
||||
This project requires coffeescript to be installed in order to build.
|
||||
|
||||
`coffee -m --compile --output compiled/ src/`
|
||||
|
||||
* Options
|
||||
|
||||
```javascript
|
||||
Options:
|
||||
{
|
||||
events: {
|
||||
mouseWheel: boolean (true), // enables mouse wheel zooming events
|
||||
doubleClick: boolean (true), // enables double-click to zoom-in events
|
||||
drag: boolean (true), // enables drag and drop to move the SVG events
|
||||
dragCursor: string "move" // cursor to use while dragging the SVG
|
||||
},
|
||||
animationTime: number (300), // time in milliseconds to use as default for animations. Set 0 to remove the animation
|
||||
zoomFactor: number (0.25), // how much to zoom-in or zoom-out
|
||||
maxZoom: number (3), //maximum zoom in, must be a number bigger than 1
|
||||
panFactor: (number (100), // how much to move the viewBox when calling .panDirection() methods
|
||||
initialViewBox: { // the initial viewBox, if null or undefined will try to use the viewBox set in the svg tag. Also accepts string in the format "X Y Width Height"
|
||||
x: number (0) // the top-left corner X coordinate
|
||||
y: number (0) // the top-left corner Y coordinate
|
||||
width: number (1000) // the width of the viewBox
|
||||
height: number (1000) // the height of the viewBox
|
||||
},
|
||||
limits: { // the limits in which the image can be moved. If null or undefined will use the initialViewBox plus 15% in each direction
|
||||
x: number (-150)
|
||||
y: number (-150)
|
||||
x2: number (1150)
|
||||
y2: number (1150)
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
* Methods
|
||||
|
||||
- pan
|
||||
|
||||
```javascript
|
||||
svgPanZoom.panLeft(amount, animationTime)
|
||||
svgPanZoom.panRight(amount, animationTime)
|
||||
svgPanZoom.panUp(amount, animationTime)
|
||||
svgPanZoom.panDown(amount, animationTime)
|
||||
```
|
||||
|
||||
Moves the SVG viewBox in the specified direction. Parameters:
|
||||
- amount: Number, optional. How much to move the viewBox, defaults to options.panFactor.
|
||||
- animationTime: Number, optional. How long the animation should last, defaults to options.animationTime.
|
||||
|
||||
|
||||
- zoom
|
||||
|
||||
```javascript
|
||||
svgPanZoom.zoomIn(animationTime)
|
||||
svgPanZoom.zoomOut(animationTime)
|
||||
```
|
||||
|
||||
Zooms the viewBox. Parameters:
|
||||
- animationTime: Number, optional. How long the animation should last, defaults to options.animationTime.
|
||||
|
||||
|
||||
- reset
|
||||
|
||||
```javascript
|
||||
svgPanZoom.reset()
|
||||
```
|
||||
|
||||
Resets the SVG to options.initialViewBox values.
|
||||
|
||||
- getViewBox
|
||||
|
||||
```javascript
|
||||
svgPanZoom.getViewBox()
|
||||
```
|
||||
|
||||
Returns the viewbox in this format:
|
||||
|
||||
```javascript
|
||||
{
|
||||
x: number
|
||||
y: number
|
||||
width: number
|
||||
height: number
|
||||
}
|
||||
```
|
||||
|
||||
- setViewBox
|
||||
|
||||
```javascript
|
||||
svgPanZoom.setViewBox(x, y, width, height, animationTime)
|
||||
```
|
||||
|
||||
Changes the viewBox to the specified coordinates. Will respect the `options.limits` adapting the viewBox if needed (moving or reducing it to fit into `options.limits`
|
||||
- x: Number, the new x coodinate of the top-left corner
|
||||
- y: Number, the new y coodinate of the top-left corner
|
||||
- width: Number, the new width of the viewBox
|
||||
- height: Number, the new height of the viewBox
|
||||
- animationTime: Number, optional. How long the animation should last, defaults to options.animationTime.
|
||||
|
||||
- setCenter
|
||||
|
||||
```javascript
|
||||
svgPanZoom.setCenter(x, y, animationTime)
|
||||
```
|
||||
|
||||
Sets the center of the SVG. Parameters:
|
||||
- x: Number, the new x coordinate of the center
|
||||
- y: Number, the new y coordinate of the center
|
||||
- animationTime: Number, optional. How long the animation should last, defaults to options.animationTime.
|
||||
|
||||
|
||||
|
||||
|
||||
* Notes:
|
||||
|
||||
- Only works in SVGs inlined in the HTML. You can use $.load() to load the SVG image in the page using AJAX and call $().svgPanZoom() in the callback
|
||||
- Touch pinch events to zoom not yet supported
|
||||
- This plugin does not create any controls (like arrows to move the image) on top of the SVG. These controls are simple to create manually and they can call the methods to move the image.
|
||||
- Do not manipulate the SVG viewBox attribute manually, use SvgPanZoom.setViewBox() instead
|
||||
|
||||
Copyright (C) 2014 Daniel Hoffmann Bernardes, Ícaro Technologies
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
||||
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
*/
|
||||
|
||||
(function() {
|
||||
var hasProp = {}.hasOwnProperty;
|
||||
|
||||
(function($) {
|
||||
var checkLimits, defaultOptions, defaultViewBox, getViewBoxCoordinatesFromEvent, parseViewBoxString;
|
||||
defaultOptions = {
|
||||
events: {
|
||||
mouseWheel: true,
|
||||
doubleClick: true,
|
||||
drag: true,
|
||||
dragCursor: "move"
|
||||
},
|
||||
animationTime: 300,
|
||||
zoomFactor: 0.25,
|
||||
maxZoom: 3,
|
||||
panFactor: 100,
|
||||
initialViewBox: null,
|
||||
limits: null
|
||||
};
|
||||
defaultViewBox = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 1000,
|
||||
height: 1000
|
||||
};
|
||||
|
||||
/**
|
||||
* Check the limits of the view box, return a new viewBox that respects the limits while keeping
|
||||
* the original view box size if possible. If the view box needs to be reduced, the returned view
|
||||
* box will keep the aspect ratio of the original view box.
|
||||
*
|
||||
* @param {Object} viewBox
|
||||
* The original view box. Takes numbers, in the format `{x, y, width, height}`.
|
||||
*
|
||||
* @param {Object} limits
|
||||
* Extents which can be shown, in the view box coordinate system. Takes numbers in the format
|
||||
* `{x, y, x2, y2}`.
|
||||
*
|
||||
* @return {Object} viewBox
|
||||
* A new view box object, squeezed into the limits. Contains numbers, in the format `{x, y,
|
||||
* width, height}`.
|
||||
*/
|
||||
checkLimits = function(viewBox, limits) {
|
||||
var limitsHeight, limitsWidth, reductionFactor, vb;
|
||||
vb = $.extend({}, viewBox);
|
||||
limitsWidth = Math.abs(limits.x2 - limits.x);
|
||||
limitsHeight = Math.abs(limits.y2 - limits.y);
|
||||
if (vb.width > limitsWidth) {
|
||||
if (vb.height > limitsHeight) {
|
||||
if (limitsWidth > limitsHeight) {
|
||||
reductionFactor = limitsHeight / vb.height;
|
||||
vb.height = limitsHeight;
|
||||
vb.width = vb.width * reductionFactor;
|
||||
} else {
|
||||
reductionFactor = limitsWidth / vb.width;
|
||||
vb.width = limitsWidth;
|
||||
vb.height = vb.height * reductionFactor;
|
||||
}
|
||||
} else {
|
||||
reductionFactor = limitsWidth / vb.width;
|
||||
vb.width = limitsWidth;
|
||||
vb.height = vb.height * reductionFactor;
|
||||
}
|
||||
} else if (vb.height > limitsHeight) {
|
||||
reductionFactor = limitsHeight / vb.height;
|
||||
vb.height = limitsHeight;
|
||||
vb.width = vb.width * reductionFactor;
|
||||
}
|
||||
if (vb.x < limits.x) {
|
||||
vb.x = limits.x;
|
||||
}
|
||||
if (vb.y < limits.y) {
|
||||
vb.y = limits.y;
|
||||
}
|
||||
if (vb.x + vb.width > limits.x2) {
|
||||
vb.x = limits.x2 - vb.width;
|
||||
}
|
||||
if (vb.y + vb.height > limits.y2) {
|
||||
vb.y = limits.y2 - vb.height;
|
||||
}
|
||||
return vb;
|
||||
};
|
||||
|
||||
/**
|
||||
* Parse the viewbox string as defined in the spec for the svg tag.
|
||||
*
|
||||
* @param {String} viewBoxString
|
||||
* A valid value of the `viewBox` attribute.
|
||||
*
|
||||
* @return {Object} viewBox
|
||||
* A view box object. Contains numbers, in the format `{x, y, width, height}`.
|
||||
*/
|
||||
parseViewBoxString = function(string) {
|
||||
var vb;
|
||||
vb = string.replace("\s+", " ").split(" ");
|
||||
return vb = {
|
||||
x: parseFloat(vb[0]),
|
||||
y: parseFloat(vb[1]),
|
||||
width: parseFloat(vb[2]),
|
||||
height: parseFloat(vb[3])
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Get the mouse or first touch position from the `event`, relative to the SVG viewBox.
|
||||
*
|
||||
* @param {SVGElement} svgRoot
|
||||
* The `<svg>` DOM object
|
||||
*
|
||||
* @param {MouseEvent|TouchEvent|jQueryEvent} event
|
||||
* The DOM or jQuery event.
|
||||
*
|
||||
* @return {Object}
|
||||
* Coordinates of the event. Contains numbers, in the format `{x, y}`.
|
||||
*/
|
||||
getViewBoxCoordinatesFromEvent = function(svgRoot, event) {
|
||||
var ctm, foo, pos;
|
||||
foo = {
|
||||
x: null,
|
||||
y: null
|
||||
};
|
||||
if (event.type === "touchstart" || event.type === "touchmove") {
|
||||
if ((event.originalEvent != null) && (event.touches == null)) {
|
||||
foo.x = event.originalEvent.touches[0].clientX;
|
||||
foo.y = event.originalEvent.touches[0].clientY;
|
||||
} else {
|
||||
foo.x = event.touches[0].clientX;
|
||||
foo.y = event.touches[0].clientY;
|
||||
}
|
||||
} else {
|
||||
if (event.clientX != null) {
|
||||
foo.x = event.clientX;
|
||||
foo.y = event.clientY;
|
||||
} else {
|
||||
foo.x = event.originalEvent.clientX;
|
||||
foo.y = event.originalEvent.clientY;
|
||||
}
|
||||
}
|
||||
pos = svgRoot.createSVGPoint();
|
||||
pos.x = parseInt(foo.x, 10);
|
||||
pos.y = parseInt(foo.y, 10);
|
||||
ctm = svgRoot.getScreenCTM();
|
||||
ctm = ctm.inverse();
|
||||
pos = pos.matrixTransform(ctm);
|
||||
return pos;
|
||||
};
|
||||
return $.fn.svgPanZoom = function(options) {
|
||||
var ret;
|
||||
ret = [];
|
||||
this.each(function() {
|
||||
var $animationDiv, dragStarted, horizontalSizeIncrement, key, opts, preventClick, value, vb, verticalSizeIncrement, viewBox;
|
||||
opts = $.extend(true, {}, defaultOptions, options);
|
||||
opts.$svg = $(this);
|
||||
if (opts.animationTime == null) {
|
||||
opts.animationTime = 0;
|
||||
}
|
||||
opts.$svg[0].setAttribute("preserveAspectRatio", "xMidYMid meet");
|
||||
vb = $.extend({}, this.viewBox.baseVal);
|
||||
if (vb.x == null) {
|
||||
vb.x = 0;
|
||||
}
|
||||
if (vb.y == null) {
|
||||
vb.y = 0;
|
||||
}
|
||||
if (vb.width == null) {
|
||||
vb.width = 0;
|
||||
}
|
||||
if (vb.height == null) {
|
||||
vb.height = 0;
|
||||
}
|
||||
if (opts.initialViewBox != null) {
|
||||
if (typeof opts.initialViewBox === "string") {
|
||||
vb = parseViewBoxString(opts.initialViewBox);
|
||||
} else if (typeof opts.initialViewBox === "object") {
|
||||
vb = $.extend({}, defaultViewBox, opts.initialViewBox);
|
||||
} else {
|
||||
throw "initialViewBox is of invalid type";
|
||||
}
|
||||
} else if (vb.x === 0 && vb.y === 0 && vb.width === 0 && vb.height === 0) {
|
||||
vb = defaultViewBox;
|
||||
}
|
||||
viewBox = vb;
|
||||
opts.initialViewBox = $.extend({}, viewBox);
|
||||
if (opts.limits == null) {
|
||||
horizontalSizeIncrement = viewBox.width * 0.15;
|
||||
verticalSizeIncrement = viewBox.height * 0.15;
|
||||
opts.limits = {
|
||||
x: viewBox.x,
|
||||
y: viewBox.y,
|
||||
x2: viewBox.x + viewBox.width,
|
||||
y2: viewBox.y + viewBox.height
|
||||
};
|
||||
}
|
||||
opts.reset = function() {
|
||||
var inivb;
|
||||
inivb = this.initialViewBox;
|
||||
this.setViewBox(inivb.x, inivb.y, inivb.width, inivb.height, 0);
|
||||
};
|
||||
opts.getViewBox = function() {
|
||||
return $.extend({}, viewBox);
|
||||
};
|
||||
$animationDiv = $("<div></div>");
|
||||
opts.setViewBox = function(x, y, width, height, animationTime) {
|
||||
if (animationTime == null) {
|
||||
animationTime = this.animationTime;
|
||||
}
|
||||
if (animationTime > 0) {
|
||||
$animationDiv.css({
|
||||
left: viewBox.x + "px",
|
||||
top: viewBox.y + "px",
|
||||
width: viewBox.width + "px",
|
||||
height: viewBox.height + "px"
|
||||
});
|
||||
}
|
||||
viewBox = {
|
||||
x: x != null ? x : viewBox.x,
|
||||
y: y != null ? y : viewBox.y,
|
||||
width: width ? width : viewBox.width,
|
||||
height: height ? height : viewBox.height
|
||||
};
|
||||
viewBox = checkLimits(viewBox, this.limits);
|
||||
if (animationTime > 0) {
|
||||
$animationDiv.stop().animate({
|
||||
left: viewBox.x,
|
||||
top: viewBox.y,
|
||||
width: viewBox.width,
|
||||
height: viewBox.height
|
||||
}, {
|
||||
duration: animationTime,
|
||||
easing: "linear",
|
||||
step: (function(value, properties) {
|
||||
var $div;
|
||||
$div = $animationDiv;
|
||||
this.$svg[0].setAttribute("viewBox", ($div.css("left").slice(0, -2)) + " " + ($div.css("top").slice(0, -2)) + " " + ($div.css("width").slice(0, -2)) + " " + ($div.css("height").slice(0, -2)));
|
||||
}).bind(this)
|
||||
});
|
||||
} else {
|
||||
this.$svg[0].setAttribute("viewBox", viewBox.x + " " + viewBox.y + " " + viewBox.width + " " + viewBox.height);
|
||||
}
|
||||
};
|
||||
opts.panLeft = function(amount, animationTime) {
|
||||
if (amount == null) {
|
||||
amount = this.panFactor;
|
||||
}
|
||||
if (animationTime == null) {
|
||||
animationTime = this.animationTime;
|
||||
}
|
||||
this.panRight(-amount, animationTime);
|
||||
};
|
||||
opts.panRight = function(amount, animationTime) {
|
||||
if (amount == null) {
|
||||
amount = this.panFactor;
|
||||
}
|
||||
if (animationTime == null) {
|
||||
animationTime = this.animationTime;
|
||||
}
|
||||
this.setViewBox(viewBox.x + amount, null, null, null, animationTime);
|
||||
};
|
||||
opts.panUp = function(amount, animationTime) {
|
||||
if (amount == null) {
|
||||
amount = this.panFactor;
|
||||
}
|
||||
if (animationTime == null) {
|
||||
animationTime = this.animationTime;
|
||||
}
|
||||
this.panDown(-amount, animationTime);
|
||||
};
|
||||
opts.panDown = function(amount, animationTime) {
|
||||
if (amount == null) {
|
||||
amount = this.panFactor;
|
||||
}
|
||||
if (animationTime == null) {
|
||||
animationTime = this.animationTime;
|
||||
}
|
||||
this.setViewBox(null, viewBox.y + amount, null, null, animationTime);
|
||||
};
|
||||
opts.zoomIn = function(amount, animationTime) {
|
||||
if (amount == null) {
|
||||
amount = this.zoomFactor;
|
||||
}
|
||||
if (animationTime == null) {
|
||||
animationTime = this.animationTime;
|
||||
}
|
||||
this.zoomOut(-amount, animationTime);
|
||||
};
|
||||
opts.zoomOut = function(amount, animationTime) {
|
||||
var center, newHeight, newWidth;
|
||||
if (amount == null) {
|
||||
amount = this.zoomFactor;
|
||||
}
|
||||
if (animationTime == null) {
|
||||
animationTime = this.animationTime;
|
||||
}
|
||||
if (amount === 0) {
|
||||
return;
|
||||
} else if (amount < 0) {
|
||||
amount = Math.abs(amount);
|
||||
newWidth = viewBox.width / (1 + amount);
|
||||
newHeight = viewBox.height / (1 + amount);
|
||||
} else {
|
||||
newWidth = viewBox.width * (1 + amount);
|
||||
newHeight = viewBox.height * (1 + amount);
|
||||
}
|
||||
center = {
|
||||
x: viewBox.x + viewBox.width / 2,
|
||||
y: viewBox.y + viewBox.height / 2
|
||||
};
|
||||
this.setViewBox(center.x - newWidth / 2, center.y - newHeight / 2, newWidth, newHeight, animationTime);
|
||||
};
|
||||
opts.setCenter = function(x, y, animationTime) {
|
||||
if (animationTime == null) {
|
||||
animationTime = this.animationTime;
|
||||
}
|
||||
this.setViewBox(x - viewBox.width / 2, y - viewBox.height / 2, viewBox.width, viewBox.height, animationTime);
|
||||
};
|
||||
for (key in opts) {
|
||||
if (!hasProp.call(opts, key)) continue;
|
||||
value = opts[key];
|
||||
if (typeof value === "function") {
|
||||
opts.key = value.bind(opts);
|
||||
}
|
||||
}
|
||||
opts.$svg.on("mousewheel DOMMouseScroll MozMousePixelScroll", (function(ev) {
|
||||
var delta, minHeight, minWidth, newMousePosition, newViewBox, newcenter, oldDistanceFromCenter, oldMousePosition, oldViewBox, oldcenter, reductionFactor;
|
||||
delta = parseInt(ev.originalEvent.wheelDelta || -ev.originalEvent.detail);
|
||||
if (delta === 0 || opts.events.mouseWheel !== true) {
|
||||
return;
|
||||
}
|
||||
oldViewBox = this.getViewBox();
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
oldMousePosition = getViewBoxCoordinatesFromEvent(this.$svg[0], ev);
|
||||
oldcenter = {
|
||||
x: viewBox.x + viewBox.width / 2,
|
||||
y: viewBox.y + viewBox.height / 2
|
||||
};
|
||||
oldDistanceFromCenter = {
|
||||
x: oldcenter.x - oldMousePosition.x,
|
||||
y: oldcenter.y - oldMousePosition.y
|
||||
};
|
||||
if (delta > 0) {
|
||||
this.zoomIn(void 0, 0);
|
||||
minWidth = this.initialViewBox.width / this.maxZoom;
|
||||
minHeight = this.initialViewBox.height / this.maxZoom;
|
||||
if (viewBox.width < minWidth) {
|
||||
reductionFactor = minWidth / viewBox.width;
|
||||
viewBox.width = minWidth;
|
||||
viewBox.height = viewBox.height * reductionFactor;
|
||||
}
|
||||
if (viewBox.height < minHeight) {
|
||||
reductionFactor = minHeight / viewBox.height;
|
||||
viewBox.height = minHeight;
|
||||
viewBox.width = viewBox.width * reductionFactor;
|
||||
}
|
||||
} else {
|
||||
this.zoomOut(void 0, 0);
|
||||
}
|
||||
newMousePosition = getViewBoxCoordinatesFromEvent(this.$svg[0], ev);
|
||||
newcenter = {
|
||||
x: oldcenter.x + (oldMousePosition.x - newMousePosition.x),
|
||||
y: oldcenter.y + (oldMousePosition.y - newMousePosition.y)
|
||||
};
|
||||
this.setCenter(newcenter.x, newcenter.y, 0);
|
||||
newViewBox = this.getViewBox();
|
||||
this.setViewBox(oldViewBox.x, oldViewBox.y, oldViewBox.width, oldViewBox.height, 0);
|
||||
this.setViewBox(newViewBox.x, newViewBox.y, newViewBox.width, newViewBox.height);
|
||||
}).bind(opts));
|
||||
opts.$svg.dblclick((function(ev) {
|
||||
if (opts.events.doubleClick !== true) {
|
||||
return;
|
||||
}
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
return this.zoomIn();
|
||||
}).bind(opts));
|
||||
opts.$svg[0].addEventListener("click", function(ev) {
|
||||
var preventClick;
|
||||
if (preventClick) {
|
||||
preventClick = false;
|
||||
ev.stopPropagation();
|
||||
return ev.preventDefault();
|
||||
}
|
||||
}, true);
|
||||
dragStarted = false;
|
||||
preventClick = false;
|
||||
opts.$svg.on("mousedown touchstart", (function(ev) {
|
||||
var $body, domBody, initialViewBox, mouseMoveCallback, mouseUpCallback, oldCursor;
|
||||
if (dragStarted) {
|
||||
return;
|
||||
}
|
||||
if (opts.events.drag !== true || (ev.type === "mousedown" && ev.which !== 1)) {
|
||||
return;
|
||||
}
|
||||
dragStarted = true;
|
||||
preventClick = false;
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
initialViewBox = $.extend({}, viewBox);
|
||||
$body = $(window.document.body);
|
||||
domBody = $body[0];
|
||||
oldCursor = this.$svg.css("cursor");
|
||||
if (this.events.dragCursor != null) {
|
||||
this.$svg.css("cursor", this.events.dragCursor);
|
||||
}
|
||||
mouseMoveCallback = (function(ev2) {
|
||||
var currentMousePosition, initialMousePosition;
|
||||
ev2.preventDefault();
|
||||
ev2.stopPropagation();
|
||||
initialMousePosition = getViewBoxCoordinatesFromEvent(this.$svg[0], ev);
|
||||
currentMousePosition = getViewBoxCoordinatesFromEvent(this.$svg[0], ev2);
|
||||
if (Math.sqrt(Math.pow(ev.pageX + ev2.pageX, 2) + Math.pow(ev.pageY + ev2.pageY, 2)) > 3) {
|
||||
preventClick = true;
|
||||
}
|
||||
this.setViewBox(initialViewBox.x + initialMousePosition.x - currentMousePosition.x, initialViewBox.y + initialMousePosition.y - currentMousePosition.y, null, null, 0);
|
||||
}).bind(opts);
|
||||
mouseUpCallback = (function(ev2) {
|
||||
if (ev2.type === "mouseout" && ev2.target !== ev2.currentTarget) {
|
||||
return;
|
||||
}
|
||||
ev2.preventDefault();
|
||||
ev2.stopPropagation();
|
||||
domBody.removeEventListener("mousemove", mouseMoveCallback, true);
|
||||
domBody.removeEventListener("touchmove", mouseMoveCallback, true);
|
||||
domBody.removeEventListener("mouseup", mouseUpCallback, true);
|
||||
domBody.removeEventListener("touchend", mouseUpCallback, true);
|
||||
domBody.removeEventListener("touchcancel", mouseUpCallback, true);
|
||||
domBody.removeEventListener("mouseout", mouseUpCallback, true);
|
||||
if (this.events.dragCursor != null) {
|
||||
this.$svg.css("cursor", oldCursor);
|
||||
}
|
||||
dragStarted = false;
|
||||
}).bind(opts);
|
||||
domBody.addEventListener("mousemove", mouseMoveCallback, true);
|
||||
domBody.addEventListener("touchmove", mouseMoveCallback, true);
|
||||
domBody.addEventListener("mouseup", mouseUpCallback, true);
|
||||
domBody.addEventListener("touchend", mouseUpCallback, true);
|
||||
domBody.addEventListener("touchcancel", mouseUpCallback, true);
|
||||
domBody.addEventListener("mouseout", mouseUpCallback, true);
|
||||
}).bind(opts));
|
||||
opts.setViewBox(vb.x, vb.y, vb.width, vb.height, 0);
|
||||
ret.push(opts);
|
||||
});
|
||||
if (ret.length === 0) {
|
||||
return null;
|
||||
}
|
||||
if (ret.length === 1) {
|
||||
return ret[0];
|
||||
} else {
|
||||
return ret;
|
||||
}
|
||||
};
|
||||
})(jQuery);
|
||||
|
||||
}).call(this);
|
||||
|
||||
//# sourceMappingURL=jquery.svg.pan.zoom.js.map
|
||||
|
|
@ -225,7 +225,18 @@ function initMermaid( update, attrs ) {
|
|||
var is_initialized = ( update ? update_func( attrs ) : init_func( attrs ) );
|
||||
if( is_initialized ){
|
||||
mermaid.init();
|
||||
$(".mermaid svg").svgPanZoom({});
|
||||
// zoom for Mermaid
|
||||
// https://github.com/mermaid-js/mermaid/issues/1860#issuecomment-1345440607
|
||||
var svgs = d3.selectAll( '.mermaid svg' );
|
||||
svgs.each( function(){
|
||||
var svg = d3.select( this );
|
||||
svg.html( '<g>' + svg.html() + '</g>' );
|
||||
var inner = svg.select( 'g' );
|
||||
var zoom = d3.zoom().on( 'zoom', function( e ){
|
||||
inner.attr( 'transform', e.transform);
|
||||
});
|
||||
svg.call( zoom );
|
||||
});
|
||||
}
|
||||
if( update && search && search.length ){
|
||||
sessionStorage.setItem( baseUriFull+'search-value', search );
|
||||
|
|
|
|||
Loading…
Reference in a new issue