history-slider-script
code:mod.js
await (async () => {
const { toggle } = await setupSlider();
scrapbox.PageMenu.addItem({
title: "履歴スライダー",
onClick: toggle,
});
})();
code:script.js
var N,p,te,Pe,U,ne,re,Ie,j={},oe=[],Ue=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|inech|zoo|^ord|itera/i;function C(e,t){for(var n in t)en=tn;return e}function se(e){var t=e.parentNode;t&&t.removeChild(e)}function v(e,t,n){var o,i,r,u={};for(r in t)r=="key"?o=tr:r=="ref"?i=tr:ur=tr;if(arguments.length>2&&(u.children=arguments.length>3?N.call(arguments,2):n),typeof e=="function"&&e.defaultProps!=null)for(r in e.defaultProps)ur===void 0&&(ur=e.defaultPropsr);return R(e,u,o,i,null)}function R(e,t,n,o,i){var r={type:e,props:t,key:n,ref:o,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,__h:null,constructor:void 0,__v:i??++te};return i==null&&p.vnode!=null&&p.vnode(r),r}function T(e){return e.children}function q(e,t){this.props=e,this.context=t}function P(e,t){if(t==null)return e.__?P(e.__,e.__.__k.indexOf(e)+1):null;for(var n;t<e.__k.length;t++)if((n=e.__kt)!=null&&n.__e!=null)return n.__e;return typeof e.type=="function"?P(e):null}function ie(e){var t,n;if((e=e.__)!=null&&e.__c!=null){for(e.__e=e.__c.base=null,t=0;t<e.__k.length;t++)if((n=e.__kt)!=null&&n.__e!=null){e.__e=e.__c.base=n.__e;break}return ie(e)}}function ae(e){(!e.__d&&(e.__d=!0)&&U.push(e)&&!z.__r++||re!==p.debounceRendering)&&((re=p.debounceRendering)||ne)(z)}function z(){for(var e;z.__r=U.length;)e=U.sort(function(t,n){return t.__v.__b-n.__v.__b}),U=[],e.some(function(t){var n,o,i,r,u,c;t.__d&&(u=(r=(n=t).__v).__e,(c=n.__P)&&(o=[],(i=C({},r)).__v=r.__v+1,Y(c,r,i,n.__n,c.ownerSVGElement!==void 0,r.__h!=null?u:null,o,u??P(r),r.__h),fe(o,r),r.__e!=u&&ie(r)))})}function _e(e,t,n,o,i,r,u,c,a,f){var s,m,d,_,l,S,h,g=o&&o.__k||oe,y=g.length;for(n.__k=[],s=0;s<t.length;s++)if((_=n.__ks=(_=ts)==null||typeof _=="boolean"?null:typeof _=="string"||typeof _=="number"||typeof _=="bigint"?R(null,_,null,null,_):Array.isArray(_)?R(T,{children:_},null,null,null):_.__b>0?R(_.type,_.props,_.key,null,_.__v):_)!=null){if(_.__=n,_.__b=n.__b+1,(d=gs)===null||d&&_.key==d.key&&_.type===d.type)gs=void 0;else for(m=0;m<y;m++){if((d=gm)&&_.key==d.key&&_.type===d.type){gm=void 0;break}d=null}Y(e,_,d=d||j,i,r,u,c,a,f),l=_.__e,(m=_.ref)&&d.ref!=m&&(h||(h=[]),d.ref&&h.push(d.ref,null,_),h.push(m,_.__c||l,_)),l!=null?(S==null&&(S=l),typeof _.type=="function"&&_.__k===d.__k?_.__d=a=le(_,a,e):a=ce(e,_,d,g,l,a),typeof n.type=="function"&&(n.__d=a)):a&&d.__e==a&&a.parentNode!=e&&(a=P(d))}for(n.__e=S,s=y;s--;)gs!=null&&(typeof n.type=="function"&&gs.__e!=null&&gs.__e==n.__d&&(n.__d=P(o,s+1)),he(gs,gs));if(h)for(s=0;s<h.length;s++)me(hs,h++s,h++s)}function le(e,t,n){for(var o,i=e.__k,r=0;i&&r<i.length;r++)(o=ir)&&(o.__=e,t=typeof o.type=="function"?le(o,t,n):ce(n,o,o,i,o.__e,t));return t}function ce(e,t,n,o,i,r){var u,c,a;if(t.__d!==void 0)u=t.__d,t.__d=void 0;else if(n==null||i!=r||i.parentNode==null)e:if(r==null||r.parentNode!==e)e.appendChild(i),u=null;else{for(c=r,a=0;(c=c.nextSibling)&&a<o.length;a+=2)if(c==i)break e;e.insertBefore(i,r),u=r}return u!==void 0?u:i.nextSibling}function Fe(e,t,n,o,i){var r;for(r in n)r==="children"||r==="key"||r in t||O(e,r,null,nr,o);for(r in t)i&&typeof tr!="function"||r==="children"||r==="key"||r==="value"||r==="checked"||nr===tr||O(e,r,tr,nr,o)}function ue(e,t,n){t0==="-"?e.setProperty(t,n):et=n==null?"":typeof n!="number"||Ue.test(t)?n:n+"px"}function O(e,t,n,o,i){var r;e:if(t==="style")if(typeof n=="string")e.style.cssText=n;else{if(typeof o=="string"&&(e.style.cssText=o=""),o)for(t in o)n&&t in n||ue(e.style,t,"");if(n)for(t in n)o&&nt===ot||ue(e.style,t,nt)}else if(t0==="o"&&t1==="n")r=t!==(t=t.replace(/Capture$/,"")),t=t.toLowerCase()in e?t.toLowerCase().slice(2):t.slice(2),e.l||(e.l={}),e.lt+r=n,n?o||e.addEventListener(t,r?de:pe,r):e.removeEventListener(t,r?de:pe,r);else if(t!=="dangerouslySetInnerHTML"){if(i)t=t.replace(/xlinkH:h/,"h").replace(/sName$/,"s");else if(t!=="href"&&t!=="list"&&t!=="form"&&t!=="tabIndex"&&t!=="download"&&t in e)try{et=n??"";break e}catch{}typeof n=="function"||(n!=null&&(n!==!1||t0==="a"&&t1==="r")?e.setAttribute(t,n):e.removeAttribute(t))}}function pe(e){this.le.type+!1(p.event?p.event(e):e)}function de(e){this.le.type+!0(p.event?p.event(e):e)}function Y(e,t,n,o,i,r,u,c,a){var f,s,m,d,_,l,S,h,g,y,A,x=t.type;if(t.constructor!==void 0)return null;n.__h!=null&&(a=n.__h,c=t.__e=n.__e,t.__h=null,r=c),(f=p.__b)&&f(t);try{e:if(typeof x=="function"){if(h=t.props,g=(f=x.contextType)&&of.__c,y=f?g?g.props.value:f.__:o,n.__c?S=(s=t.__c=n.__c).__=s.__E:("prototype"in x&&x.prototype.render?t.__c=s=new x(h,y):(t.__c=s=new q(h,y),s.constructor=x,s.render=Ne),g&&g.sub(s),s.props=h,s.state||(s.state={}),s.context=y,s.__n=o,m=s.__d=!0,s.__h=[]),s.__s==null&&(s.__s=s.state),x.getDerivedStateFromProps!=null&&(s.__s==s.state&&(s.__s=C({},s.__s)),C(s.__s,x.getDerivedStateFromProps(h,s.__s))),d=s.props,_=s.state,m)x.getDerivedStateFromProps==null&&s.componentWillMount!=null&&s.componentWillMount(),s.componentDidMount!=null&&s.__h.push(s.componentDidMount);else{if(x.getDerivedStateFromProps==null&&h!==d&&s.componentWillReceiveProps!=null&&s.componentWillReceiveProps(h,y),!s.__e&&s.shouldComponentUpdate!=null&&s.shouldComponentUpdate(h,s.__s,y)===!1||t.__v===n.__v){s.props=h,s.state=s.__s,t.__v!==n.__v&&(s.__d=!1),s.__v=t,t.__e=n.__e,t.__k=n.__k,t.__k.forEach(function(H){H&&(H.__=t)}),s.__h.length&&u.push(s);break e}s.componentWillUpdate!=null&&s.componentWillUpdate(h,s.__s,y),s.componentDidUpdate!=null&&s.__h.push(function(){s.componentDidUpdate(d,_,l)})}s.context=y,s.props=h,s.state=s.__s,(f=p.__r)&&f(t),s.__d=!1,s.__v=t,s.__P=e,f=s.render(s.props,s.state,s.context),s.state=s.__s,s.getChildContext!=null&&(o=C(C({},o),s.getChildContext())),m||s.getSnapshotBeforeUpdate==null||(l=s.getSnapshotBeforeUpdate(d,_)),A=f!=null&&f.type===T&&f.key==null?f.props.children:f,_e(e,Array.isArray(A)?A:A,t,n,o,i,r,u,c,a),s.base=t.__e,t.__h=null,s.__h.length&&u.push(s),S&&(s.__E=s.__=null),s.__e=!1}else r==null&&t.__v===n.__v?(t.__k=n.__k,t.__e=n.__e):t.__e=Le(n.__e,t,n,o,i,r,u,a);(f=p.diffed)&&f(t)}catch(H){t.__v=null,(a||r!=null)&&(t.__e=c,t.__h=!!a,rr.indexOf(c)=null),p.__e(H,t,n)}}function fe(e,t){p.__c&&p.__c(t,e),e.some(function(n){try{e=n.__h,n.__h=[],e.some(function(o){o.call(n)})}catch(o){p.__e(o,n.__v)}})}function Le(e,t,n,o,i,r,u,c){var a,f,s,m=n.props,d=t.props,_=t.type,l=0;if(_==="svg"&&(i=!0),r!=null){for(;l<r.length;l++)if((a=rl)&&"setAttribute"in a==!!_&&(_?a.localName===_:a.nodeType===3)){e=a,rl=null;break}}if(e==null){if(_===null)return document.createTextNode(d);e=i?document.createElementNS("http://www.w3.org/2000/svg",_):document.createElement(_,d.is&&d),r=null,c=!1}if(_===null)m===d||c&&e.data===d||(e.data=d);else{if(r=r&&N.call(e.childNodes),f=(m=n.props||j).dangerouslySetInnerHTML,s=d.dangerouslySetInnerHTML,!c){if(r!=null)for(m={},l=0;l<e.attributes.length;l++)m[e.attributes[l].name]=e.attributes[l].value;(s||f)&&(s&&(f&&s.__html==f.__html||s.__html===e.innerHTML)||(e.innerHTML=s&&s.__html||""))}if(Fe(e,d,m,i,c),s)t.__k=[];else if(l=t.props.children,_e(e,Array.isArray(l)?l:l,t,n,o,i&&_!=="foreignObject",r,u,r?r0:n.__k&&P(n,0),c),r!=null)for(l=r.length;l--;)rl!=null&&se(rl);c||("value"in d&&(l=d.value)!==void 0&&(l!==m.value||l!==e.value||_==="progress"&&!l)&&O(e,"value",l,m.value,!1),"checked"in d&&(l=d.checked)!==void 0&&l!==e.checked&&O(e,"checked",l,m.checked,!1))}return e}function me(e,t,n){try{typeof e=="function"?e(t):e.current=t}catch(o){p.__e(o,n)}}function he(e,t,n){var o,i;if(p.unmount&&p.unmount(e),(o=e.ref)&&(o.current&&o.current!==e.__e||me(o,null,t)),(o=e.__c)!=null){if(o.componentWillUnmount)try{o.componentWillUnmount()}catch(r){p.__e(r,t)}o.base=o.__P=null}if(o=e.__k)for(i=0;i<o.length;i++)oi&&he(oi,t,typeof e.type!="function");n||e.__e==null||se(e.__e),e.__e=e.__d=void 0}function Ne(e,t,n){return this.constructor(e,n)}function B(e,t,n){var o,i,r;p.__&&p.__(e,t),i=(o=typeof n=="function")?null:n&&n.__k||t.__k,r=[],Y(t,e=(!o&&n||t).__k=v(T,null,e),i||j,j,t.ownerSVGElement!==void 0,!o&&n?n:i?null:t.firstChild?N.call(t.childNodes):null,r,!o&&n?n:i?i.__e:t.firstChild,o),fe(r,e)}N=oe.slice,p={__e:function(e,t){for(var n,o,i;t=t.__;)if((n=t.__c)&&!n.__)try{if((o=n.constructor)&&o.getDerivedStateFromError!=null&&(n.setState(o.getDerivedStateFromError(e)),i=n.__d),n.componentDidCatch!=null&&(n.componentDidCatch(e),i=n.__d),i)return n.__E=n}catch(r){e=r}throw e}},te=0,Pe=function(e){return e!=null&&e.constructor===void 0},q.prototype.setState=function(e,t){var n;n=this.__s!=null&&this.__s!==this.state?this.__s:this.__s=C({},this.state),typeof e=="function"&&(e=e(C({},n),this.props)),e&&C(n,e),e!=null&&this.__v&&(t&&this.__h.push(t),ae(this))},q.prototype.forceUpdate=function(e){this.__v&&(this.__e=!0,e&&this.__h.push(e),ae(this))},q.prototype.render=T,U=[],ne=typeof Promise=="function"?Promise.prototype.then.bind(Promise.resolve()):setTimeout,z.__r=0,Ie=0;var $,b,ge,V=0,Z=[],ve=p.__b,ye=p.__r,xe=p.diffed,be=p.__c,ke=p.unmount;function G(e,t){p.__h&&p.__h(b,e,V||t),V=0;var n=b.__H||(b.__H={__:[],__h:[]});return e>=n.__.length&&n.__.push({}),n.__e}function M(e){return V=1,je(Ce,e)}function je(e,t,n){var o=G($++,2);return o.t=e,o.__c||(o.__=[n?n(t):Ce(void 0,t),function(i){var r=o.t(o.__0,i);o.__0!==r&&(o.__=[r,o.__1],o.__c.setState({}))}],o.__c=b),o.__}function F(e,t){var n=G($++,3);!p.__s&&Se(n.__H,t)&&(n.__=e,n.__H=t,b.__H.__h.push(n))}function Re(e,t){var n=G($++,7);return Se(n.__H,t)&&(n.__=e(),n.__H=t,n.__h=e),n.__}function D(e,t){return V=8,Re(function(){return e},t)}function qe(){var e;for(Z.sort(function(t,n){return t.__v.__b-n.__v.__b});e=Z.pop();)if(e.__P)try{e.__H.__h.forEach(W),e.__H.__h.forEach(J),e.__H.__h=[]}catch(t){e.__H.__h=[],p.__e(t,e.__v)}}p.__b=function(e){b=null,ve&&ve(e)},p.__r=function(e){ye&&ye(e),$=0;var t=(b=e.__c).__H;t&&(t.__h.forEach(W),t.__h.forEach(J),t.__h=[])},p.diffed=function(e){xe&&xe(e);var t=e.__c;t&&t.__H&&t.__H.__h.length&&(Z.push(t)!==1&&ge===p.requestAnimationFrame||((ge=p.requestAnimationFrame)||function(n){var o,i=function(){clearTimeout(r),we&&cancelAnimationFrame(o),setTimeout(n)},r=setTimeout(i,100);we&&(o=requestAnimationFrame(i))})(qe)),b=null},p.__c=function(e,t){t.some(function(n){try{n.__h.forEach(W),n.__h=n.__h.filter(function(o){return!o.__||J(o)})}catch(o){t.some(function(i){i.__h&&(i.__h=[])}),t=[],p.__e(o,n.__v)}}),be&&be(e,t)},p.unmount=function(e){ke&&ke(e);var t,n=e.__c;n&&n.__H&&(n.__H.__.forEach(function(o){try{W(o)}catch(i){t=i}}),t&&p.__e(t,n.__v))};var we=typeof requestAnimationFrame=="function";function W(e){var t=b,n=e.__c;typeof n=="function"&&(e.__c=void 0,n()),b=t}function J(e){var t=b;e.__c=e.__(),b=t}function Se(e,t){return!e||e.length!==t.length||t.some(function(n,o){return n!==eo})}function Ce(e,t){return typeof t=="function"?t(e):t}function k(e,t){if(t.length<e)throw new TypeError(e+" argument"+(e>1?"s":"")+" required, but only "+t.length+" present")}function E(e){k(1,arguments);let t=Object.prototype.toString.call(e);return e instanceof Date||typeof e=="object"&&t==="object Date"?new Date(e.getTime()):typeof e=="number"||t==="object Number"?new Date(e):((typeof e=="string"||t==="object String")&&typeof console!="undefined"&&(console.warn("Starting with v2.0.0-beta.1 date-fns doesn't accept strings as date arguments. Please use parseISO to parse strings. See: https://git.io/fjule"),console.warn(new Error().stack)),new Date(NaN))}function w(e,t){for(var n=e<0?"-":"",o=Math.abs(e).toString();o.length<t;)o="0"+o;return n+o}var ze={y(e,t){let n=e.getUTCFullYear(),o=n>0?n:1-n;return w(t==="yy"?o%100:o,t.length)},M(e,t){let n=e.getUTCMonth();return t==="M"?String(n+1):w(n+1,2)},d(e,t){return w(e.getUTCDate(),t.length)},a(e,t){let n=e.getUTCHours()/12>=1?"pm":"am";switch(t){case"a":case"aa":return n.toUpperCase();case"aaa":return n;case"aaaaa":return n0;case"aaaa":default:return n==="am"?"a.m.":"p.m."}},h(e,t){return w(e.getUTCHours()%12||12,t.length)},H(e,t){return w(e.getUTCHours(),t.length)},m(e,t){return w(e.getUTCMinutes(),t.length)},s(e,t){return w(e.getUTCSeconds(),t.length)},S(e,t){let n=t.length,o=e.getUTCMilliseconds(),i=Math.floor(o*Math.pow(10,n-3));return w(i,t.length)}},Te=ze;function X(e){let t=new Date(Date.UTC(e.getFullYear(),e.getMonth(),e.getDate(),e.getHours(),e.getMinutes(),e.getSeconds(),e.getMilliseconds()));return t.setUTCFullYear(e.getFullYear()),e.getTime()-t.getTime()}function Q(e){k(1,arguments);var t=E(e);return!isNaN(t)}function L(e){if(e===null||e===!0||e===!1)return NaN;let t=Number(e);return isNaN(t)?t:t<0?Math.ceil(t):Math.floor(t)}function K(e,t){k(2,arguments);let n=E(e).getTime(),o=L(t);return new Date(n+o)}function ee(e,t){k(2,arguments);let n=L(t);return K(e,-n)}var Oe=/(\w)\1*|''|'(''|^')+('|$)|./g,$e=/^'(^*?)'?$/,Ve=/''/g,We=/a-zA-Z/;function I(e,t){k(2,arguments);let n=E(e);if(!Q(n))throw new RangeError("Invalid time value");let o=X(n),i=ee(n,o),r=t.match(Oe);return r?r.map(c=>{if(c==="''")return"'";let a=c0;if(a==="'")return Ye(c);let f=Tea;if(f)return f(i,c);if(a.match(We))throw new RangeError("Format string contains an unescaped latin alphabet character "+a+"");return c}).join(""):""}function Ye(e){let t=e.match($e);return t?t1.replace(Ve,"'"):e}var De=(e,t,n=0,o=[])=>{leti,r=M("uninitialized"),u,c=M({ok:!0,value:t}),a=D(e,o);return F(()=>{(async()=>{let f=setTimeout(()=>r("pending"),n);try{let s=await a();if(s===void 0)return;c({ok:!0,value:s})}catch(s){c({ok:!1,value:s})}finally{clearTimeout(f),r("resolved")}})()},a,n,...o),u.ok?{result:u.value,state:i}:{result:u.value,state:"rejected"}};var Ae=e=>{let t=e.flatMap(({changes:i,created:r,userId:u})=>i.flatMap(c=>{let a=Be(c,u,r);return a?a:[]})),n=...new Set(t.map(({created:i})=>i)).sort();return{history:t.reduce((i,r)=>{if(r.type==="insert"){let c=new Map;c.set(r.created,{text:r.text,type:r.type,userId:r.userId});let a={id:r.id,snapshots:c};if(r.parentId==="_end")return...i,a;let f=i.findIndex(({id:s})=>s===r.parentId);return f<0?(console.warn("scrapbox-snapshot@0.1.0 The parent line the snapshot would insert before is not found. change: ",r),...i,a):...i.slice(0,f),a,...i.slice(f)}let u=i.findIndex(({id:c})=>c===r.id);return u<0?(console.warn("scrapbox-snapshot@0.1.0 The line data to be append the change is not found. change: ",r),i):(iu.snapshots.set(r.created,{text:r.type==="update"?r.text:void 0,type:r.type,userId:r.userId}),i)},[]),range:n}},Be=(e,t,n)=>{if("_insert"in e)return{type:"insert",id:e.lines.id,parentId:e._insert,text:e.lines.text,userId:t,created:n};if("_update"in e)return{type:"update",id:e._update,text:e.lines.text,userId:t,created:n};if("_delete"in e)return{type:"delete",id:e._delete,userId:t,created:n}};var Me=async(e,t)=>{let n=await fetch(/api/commits/${e}/${t}),{commits:o}=await n.json();return Ae(o)},Ee=async(e,t)=>{let n=await fetch(/api/page-snapshots/${e}/${t}),{snapshots:o}=await n.json(),i=new Map(o.map(({lines:u,created:c})=>c,u)),r=o.map(({created:u})=>u).sort();return{pages:i,range:r}};var He=e=>{let t=document.createElement("div");t.dataset.userscriptName="takker99/scrapbox-history-slider";let n=t.attachShadow({mode:"open"});return document.body.append(t),new Promise(o=>B(v(Ze,{getController:i=>o(i)}),n))},Ze=({getController:e})=>{lett,n=M(!0),o=D(()=>n(!1),[]),i=D(()=>n(!0),[]),r=D(()=>n(l=>!l),[]);F(()=>e({open:o,close:i,toggle:r}),e);let u=D(l=>{l.target instanceof HTMLElement&&l.target.id==="background"&&i()},[]),{state:c,result:a}=De(async()=>{if(t||scrapbox.Layout!=="page")return;letl,S=await Promise.all(Me(scrapbox.Project.name,scrapbox.Page.id),Ee(scrapbox.Project.name,scrapbox.Page.id));return{range:...S.range,...l.range,getSnapshot:h=>l.range.includes(h)?l.history.flatMap(({snapshots:g})=>{let y=g.get(h);if(y)return y.text===void 0?[]:y.text;let A=Math.max(......g.keys().filter(H=>H<h));if(A===h)return[];let x=g.get(A)?.text;return x===void 0?[]:x}):S.pages.get(h)?.map?.(g=>g.text)??[]}},{range:[],getSnapshot:()=>[]},1e3,t),f,s=M(0),m,d=M(0);F(()=>{if(c!=="resolved")return;let l=Math.max(0,a.range.length-1);s(l),d(l)},a);let _=D(l=>d(parseInt(l.currentTarget.value)),[]);return v(T,null,v("style",null,'.modal{position:fixed;inset:0;z-index:1050;background-color:#000c;display:flex;flex-direction:column;align-items:center;row-gap:10px;padding:10px}.closed{display:none}.modal>*{color:var(--page-text-color, #4a4a4a);background-color:var(--page-bg, #fefefe);border:2px solid var(--body-bg, #dcdde0);border-radius:4px;padding:5px;width:calc(var(--item-width, 100%) - 10px)}@media (min-width: 768px){.modal{padding:30px}}.controller{display:flex;flex-direction:row-reverse;gap:.2em}input{width:100%}time{white-space:nowrap}.viewer{overflow-y:scroll}pre{width:100%;font-family:var(--history-slider-pre-font, Menlo,Monaco,Consolas,"Courier New",monospace);word-break:break-all;word-wrap:break-word;white-space:pre-wrap}'),v("div",{id:"background",className:modal${t?" closed":""},onClick:u},v("div",{className:"controller"},v("button",{className:"close-button",onClick:i},"x"),c==="resolved"&&a.range.length===0&&v("span",{className:"not-found"},"no history found."),c!=="rejected"&&a.range.length>0&&v(T,null,v("input",{type:"range",max:f,min:"0",step:"1",value:m,title:I(new Date(a.rangem*1e3),"yyyy-MM-dd HH:mm:ss"),onInput:_}),v("time",{dateTime:I(new Date(a.rangem*1e3),"yyyy-MM-dd HH:mm:ss")},I(new Date(a.rangem*1e3),"yyyy-MM-dd HH:mm:ss")))),c!=="rejected"?v("div",{className:"viewer"},v("pre",null,a.getSnapshot(a.rangem).join(`