From 82f8bf2dece2cb55a7b29697b8b15d3ce7723ead Mon Sep 17 00:00:00 2001 From: liuboaibc Date: Mon, 17 Aug 2020 11:20:05 +0800 Subject: [PATCH] add image viewer --- content/en/docs/_index.md | 2 +- layouts/docs/single.html | 17 ++++++++++++++--- layouts/partials/content.html | 5 +++++ layouts/partials/css.html | 1 + layouts/partials/head.html | 1 + static/css/viewer.min.css | 9 +++++++++ static/js/viewer.min.js | 10 ++++++++++ 7 files changed, 41 insertions(+), 4 deletions(-) create mode 100644 static/css/viewer.min.css create mode 100644 static/js/viewer.min.js diff --git a/content/en/docs/_index.md b/content/en/docs/_index.md index 73a9b733a..8bea52f1d 100644 --- a/content/en/docs/_index.md +++ b/content/en/docs/_index.md @@ -1,5 +1,5 @@ --- -title: "docs" +title: "Documentation" css: "scss/docs.scss" LinkTitle: "Documentation" diff --git a/layouts/docs/single.html b/layouts/docs/single.html index 7ab44686f..9abfeb922 100644 --- a/layouts/docs/single.html +++ b/layouts/docs/single.html @@ -231,9 +231,20 @@ }) } - getFileContributors() - bindClickMenu() - bindClickSecondMenu() + var useViewer = function() { + var viewer = new Viewer(document.querySelector('.md-body'), { + url: 'src' + }) + } + + var __main = function() { + getFileContributors() + bindClickMenu() + bindClickSecondMenu() + useViewer() + } + + __main() {{ end }} \ No newline at end of file diff --git a/layouts/partials/content.html b/layouts/partials/content.html index a132a7ad3..7e3dcb3d8 100644 --- a/layouts/partials/content.html +++ b/layouts/partials/content.html @@ -47,6 +47,11 @@ {{ partial "footer.html" $context }} + \ No newline at end of file diff --git a/layouts/partials/css.html b/layouts/partials/css.html index e45572c79..c87460667 100644 --- a/layouts/partials/css.html +++ b/layouts/partials/css.html @@ -1,6 +1,7 @@ + {{ $common := resources.Get "scss/common.scss" | toCSS | minify | fingerprint }} diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 9d6d4babf..77851a780 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -15,4 +15,5 @@ {{- partial "css.html" . -}} + diff --git a/static/css/viewer.min.css b/static/css/viewer.min.css new file mode 100644 index 000000000..a436b0805 --- /dev/null +++ b/static/css/viewer.min.css @@ -0,0 +1,9 @@ +/*! + * Viewer.js v1.6.1 + * https://fengyuanchen.github.io/viewerjs + * + * Copyright 2015-present Chen Fengyuan + * Released under the MIT license + * + * Date: 2020-06-14T07:47:15.792Z + */.viewer-close:before,.viewer-flip-horizontal:before,.viewer-flip-vertical:before,.viewer-fullscreen-exit:before,.viewer-fullscreen:before,.viewer-next:before,.viewer-one-to-one:before,.viewer-play:before,.viewer-prev:before,.viewer-reset:before,.viewer-rotate-left:before,.viewer-rotate-right:before,.viewer-zoom-in:before,.viewer-zoom-out:before{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARgAAAAUCAYAAABWOyJDAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAQPSURBVHic7Zs/iFxVFMa/0U2UaJGksUgnIVhYxVhpjDbZCBmLdAYECxsRFBTUamcXUiSNncgKQbSxsxH8gzAP3FU2jY0kKKJNiiiIghFlccnP4p3nPCdv3p9778vsLOcHB2bfveeb7955c3jvvNkBIMdxnD64a94GHMfZu3iBcRynN7zAOI7TG15gHCeeNUkr8zaxG2lbYDYsdgMbktBsP03jdQwljSXdtBhLOmtjowC9Mg9L+knSlcD8TNKpSA9lBpK2JF2VdDSR5n5J64m0qli399hNFMUlpshQii5jbXTbHGviB0nLNeNDSd9VO4A2UdB2fp+x0eCnaXxWXGA2X0au/3HgN9P4LFCjIANOJdrLr0zzZ+BEpNYDwKbpnQMeAw4m8HjQtM6Z9qa917zPQwFr3M5KgA6J5rTJCdFZJj9/lyvGhsDvwFNVuV2MhhjrK6b9bFiE+j1r87eBl4HDwCF7/U/k+ofAX5b/EXBv5JoLMuILzf3Ap6Z3EzgdqHMCuF7hcQf4HDgeoHnccncqdK/TvSDWffFXI/exICY/xZyqc6XLWF1UFZna4gJ7q8BsRvgd2/xXpo6P+D9dfT7PpECtA3cnWPM0GXGFZh/wgWltA+cDNC7X+AP4GzjZQe+k5dRxuYPeiuXU7e1qwLpDz7dFjXKRaSwuMLvAlG8zZlG+YmiK1HoFqT7wP2z+4Q45TfEGcMt01xLoNZEBTwRqD4BLpnMLeC1A41UmVxsXgXeBayV/Wx20rpTyrpnWRft7p6O/FdqzGrDukPNtkaMoMo3FBdBSQMOnYBCReyf05s126fU9ytfX98+mY54Kxnp7S9K3kj6U9KYdG0h6UdLbkh7poFXMfUnSOyVvL0h6VtIXHbS6nOP+s/Zm9mvyXW1uuC9ohZ72E9uDmXWLJOB1GxsH+DxPftsB8B6wlGDN02TAkxG6+4D3TWsbeC5CS8CDFce+AW500LhhOW2020TRjK3b21HEmgti9m0RonxbdMZeVzV+/4tF3cBpP7E9mKHNL5q8h5g0eYsCMQz0epq8gQrwMXAgcs0FGXGFRcB9wCemF9PkbYqM/Bas7fxLwNeJPdTdpo4itQti8lPMqTpXuozVRVXPpbHI3KkNTB1NfkL81j2mvhDp91HgV9MKuRIqrykj3WPq4rHyL+axj8/qGPmTqi6F9YDlHOvJU6oYcTsh/TYSzWmTE6JT19CtLTJt32D6CmHe0eQn1O8z5AXgT4sx4Vcu0/EQecMydB8z0hUWkTd2t4CrwNEePqMBcAR4mrBbwyXLPWJa8zrXmmLEhNBmfpkuY2102xxrih+pb+ieAb6vGhuA97UcJ5KR8gZ77K+99xxeYBzH6Q3/Z0fHcXrDC4zjOL3hBcZxnN74F+zlvXFWXF9PAAAAAElFTkSuQmCC");background-repeat:no-repeat;background-size:280px;color:transparent;display:block;font-size:0;height:20px;line-height:0;width:20px}.viewer-zoom-in:before{background-position:0 0;content:"Zoom In"}.viewer-zoom-out:before{background-position:-20px 0;content:"Zoom Out"}.viewer-one-to-one:before{background-position:-40px 0;content:"One to One"}.viewer-reset:before{background-position:-60px 0;content:"Reset"}.viewer-prev:before{background-position:-80px 0;content:"Previous"}.viewer-play:before{background-position:-100px 0;content:"Play"}.viewer-next:before{background-position:-120px 0;content:"Next"}.viewer-rotate-left:before{background-position:-140px 0;content:"Rotate Left"}.viewer-rotate-right:before{background-position:-160px 0;content:"Rotate Right"}.viewer-flip-horizontal:before{background-position:-180px 0;content:"Flip Horizontal"}.viewer-flip-vertical:before{background-position:-200px 0;content:"Flip Vertical"}.viewer-fullscreen:before{background-position:-220px 0;content:"Enter Full Screen"}.viewer-fullscreen-exit:before{background-position:-240px 0;content:"Exit Full Screen"}.viewer-close:before{background-position:-260px 0;content:"Close"}.viewer-container{bottom:0;direction:ltr;font-size:0;left:0;line-height:0;overflow:hidden;position:absolute;right:0;-webkit-tap-highlight-color:transparent;top:0;-ms-touch-action:none;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.viewer-container::-moz-selection,.viewer-container ::-moz-selection{background-color:transparent}.viewer-container::selection,.viewer-container ::selection{background-color:transparent}.viewer-container img{display:block;height:auto;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}.viewer-canvas{bottom:0;left:0;overflow:hidden;position:absolute;right:0;top:0}.viewer-canvas>img{height:auto;margin:15px auto;max-width:90%!important;width:auto}.viewer-footer{bottom:0;left:0;overflow:hidden;position:absolute;right:0;text-align:center}.viewer-navbar{background-color:rgba(0,0,0,.5);overflow:hidden}.viewer-list{-webkit-box-sizing:content-box;box-sizing:content-box;height:50px;margin:0;overflow:hidden;padding:1px 0}.viewer-list>li{color:transparent;cursor:pointer;float:left;font-size:0;height:50px;line-height:0;opacity:.5;overflow:hidden;-webkit-transition:opacity .15s;transition:opacity .15s;width:30px}.viewer-list>li:hover{opacity:.75}.viewer-list>li+li{margin-left:1px}.viewer-list>.viewer-loading{position:relative}.viewer-list>.viewer-loading:after{border-width:2px;height:20px;margin-left:-10px;margin-top:-10px;width:20px}.viewer-list>.viewer-active,.viewer-list>.viewer-active:hover{opacity:1}.viewer-player{background-color:#000;bottom:0;cursor:none;display:none;right:0}.viewer-player,.viewer-player>img{left:0;position:absolute;top:0}.viewer-toolbar>ul{display:inline-block;margin:0 auto 5px;overflow:hidden;padding:3px 0}.viewer-toolbar>ul>li{background-color:rgba(0,0,0,.5);border-radius:50%;cursor:pointer;float:left;height:24px;overflow:hidden;-webkit-transition:background-color .15s;transition:background-color .15s;width:24px}.viewer-toolbar>ul>li:hover{background-color:rgba(0,0,0,.8)}.viewer-toolbar>ul>li:before{margin:2px}.viewer-toolbar>ul>li+li{margin-left:1px}.viewer-toolbar>ul>.viewer-small{height:18px;margin-bottom:3px;margin-top:3px;width:18px}.viewer-toolbar>ul>.viewer-small:before{margin:-1px}.viewer-toolbar>ul>.viewer-large{height:30px;margin-bottom:-3px;margin-top:-3px;width:30px}.viewer-toolbar>ul>.viewer-large:before{margin:5px}.viewer-tooltip{background-color:rgba(0,0,0,.8);border-radius:10px;color:#fff;display:none;font-size:12px;height:20px;left:50%;line-height:20px;margin-left:-25px;margin-top:-10px;position:absolute;text-align:center;top:50%;width:50px}.viewer-title{color:#ccc;display:inline-block;font-size:12px;line-height:1;margin:0 5% 5px;max-width:90%;opacity:.8;overflow:hidden;text-overflow:ellipsis;-webkit-transition:opacity .15s;transition:opacity .15s;white-space:nowrap}.viewer-title:hover{opacity:1}.viewer-button{background-color:rgba(0,0,0,.5);border-radius:50%;cursor:pointer;height:80px;overflow:hidden;position:absolute;right:-40px;top:-40px;-webkit-transition:background-color .15s;transition:background-color .15s;width:80px}.viewer-button:focus,.viewer-button:hover{background-color:rgba(0,0,0,.8)}.viewer-button:before{bottom:15px;left:15px;position:absolute}.viewer-fixed{position:fixed}.viewer-open{overflow:hidden}.viewer-show{display:block}.viewer-hide{display:none}.viewer-backdrop{background-color:rgba(0,0,0,.5)}.viewer-invisible{visibility:hidden}.viewer-move{cursor:move;cursor:-webkit-grab;cursor:grab}.viewer-fade{opacity:0}.viewer-in{opacity:1}.viewer-transition{-webkit-transition:all .3s;transition:all .3s}@-webkit-keyframes viewer-spinner{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes viewer-spinner{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.viewer-loading:after{-webkit-animation:viewer-spinner 1s linear infinite;animation:viewer-spinner 1s linear infinite;border:4px solid hsla(0,0%,100%,.1);border-left-color:hsla(0,0%,100%,.5);border-radius:50%;content:"";display:inline-block;height:40px;left:50%;margin-left:-20px;margin-top:-20px;position:absolute;top:50%;width:40px;z-index:1}@media (max-width:767px){.viewer-hide-xs-down{display:none}}@media (max-width:991px){.viewer-hide-sm-down{display:none}}@media (max-width:1199px){.viewer-hide-md-down{display:none}} \ No newline at end of file diff --git a/static/js/viewer.min.js b/static/js/viewer.min.js new file mode 100644 index 000000000..fb357bcfa --- /dev/null +++ b/static/js/viewer.min.js @@ -0,0 +1,10 @@ +/*! + * Viewer.js v1.6.1 + * https://fengyuanchen.github.io/viewerjs + * + * Copyright 2015-present Chen Fengyuan + * Released under the MIT license + * + * Date: 2020-06-14T07:47:18.114Z + */ +!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i():"function"==typeof define&&define.amd?define(i):(t=t||self).Viewer=i()}(this,function(){"use strict";function i(t){return(i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function s(t,i){for(var e=0;e=this.length||this.viewed&&i===this.index)return this;if(!this.isShown)return this.index=i,this.show();this.viewing&&this.viewing.abort();var e=this.element,s=this.options,o=this.title,a=this.canvas,r=this.items[i],h=r.querySelector("img"),l=mt(h,"originalUrl"),c=h.getAttribute("alt"),u=document.createElement("img");if(nt(s.inheritedAttributes,function(t){var i=h.getAttribute(t);null!==i&&u.setAttribute(t,i)}),u.src=l,u.alt=c,et(s.view)&&xt(e,"view",s.view,{once:!0}),!1===zt(e,"view",{originalImage:this.images[i],index:i,image:u})||!this.isShown||this.hiding||this.played)return this;this.image=u,lt(this.items[this.index],g),ht(r,g),this.viewed=!1,this.index=i,this.imageData={},ht(u,D),s.loading&&ht(a,T),a.innerHTML="",a.appendChild(u),this.renderList(),o.innerHTML="";function d(){var t,i=n.imageData,e=Array.isArray(s.title)?s.title[1]:s.title;o.innerHTML=$(t=et(e)?e.call(n,u,i):"".concat(c," (").concat(i.naturalWidth," × ").concat(i.naturalHeight,")"))?t.replace(/&(?!amp;|quot;|#39;|lt;|gt;)/g,"&").replace(/"/g,""").replace(/'/g,"'").replace(//g,">"):t}var m;return xt(e,V,d,{once:!0}),this.viewing={abort:function(){yt(e,V,d),u.complete?this.imageRendering?this.imageRendering.abort():this.imageInitializing&&this.imageInitializing.abort():(u.src="",yt(u,P,m),this.timeout&&clearTimeout(this.timeout))}},u.complete?this.load():(xt(u,P,m=this.load.bind(this),{once:!0}),this.timeout&&clearTimeout(this.timeout),this.timeout=setTimeout(function(){lt(u,D),n.timeout=!1},1e3)),this},prev:function(t){var i=0Math.abs(r)&&(this.pointers={},1
    ',s=(n=e.querySelector(".".concat(v,"-container"))).querySelector(".".concat(v,"-title")),o=n.querySelector(".".concat(v,"-toolbar")),a=n.querySelector(".".concat(v,"-navbar")),r=n.querySelector(".".concat(v,"-button")),l=n.querySelector(".".concat(v,"-canvas")),this.parent=i,this.viewer=n,this.title=s,this.toolbar=o,this.navbar=a,this.button=r,this.canvas=l,this.footer=n.querySelector(".".concat(v,"-footer")),this.tooltipBox=n.querySelector(".".concat(v,"-tooltip")),this.player=n.querySelector(".".concat(v,"-player")),this.list=n.querySelector(".".concat(v,"-list")),ht(s,h.title?It(Array.isArray(h.title)?h.title[0]:h.title):z),ht(a,h.navbar?It(h.navbar):z),ct(r,z,!h.button),h.backdrop&&(ht(n,"".concat(v,"-backdrop")),h.inline||"static"===h.backdrop||gt(l,U,"hide")),$(h.className)&&h.className&&h.className.split(K).forEach(function(t){ht(n,t)}),h.toolbar?(c=document.createElement("ul"),u=it(h.toolbar),d=Z.slice(0,3),m=Z.slice(7,9),g=Z.slice(9),u||ht(o,It(h.toolbar)),nt(u?h.toolbar:Z,function(t,i){var e,n,s,o=u&&it(t),a=u?dt(i):t,r=o&&!J(t.show)?t.show:t;!r||!h.zoomable&&-1!==d.indexOf(a)||!h.rotatable&&-1!==m.indexOf(a)||!h.scalable&&-1!==g.indexOf(a)||(e=o&&!J(t.size)?t.size:t,n=o&&!J(t.click)?t.click:t,(s=document.createElement("li")).setAttribute("role","button"),ht(s,"".concat(v,"-").concat(a)),et(n)||gt(s,U,a),G(r)&&ht(s,It(r)),-1!==["small","large"].indexOf(e)?ht(s,"".concat(v,"-").concat(e)):"play"===a&&ht(s,"".concat(v,"-large")),et(n)&&xt(s,C,n),c.appendChild(s))}),o.appendChild(c)):ht(o,z),h.rotatable||(ht(f=o.querySelectorAll('li[class*="rotate"]'),D),nt(f,function(t){o.appendChild(t)})),h.inline?(ht(r,x),at(n,{zIndex:h.zIndexInline}),"static"===window.getComputedStyle(i).position&&at(i,{position:"relative"}),i.insertBefore(n,t.nextSibling)):(ht(r,w),ht(n,y),ht(n,b),ht(n,z),at(n,{zIndex:h.zIndex}),$(p=h.container)&&(p=t.ownerDocument.querySelector(p)),(p=p||this.body).appendChild(n)),h.inline&&(this.render(),this.bind(),this.isShown=!0),this.ready=!0,et(h.ready)&&xt(t,F,h.ready,{once:!0}),!1!==zt(t,F)?this.ready&&h.inline&&this.view(this.index):this.ready=!1)}}])&&s(t.prototype,i),n&&s(t,n),e}();return st(Nt.prototype,Ot,St,Ct,Lt,Rt),Nt}); \ No newline at end of file