3 lines
8.6 KiB
JavaScript
3 lines
8.6 KiB
JavaScript
import{c as s,d as i,b as t,D as l,o as a,E as e,p as c,F as n,l as r,A as o,y as d,G as p,j as v,B as g,e as m,f as h,g as f,h as u,i as b,k as I,m as E}from"./chunk.82446879.js";import"./chunk.f5a3f321.js";import"./chunk.e8a2e241.js";import{a as y}from"./chunk.4b4ee497.js";import"./chunk.b01e898f.js";import{a as q}from"./chunk.fb378401.js";function F(s){let i,t,l,e,n,o,d,p,g,y,q,F,V,Q,k,w,$,D,W,j,Z,x,T,U,C,G,B,L,P,R,M,N,A,X,z,S,Y,H,J,O,K,_,ss,is,ts,ls,as,es,cs,ns,rs,os,ds,ps,vs,gs,ms;return{c(){i=m("div"),t=m("script"),e=a(),n=m("h5"),o=h("Click to drag tiles"),d=a(),p=m("div"),g=m("div"),y=m("div"),q=m("div"),F=m("article"),V=m("p"),Q=h("Vertical..."),k=a(),w=m("p"),$=h("Top tile"),D=a(),W=m("article"),j=m("p"),Z=h("...tiles"),x=a(),T=m("p"),U=h("Bottom tile"),C=a(),G=m("div"),B=m("article"),L=m("p"),P=h("Middle tile"),R=a(),M=m("p"),N=h("With an image"),A=a(),X=m("figure"),z=m("img"),Y=a(),H=m("div"),J=m("article"),O=m("p"),K=h("Wide tile"),_=a(),ss=m("p"),is=h("Aligned with the right tile"),ts=a(),ls=m("div"),as=a(),es=m("div"),cs=m("article"),ns=m("div"),rs=m("p"),os=h("Tall tile"),ds=a(),ps=m("p"),vs=h("With even more content"),gs=a(),ms=m("div"),this.h()},l(s){i=f(s,"DIV",{slot:!0});var l=u(i);t=f(l,"SCRIPT",{src:!0}),u(t).forEach(v),e=c(l),n=f(l,"H5",{class:!0});var a=u(n);o=b(a,"Click to drag tiles"),a.forEach(v),d=c(l),p=f(l,"DIV",{class:!0});var r=u(p);g=f(r,"DIV",{class:!0});var m=u(g);y=f(m,"DIV",{class:!0});var h=u(y);q=f(h,"DIV",{class:!0});var I=u(q);F=f(I,"ARTICLE",{class:!0});var E=u(F);V=f(E,"P",{class:!0});var S=u(V);Q=b(S,"Vertical..."),S.forEach(v),k=c(E),w=f(E,"P",{class:!0});var hs=u(w);$=b(hs,"Top tile"),hs.forEach(v),E.forEach(v),D=c(I),W=f(I,"ARTICLE",{class:!0});var fs=u(W);j=f(fs,"P",{class:!0});var us=u(j);Z=b(us,"...tiles"),us.forEach(v),x=c(fs),T=f(fs,"P",{class:!0});var bs=u(T);U=b(bs,"Bottom tile"),bs.forEach(v),fs.forEach(v),I.forEach(v),C=c(h),G=f(h,"DIV",{class:!0});var Is=u(G);B=f(Is,"ARTICLE",{class:!0});var Es=u(B);L=f(Es,"P",{class:!0});var ys=u(L);P=b(ys,"Middle tile"),ys.forEach(v),R=c(Es),M=f(Es,"P",{class:!0});var qs=u(M);N=b(qs,"With an image"),qs.forEach(v),A=c(Es),X=f(Es,"FIGURE",{class:!0});var Fs=u(X);z=f(Fs,"IMG",{src:!0,alt:!0}),Fs.forEach(v),Es.forEach(v),Is.forEach(v),h.forEach(v),Y=c(m),H=f(m,"DIV",{class:!0});var Vs=u(H);J=f(Vs,"ARTICLE",{class:!0});var Qs=u(J);O=f(Qs,"P",{class:!0});var ks=u(O);K=b(ks,"Wide tile"),ks.forEach(v),_=c(Qs),ss=f(Qs,"P",{class:!0});var ws=u(ss);is=b(ws,"Aligned with the right tile"),ws.forEach(v),ts=c(Qs),ls=f(Qs,"DIV",{class:!0}),u(ls).forEach(v),Qs.forEach(v),Vs.forEach(v),m.forEach(v),as=c(r),es=f(r,"DIV",{class:!0});var $s=u(es);cs=f($s,"ARTICLE",{class:!0});var Ds=u(cs);ns=f(Ds,"DIV",{class:!0});var Ws=u(ns);rs=f(Ws,"P",{class:!0});var js=u(rs);os=b(js,"Tall tile"),js.forEach(v),ds=c(Ws),ps=f(Ws,"P",{class:!0});var Zs=u(ps);vs=b(Zs,"With even more content"),Zs.forEach(v),gs=c(Ws),ms=f(Ws,"DIV",{class:!0}),u(ms).forEach(v),Ws.forEach(v),Ds.forEach(v),$s.forEach(v),r.forEach(v),l.forEach(v),this.h()},h(){t.src!==(l="https://unpkg.com/draggabilly@2/dist/draggabilly.pkgd.min.js")&&I(t,"src","https://unpkg.com/draggabilly@2/dist/draggabilly.pkgd.min.js"),I(n,"class","title"),I(V,"class","title"),I(w,"class","subtitle"),I(F,"class","tile is-child notification is-primary svelte-1q6iq0m"),I(j,"class","title"),I(T,"class","subtitle"),I(W,"class","tile is-child notification is-warning svelte-1q6iq0m"),I(q,"class","tile is-parent is-vertical svelte-1q6iq0m"),I(L,"class","title"),I(M,"class","subtitle"),z.src!==(S="https://bulma.io/images/placeholders/640x480.png")&&I(z,"src","https://bulma.io/images/placeholders/640x480.png"),I(z,"alt","profile"),I(X,"class","image is-4by3"),I(B,"class","tile is-child notification is-info svelte-1q6iq0m"),I(G,"class","tile is-parent svelte-1q6iq0m"),I(y,"class","tile svelte-1q6iq0m"),I(O,"class","title"),I(ss,"class","subtitle"),I(ls,"class","content"),I(J,"class","tile is-child notification is-danger svelte-1q6iq0m"),I(H,"class","tile is-parent svelte-1q6iq0m"),I(g,"class","tile is-vertical is-8 svelte-1q6iq0m"),I(rs,"class","title"),I(ps,"class","subtitle"),I(ms,"class","content"),I(ns,"class","content"),I(cs,"class","tile is-child notification is-success svelte-1q6iq0m"),I(es,"class","tile is-parent svelte-1q6iq0m"),I(p,"class","tile is-ancestor svelte-1q6iq0m"),I(i,"slot","preview")},m(s,l){r(s,i,l),E(i,t),E(i,e),E(i,n),E(n,o),E(i,d),E(i,p),E(p,g),E(g,y),E(y,q),E(q,F),E(F,V),E(V,Q),E(F,k),E(F,w),E(w,$),E(q,D),E(q,W),E(W,j),E(j,Z),E(W,x),E(W,T),E(T,U),E(y,C),E(y,G),E(G,B),E(B,L),E(L,P),E(B,R),E(B,M),E(M,N),E(B,A),E(B,X),E(X,z),E(g,Y),E(g,H),E(H,J),E(J,O),E(O,K),E(J,_),E(J,ss),E(ss,is),E(J,ts),E(J,ls),E(p,as),E(p,es),E(es,cs),E(cs,ns),E(ns,rs),E(rs,os),E(ns,ds),E(ns,ps),E(ps,vs),E(ns,gs),E(ns,ms)},d(s){s&&v(i)}}}function V(s){let i,t;const g=new y({props:{title:"Tiles",subtitle:"2D grids with flexbox"}}),m=new q({props:{code:'<script>\n import { onMount } from \'svelte\'\n\n waitForDraggabilly() {\n return new Promise((resolve, reject) => {\n const interval = setInterval({\n if (Draggabilly) {\n clearInterval(interval);\n resolve();\n }\n }, 100);\n });\n }\n\n onMount(async () => {\n const draggables = document.querySelectorAll(\'.tile.is-child\');\n\n await waitForDraggabilly();\n\n for (const elm of draggables) {\n let drag = new Draggabilly(elm, {\n containment: \'.tile.is-ancestor\',\n });\n }\n })\n<\/script>\n\n<style>\n.tile:not(.is-ancestor) {\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n:global(.is-dragging) {\n -webkit-transform: rotate(25deg);\n transform: rotate(25deg);\n cursor: move;\n}\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9yb3V0ZXMvYnVsbWEvdGlsZXMuc3ZlbHRlIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFDQTtFQUNFLHlCQUFpQjtLQUFqQixzQkFBaUI7TUFBakIscUJBQWlCO1VBQWpCLGlCQUFpQjtBQUNuQjs7QUFFQTtFQUNFLGdDQUF3QjtVQUF4Qix3QkFBd0I7RUFDeEIsWUFBWTtBQUNkIiwiZmlsZSI6InNyYy9yb3V0ZXMvYnVsbWEvdGlsZXMuc3ZlbHRlIiwic291cmNlc0NvbnRlbnQiOlsiXG4udGlsZTpub3QoLmlzLWFuY2VzdG9yKSB7XG4gIHVzZXItc2VsZWN0OiBub25lO1xufVxuXG46Z2xvYmFsKC5pcy1kcmFnZ2luZykge1xuICB0cmFuc2Zvcm06IHJvdGF0ZSgyNWRlZyk7XG4gIGN1cnNvcjogbW92ZTtcbn1cbiJdfQ== */</style>\n\n<script src="https://unpkg.com/draggabilly@2/dist/draggabilly.pkgd.min.js"><\/script>\n\n<div class="tile is-ancestor">\n <div class="tile is-vertical is-8">\n <div class="tile">\n <div class="tile is-parent is-vertical">\n <article class="tile is-child notification is-primary">\n <p class="title">Vertical...</p>\n <p class="subtitle">Top tile</p>\n </article>\n <article class="tile is-child notification is-warning">\n <p class="title">...tiles</p>\n <p class="subtitle">Bottom tile</p>\n </article>\n </div>\n <div class="tile is-parent">\n <article class="tile is-child notification is-info">\n <p class="title">Middle tile</p>\n <p class="subtitle">With an image</p>\n <figure class="image is-4by3">\n <img src="https://bulma.io/images/placeholders/640x480.png" />\n </figure>\n </article>\n </div>\n </div>\n <div class="tile is-parent">\n <article class="tile is-child notification is-danger">\n <p class="title">Wide tile</p>\n <p class="subtitle">Aligned with the right tile</p>\n <div class="content">\n \x3c!-- Content --\x3e\n </div>\n </article>\n </div>\n </div>\n <div class="tile is-parent">\n <article class="tile is-child notification is-success">\n <div class="content">\n <p class="title">Tall tile</p>\n <p class="subtitle">With even more content</p>\n <div class="content">\n \x3c!-- Content --\x3e\n </div>\n </div>\n </article>\n </div>\n</div>',$$slots:{preview:[F]},$$scope:{ctx:s}}});return{c(){l(g.$$.fragment),i=a(),l(m.$$.fragment)},l(s){e(g.$$.fragment,s),i=c(s),e(m.$$.fragment,s)},m(s,l){n(g,s,l),r(s,i,l),n(m,s,l),t=!0},p(s,[i]){const t={};1&i&&(t.$$scope={dirty:i,ctx:s}),m.$set(t)},i(s){t||(o(g.$$.fragment,s),o(m.$$.fragment,s),t=!0)},o(s){d(g.$$.fragment,s),d(m.$$.fragment,s),t=!1},d(s){p(g,s),s&&v(i),p(m,s)}}}function Q(s){return g(async()=>{const s=document.querySelectorAll(".tile.is-child");await async function(){return new Promise((s,i)=>{const t=setInterval(()=>{Draggabilly&&(clearInterval(t),s())},250)})}();for(const i of s){new Draggabilly(i,{containment:".tile.is-ancestor"})}}),[]}export default class extends s{constructor(s){super(),i(this,s,Q,V,t,{})}}
|
|
//# sourceMappingURL=tiles.32985126.js.map
|