Compare commits
3 commits
69ed057e4d
...
52f79a44c5
| Author | SHA1 | Date | |
|---|---|---|---|
| 52f79a44c5 | |||
| 076a6ca86a | |||
| f3ab06ffe9 |
10 changed files with 617 additions and 187 deletions
|
|
@ -86,6 +86,7 @@
|
|||
<script src="./../../../dist/xrfragment.plugin.matrix.js"></script> <!-- matrix connectivity -->
|
||||
<script src="./../../../dist/xrfragment.plugin.network.js"></script> <!-- matrix and webrtc chat/scene examples -->
|
||||
<script src="./../../../dist/xrfragment.plugin.editor.js"></script> <!-- basic editor example -->
|
||||
<script src="./../../../dist/xrfragment.plugin.remotestorage.js"></script><!-- basic remotestorage example -->
|
||||
<script src="./../../../dist/xrfragment.plugin.frontend.css.js"></script> <!-- basic menu interface css -->
|
||||
<script src="./../../../dist/xrfragment.plugin.frontend.js"></script> <!-- basic menu interface -->
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 33 KiB After Width: | Height: | Size: 94 KiB |
|
|
@ -2,109 +2,261 @@
|
|||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="42.629139mm"
|
||||
height="13.661606mm"
|
||||
width="128.27411mm"
|
||||
height="145.65482mm"
|
||||
viewBox="0 0 128.27411 145.65482"
|
||||
version="1.1"
|
||||
viewBox="0 0 42.629139 13.661605"
|
||||
id="svg119"
|
||||
id="svg5"
|
||||
xml:space="preserve"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/">
|
||||
<defs
|
||||
id="defs123">
|
||||
<linearGradient
|
||||
id="linearGradient6742">
|
||||
<stop
|
||||
xmlns:svg="http://www.w3.org/2000/svg"><defs
|
||||
id="defs2"><linearGradient
|
||||
id="linearGradient12286"><stop
|
||||
style="stop-color:#ea0bfe;stop-opacity:0.11569338;"
|
||||
offset="0"
|
||||
id="stop12282" /><stop
|
||||
style="stop-color:#ffffff;stop-opacity:0;"
|
||||
offset="1"
|
||||
id="stop12284" /></linearGradient><linearGradient
|
||||
id="linearGradient12159"><stop
|
||||
style="stop-color:#fe83ff;stop-opacity:0.35045233;"
|
||||
offset="0"
|
||||
id="stop12155" /><stop
|
||||
style="stop-color:#3c9cff;stop-opacity:0.32712477;"
|
||||
offset="1"
|
||||
id="stop12157" /></linearGradient><linearGradient
|
||||
id="linearGradient12153"><stop
|
||||
style="stop-color:#fe83ff;stop-opacity:0.29342434;"
|
||||
offset="0"
|
||||
id="stop12149" /><stop
|
||||
style="stop-color:#3c9cff;stop-opacity:0.31577286;"
|
||||
offset="1"
|
||||
id="stop12151" /></linearGradient><linearGradient
|
||||
id="linearGradient12139"><stop
|
||||
style="stop-color:#ea0bfe;stop-opacity:0.50826901;"
|
||||
offset="0"
|
||||
id="stop12135" /><stop
|
||||
style="stop-color:#ffffff;stop-opacity:0;"
|
||||
offset="1"
|
||||
id="stop12137" /></linearGradient><linearGradient
|
||||
id="linearGradient12102"><stop
|
||||
style="stop-color:#fe83ff;stop-opacity:1;"
|
||||
offset="0"
|
||||
id="stop12098" /><stop
|
||||
style="stop-color:#3c9cff;stop-opacity:0.81848603;"
|
||||
offset="1"
|
||||
id="stop12100" /></linearGradient><linearGradient
|
||||
id="linearGradient7688"><stop
|
||||
style="stop-color:#ffffff;stop-opacity:1;"
|
||||
offset="0"
|
||||
id="stop7684" /><stop
|
||||
style="stop-color:#ff13f3;stop-opacity:0;"
|
||||
offset="1"
|
||||
id="stop7686" /></linearGradient><linearGradient
|
||||
id="linearGradient6742"><stop
|
||||
style="stop-color:#276fff;stop-opacity:1"
|
||||
offset="0"
|
||||
id="stop6738" />
|
||||
<stop
|
||||
id="stop6738" /><stop
|
||||
style="stop-color:#ff16bc;stop-opacity:1"
|
||||
offset="1"
|
||||
id="stop6740" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="linearGradient3277">
|
||||
<stop
|
||||
style="stop-color:#ff0000;stop-opacity:1;"
|
||||
offset="0"
|
||||
id="stop3549" />
|
||||
<stop
|
||||
style="stop-color:#008000;stop-opacity:0;"
|
||||
offset="1"
|
||||
id="stop3551" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
xlink:href="#linearGradient6742"
|
||||
id="linearGradient8549"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="matrix(1,0,0,1.0048958,-0.17846026,-1.1451133)"
|
||||
x1="267.56372"
|
||||
y1="88.961716"
|
||||
x2="324.44867"
|
||||
y2="88.961716" />
|
||||
<linearGradient
|
||||
id="stop6740" /></linearGradient><linearGradient
|
||||
xlink:href="#linearGradient6742"
|
||||
id="linearGradient8637"
|
||||
x1="154.78049"
|
||||
y1="24.048252"
|
||||
x2="273.12695"
|
||||
y2="24.048252"
|
||||
gradientUnits="userSpaceOnUse" />
|
||||
<linearGradient
|
||||
xlink:href="#linearGradient6742"
|
||||
id="linearGradient14122"
|
||||
x1="69.387871"
|
||||
y1="7.2661252"
|
||||
x2="78.465157"
|
||||
y2="7.2661252"
|
||||
gradientUnits="userSpaceOnUse" /><linearGradient
|
||||
xlink:href="#linearGradient7688"
|
||||
id="linearGradient7692"
|
||||
x1="115.42191"
|
||||
y1="-2.709012"
|
||||
x2="117.16759"
|
||||
y2="131.87457"
|
||||
gradientUnits="userSpaceOnUse" /><linearGradient
|
||||
xlink:href="#linearGradient12102"
|
||||
id="linearGradient12104"
|
||||
x1="54.029213"
|
||||
y1="71.733955"
|
||||
x2="176.85757"
|
||||
y2="71.733955"
|
||||
gradientUnits="userSpaceOnUse" /><linearGradient
|
||||
xlink:href="#linearGradient12159"
|
||||
id="linearGradient12108"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="translate(-40.205775,1.0888182)" />
|
||||
</defs>
|
||||
<metadata
|
||||
id="metadata97">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
x1="54.029213"
|
||||
y1="71.733955"
|
||||
x2="176.85757"
|
||||
y2="71.733955"
|
||||
gradientTransform="translate(0,4.7625002)" /><linearGradient
|
||||
xlink:href="#linearGradient12153"
|
||||
id="linearGradient12112"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="translate(0,19.579173)"
|
||||
x1="54.029213"
|
||||
y1="71.733955"
|
||||
x2="176.85757"
|
||||
y2="71.733955" /><linearGradient
|
||||
xlink:href="#linearGradient12286"
|
||||
id="linearGradient12141"
|
||||
x1="137.33427"
|
||||
y1="88.766113"
|
||||
x2="177.37935"
|
||||
y2="88.766113"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="matrix(1.2850723,0,0,1.2367478,-50.791853,-16.999519)" /><linearGradient
|
||||
xlink:href="#linearGradient12139"
|
||||
id="linearGradient12239"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
x1="137.33427"
|
||||
y1="88.766113"
|
||||
x2="177.37935"
|
||||
y2="88.766113"
|
||||
gradientTransform="matrix(-1.2669282,0,0,1.2603766,278.3952,-19.18513)" /><filter
|
||||
style="color-interpolation-filters:sRGB"
|
||||
id="filter12743"
|
||||
x="-0.079006463"
|
||||
y="-0.2479955"
|
||||
width="1.1580434"
|
||||
height="1.4959902"><feFlood
|
||||
flood-opacity="1"
|
||||
flood-color="rgb(204,26,255)"
|
||||
result="flood"
|
||||
id="feFlood12733" /><feComposite
|
||||
in="flood"
|
||||
in2="SourceGraphic"
|
||||
operator="in"
|
||||
result="composite1"
|
||||
id="feComposite12735" /><feGaussianBlur
|
||||
in="composite1"
|
||||
stdDeviation="1.1"
|
||||
result="blur"
|
||||
id="feGaussianBlur12737" /><feOffset
|
||||
dx="0"
|
||||
dy="0"
|
||||
result="offset"
|
||||
id="feOffset12739" /><feComposite
|
||||
in="SourceGraphic"
|
||||
in2="offset"
|
||||
operator="over"
|
||||
result="composite2"
|
||||
id="feComposite12741" /></filter><filter
|
||||
style="color-interpolation-filters:sRGB"
|
||||
id="filter13745"
|
||||
x="-0.13709185"
|
||||
y="-1.2090968"
|
||||
width="1.2741838"
|
||||
height="3.4181938"><feFlood
|
||||
flood-opacity="1"
|
||||
flood-color="rgb(26,135,255)"
|
||||
result="flood"
|
||||
id="feFlood13735" /><feComposite
|
||||
in="flood"
|
||||
in2="SourceGraphic"
|
||||
operator="in"
|
||||
result="composite1"
|
||||
id="feComposite13737" /><feGaussianBlur
|
||||
in="composite1"
|
||||
stdDeviation="4.48865"
|
||||
result="blur"
|
||||
id="feGaussianBlur13739" /><feOffset
|
||||
dx="0"
|
||||
dy="0"
|
||||
result="offset"
|
||||
id="feOffset13741" /><feComposite
|
||||
in="SourceGraphic"
|
||||
in2="offset"
|
||||
operator="over"
|
||||
result="composite2"
|
||||
id="feComposite13743" /></filter><linearGradient
|
||||
xlink:href="#linearGradient12286"
|
||||
id="linearGradient14475"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="matrix(1.2850723,0,0,1.2367478,-50.791853,-16.999519)"
|
||||
x1="137.33427"
|
||||
y1="88.766113"
|
||||
x2="177.37935"
|
||||
y2="88.766113" /></defs><g
|
||||
id="layer1"
|
||||
transform="translate(-51.358538,-4.8451999)"><path
|
||||
style="fill:#000000;fill-opacity:1;stroke:#ffffff;stroke-width:2.3;stroke-dasharray:none"
|
||||
id="path1638-3"
|
||||
d="m 78.134029,228.41853 60.622131,-35.00021 60.62214,35.0002 0,70.00042 -60.62213,35.0002 -60.62214,-35.0002 z"
|
||||
transform="matrix(1.0382846,0,0,1.0210168,-28.572793,-191.28234)" /><g
|
||||
id="g12126"><path
|
||||
style="fill:none;fill-opacity:1;stroke:url(#linearGradient12104);stroke-width:0.5;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="M 54.029427,71.745371 176.85736,71.722537"
|
||||
id="path12042" /><path
|
||||
style="fill:none;fill-opacity:1;stroke:url(#linearGradient12108);stroke-width:0.6;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="M 54.029427,76.507874 176.85736,76.48504"
|
||||
id="path12106" /><path
|
||||
style="fill:none;fill-opacity:1;stroke:url(#linearGradient12112);stroke-width:0.8;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="M 54.029427,91.32455 176.85736,91.301716"
|
||||
id="path12110" /><path
|
||||
style="fill:url(#linearGradient12239);fill-opacity:1;stroke:none;stroke-width:2.416;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="M 104.40252,71.315371 53.668551,108.90527 v 5.16648 z"
|
||||
id="path12133-5" /><path
|
||||
style="fill:url(#linearGradient14475);fill-opacity:1;stroke:none;stroke-width:2.41042;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 125.69256,71.804339 51.46081,36.885251 v 5.06963 z"
|
||||
id="path12133" /><path
|
||||
style="fill:url(#linearGradient12141);fill-opacity:1;stroke:none;stroke-width:2.41042;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 115.37951,70.94784 5.14781,74.3852 c 0,0 -4.42958,5.94658 -10.22727,-0.9757 z"
|
||||
id="path12280" /></g><path
|
||||
style="fill:url(#linearGradient7692);fill-opacity:1;stroke:none;stroke-width:2.3;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="M 53.906377,71.659657 H 177.09207 l 0.24519,40.701533 -61.93861,35.18517 -61.54407,-35.3442 z"
|
||||
id="path7625" /><g
|
||||
id="g4494"
|
||||
transform="matrix(2.7825702,0,0,3.2095953,58.857189,44.497537)"
|
||||
style="filter:url(#filter12743)"><g
|
||||
transform="translate(-47.668322,-15.505759)"
|
||||
id="g113">
|
||||
<g
|
||||
id="g113"><g
|
||||
transform="scale(0.26458)"
|
||||
style="font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal"
|
||||
aria-label="SEARXR"
|
||||
id="g111">
|
||||
<path
|
||||
id="g111"><path
|
||||
id="path105"
|
||||
style="font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;opacity:1;fill:#f7f7f7;fill-opacity:0.996078;stroke:url(#linearGradient8637);stroke-width:3.77953;stroke-miterlimit:4;stroke-dasharray:none"
|
||||
d="m 158.51953,0.12890625 c -1.12928,0.0104375 -2.33343,0.0380832 -3.58789,0.09375 -0.30457,-0.13399831 -0.0547,13.73632775 -0.0547,13.73632775 2.81897,0.06348 6.79437,-0.315067 8.33985,1.041016 3.97475,3.093961 3.19147,2.418039 5.77734,5.003906 2.58587,2.585868 5.23601,5.171945 7.95117,7.757813 l -21.2931,18.782442 c -1.29339,1.292984 -2.45529,1.570562 8.42537,1.302881 9.59316,-0.08935 8.19237,0.720755 10.73745,-1.137203 7.83955,-6.121602 9.61287,-7.470425 12.32804,-10.185491 3.0599,2.434819 5.75483,4.092804 10.43494,7.218213 0,0 4.56752,2.32698 9.03546,3.466611 5.1614,0.869711 19.0651,0.856505 19.62872,0.659979 h 4.7207 c 0,0 0.0977,-8.957996 0.16992,-16.066407 0.12771,-10.909788 2.17195,-13.091574 4.75781,-15.80664 2.71507,-2.715066 6.01188,-2.072266 9.89063,-2.072266 h 21.3457 V 0.15429688 h -21.3457 c -7.6279,0 -14.15766,2.71429962 -19.58789,8.14453122 -5.30093,5.3009329 -7.95117,11.7666269 -7.95117,19.3945309 v 9.097657 c -2.05016,0.03977 -4.12643,0.0029 -5.92969,-0.160157 -1.85798,-0.167898 -4.68413,-1.320736 -8.3076,-3.088808 0,0 -4.88583,-3.065166 -7.4717,-5.780332 l 15.00318,-15.777875 c 1.25994,-1.325002 3.90091,-4.6189385 8.52807,-9.5834534 1.63566,-1.75491056 0.84973,-2.31134101 -4.04101,-2.19531248 -2.41247,0.00862 -6.69149,0.0175781 -8.63086,0.0175781 -1.81008,0 -3.42548,0.71063042 -4.84766,2.13281258 L 186.83594,18.064453 c -2.71507,-2.585867 -5.36541,-5.171945 -7.95117,-7.757812 l -7.95118,-7.9511722 c -1.42218,-1.42217213 -3.03953,-2.13281255 -4.84961,-2.13281255 -1.45453,0 -4.17661,-0.12506257 -7.56445,-0.09375 z"
|
||||
transform="matrix(1.0000126,0,0,1.0000126,27.273414,60.371154)" />
|
||||
<path
|
||||
transform="matrix(1.0000126,0,0,1.0000126,27.273414,60.371154)" /><path
|
||||
d="m 267.38547,88.252296 c 0,-7.665647 2.6505,-14.161997 7.9515,-19.48895 5.4303,-5.456886 11.96,-8.185379 19.588,-8.185379 h 37.34533 v 13.837416 h -37.34533 c -3.8788,0 -7.1758,1.364246 -9.8909,4.092639 -2.5859,2.728493 -3.8788,5.976618 -3.8788,9.744475 v 19.634563 h -13.77 z"
|
||||
style="font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;fill:#f7f7f7;fill-opacity:0.997356;stroke:#54438e;stroke-width:3.78882;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="path103" />
|
||||
<rect
|
||||
id="path103" /><rect
|
||||
style="fill:#f7f7f7;fill-opacity:0.996078;stroke:none;stroke-width:3.77958"
|
||||
id="rect1105"
|
||||
width="29.440615"
|
||||
height="9.8188734"
|
||||
x="269.93423"
|
||||
y="62.516171" />
|
||||
</g>
|
||||
</g>
|
||||
<path
|
||||
y="62.516171" /></g></g><path
|
||||
d="m 40.243755,6.8720423 -9.0863,-0.04493 c 0,0 -1.8872,0.04494 -1.8423,1.5727 0.04493,1.5277999 1.8772,1.4827999 1.8772,1.4827999 h 9.0514 z"
|
||||
stroke="#000000"
|
||||
stroke-width="0.26458px"
|
||||
id="path117"
|
||||
style="fill:#fefefe;fill-opacity:1;stroke:#54438e;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
|
||||
</svg>
|
||||
style="fill:#fefefe;fill-opacity:1;stroke:#54438e;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /></g><text
|
||||
xml:space="preserve"
|
||||
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:19.7556px;font-family:Montserrat;-inkscape-font-specification:'Montserrat Bold';text-align:center;text-anchor:middle;fill:#ffffff;stroke:#ffffff;stroke-width:0.5;stroke-dasharray:none"
|
||||
x="69.809654"
|
||||
y="107.18471"
|
||||
id="text1004"><tspan
|
||||
id="tspan1002"
|
||||
style="font-style:normal;font-variant:normal;font-weight:100;font-stretch:normal;font-size:19.7556px;font-family:Montserrat;-inkscape-font-specification:'Montserrat Thin';stroke-width:0.5;stroke-dasharray:none"
|
||||
x="69.809654"
|
||||
y="107.18471">[</tspan></text><text
|
||||
xml:space="preserve"
|
||||
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:19.7556px;font-family:Montserrat;-inkscape-font-specification:'Montserrat Bold';text-align:center;text-anchor:middle;fill:#ffffff;stroke:#ffffff;stroke-width:0.5;stroke-dasharray:none"
|
||||
x="160.00148"
|
||||
y="107.33738"
|
||||
id="text1004-3"><tspan
|
||||
id="tspan1002-6"
|
||||
style="font-style:normal;font-variant:normal;font-weight:100;font-stretch:normal;font-size:19.7556px;font-family:Montserrat;-inkscape-font-specification:'Montserrat Thin';stroke-width:0.5;stroke-dasharray:none"
|
||||
x="160.00148"
|
||||
y="107.33738">]</tspan></text><text
|
||||
xml:space="preserve"
|
||||
style="font-weight:100;font-size:9.87778px;font-family:Montserrat;-inkscape-font-specification:'Montserrat Thin';text-align:center;letter-spacing:0.529167px;writing-mode:tb-rl;text-orientation:upright;text-anchor:middle;fill:#020202;fill-opacity:1;stroke:#000000;stroke-width:2.3;stroke-dasharray:none;stroke-opacity:1;filter:url(#filter13745)"
|
||||
x="81.083984"
|
||||
y="95.681953"
|
||||
id="text3268"><tspan
|
||||
id="tspan3266"
|
||||
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:9.87778px;font-family:Montserrat;-inkscape-font-specification:'Montserrat Bold';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2.3;stroke-opacity:1"
|
||||
x="81.083984"
|
||||
y="95.681953">XR Fragments</tspan></text></g></svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 5.5 KiB After Width: | Height: | Size: 14 KiB |
25
index.html
25
index.html
File diff suppressed because one or more lines are too long
3
make
3
make
|
|
@ -123,10 +123,11 @@ build(){
|
|||
cp src/3rd/js/plugin/frontend/\$editor.js dist/xrfragment.plugin.editor.js
|
||||
|
||||
cp src/3rd/js/plugin/frontend/css.js dist/xrfragment.plugin.frontend.css.js
|
||||
jscat src/3rd/js/plugin/frontend/{snackbar,accessibility,\$menu,frontend,chatcommand/*,joystick,tab-to-href,remotestorage}.js > dist/xrfragment.plugin.frontend.js
|
||||
jscat src/3rd/js/plugin/frontend/{snackbar,accessibility,\$menu,\$files,frontend,chatcommand/*,joystick,tab-to-href}.js > dist/xrfragment.plugin.frontend.js
|
||||
|
||||
jscat src/3rd/js/plugin/matrix/{matrix-crdt,matrix}.js > dist/xrfragment.plugin.matrix.js
|
||||
jscat src/3rd/js/plugin/p2p/{trystero-torrent.min,trystero}.js > dist/xrfragment.plugin.p2p.js
|
||||
jscat src/3rd/js/plugin/remotestorage/*.js > dist/xrfragment.plugin.remotestorage.js
|
||||
|
||||
# all in one
|
||||
cat dist/aframe.min.js dist/aframe-blink-controls.min.js dist/xrfragment.aframe.js > dist/xrfragment.aframe.all.js
|
||||
|
|
|
|||
113
src/3rd/js/plugin/frontend/$files.js
Normal file
113
src/3rd/js/plugin/frontend/$files.js
Normal file
|
|
@ -0,0 +1,113 @@
|
|||
|
||||
// reactive component for displaying the menu
|
||||
filesComponent = (el) => new Proxy({
|
||||
|
||||
html: (data) => `
|
||||
<style type="text/css">
|
||||
#messages .msg.ui, #messages .msg.ui #files div {
|
||||
border:none;
|
||||
padding:0;
|
||||
margin:0;
|
||||
box-shadow:none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="ui envelope">
|
||||
<div class="msg ui">
|
||||
<div>
|
||||
<div id="files">
|
||||
<i class="gg-close-o" id="close" onclick="$files.visible = false"></i>
|
||||
<br>
|
||||
<div class="tab-frame">
|
||||
${data.tabs.map( (t) =>
|
||||
` <input type="radio" name="tab" id="${t.id}" ${t.id == "localFiles" ? 'checked="checked"' : '' }>
|
||||
<label for="${t.id}">${t.name}</label>
|
||||
`
|
||||
).join('')
|
||||
}
|
||||
<br><br>
|
||||
<div class="tab">
|
||||
<div id="localFilesTab">
|
||||
<button id="uploadFile" ><i class="gg-software-upload"></i> upload</button>
|
||||
<button id="downloadfile"><i class="gg-software-download"></i> download</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
|
||||
tabs: [
|
||||
{name: "local files", id: "localFiles"}
|
||||
],
|
||||
|
||||
show: false,
|
||||
$localFiles: $localFiles = el.querySelector("#localFiles"),
|
||||
|
||||
toggle(state){
|
||||
this.show = state !== undefined ? state : !this.show
|
||||
},
|
||||
|
||||
init(opts){
|
||||
this.decorateFileButton()
|
||||
// create HTML element
|
||||
el.innerHTML = this.html(this)
|
||||
for( i in this ) el[i] = this[i]
|
||||
this.toggle(this.show) // trigger visibility
|
||||
document.querySelector("#messages").appendChild(el);
|
||||
// setup input listeners
|
||||
(['click']).map( (e) => el.addEventListener(e, (ev) => this[e] && this[e](ev.target.id,ev) ) )
|
||||
|
||||
// signal ready
|
||||
setTimeout( () => {
|
||||
document.dispatchEvent( new CustomEvent("$files:ready", {detail: {$files:this,xrf}}) )
|
||||
},100)
|
||||
return this
|
||||
},
|
||||
|
||||
decorateFileButton: function(){
|
||||
// rename button
|
||||
document.querySelector("#load").setAttribute("value","3D file")
|
||||
// decorate fileLoaders
|
||||
window.frontend.fileLoaders = ( (fileLoaders) => {
|
||||
this.fileLoader = fileLoaders
|
||||
return () => this.toggle()
|
||||
})( window.frontend.fileLoaders )
|
||||
},
|
||||
|
||||
click(id,e){
|
||||
switch(id){
|
||||
case "icon":
|
||||
case "more": return this.toggle(); break;
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
|
||||
get(me,k,v){ return me[k] },
|
||||
|
||||
set(me,k,v){
|
||||
me[k] = v
|
||||
switch( k ){
|
||||
case "show":{
|
||||
el.style.display = v ? '' : 'none';
|
||||
if( v ) $chat.visible = true
|
||||
break;
|
||||
}
|
||||
case "tabs":{
|
||||
el.innerHTML = $files.html($files)
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
renderButtons: (data) => `${data.buttons.join('')}`
|
||||
|
||||
})
|
||||
|
||||
// reactify component!
|
||||
document.addEventListener('$chat:ready', (e) => {
|
||||
window.$files = filesComponent( document.createElement('div') ).init(e.detail)
|
||||
})
|
||||
|
|
@ -740,6 +740,7 @@ document.head.innerHTML += `
|
|||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-right:5px;
|
||||
transform: scale(var(--ggs,1)) translate(3px,3px);
|
||||
width: 16px;
|
||||
height: 6px;
|
||||
|
|
@ -847,5 +848,47 @@ document.head.innerHTML += `
|
|||
left: -11px;
|
||||
top: -2px
|
||||
}
|
||||
|
||||
.gg-software-upload {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-right:5px;
|
||||
transform: scale(var(--ggs, 1));
|
||||
width: 16px;
|
||||
height: 6px;
|
||||
border: 2px solid;
|
||||
border-top: 0;
|
||||
border-bottom-left-radius: 2px;
|
||||
border-bottom-right-radius: 2px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.gg-software-upload::after {
|
||||
content: "";
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-left: 2px solid;
|
||||
border-top: 2px solid;
|
||||
transform: rotate(45deg);
|
||||
left: 2px;
|
||||
bottom: 4px;
|
||||
}
|
||||
.gg-software-upload::before {
|
||||
content: "";
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
border-radius: 3px;
|
||||
width: 2px;
|
||||
height: 10px;
|
||||
background: currentColor;
|
||||
left: 5px;
|
||||
bottom: 3px;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
`
|
||||
|
|
|
|||
94
src/3rd/js/plugin/frontend/filedialog.js
Normal file
94
src/3rd/js/plugin/frontend/filedialog.js
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
|
||||
// reactive component for displaying the menu
|
||||
filesComponent = (el) => new Proxy({
|
||||
|
||||
html: `
|
||||
<div class="ui envelope">
|
||||
<div class="msg ui">
|
||||
<div>
|
||||
<div id="files">
|
||||
<i class="gg-close-o" id="close" onclick="$files.visible = false"></i>
|
||||
<br>
|
||||
<div class="tab-frame">
|
||||
<input type="radio" name="tab" id="login" checked="">
|
||||
<label for="login">local files</label>
|
||||
|
||||
<div class="tab">
|
||||
<div id="localFiles"><div><div>
|
||||
<a class="badge ruler">Peer2Peer</a><br>
|
||||
<table>
|
||||
<tbody><tr>
|
||||
<td>nickname</td>
|
||||
<td>
|
||||
<input type="text" id="nickname" placeholder="your nickname" maxlength="18" onkeydown="trystero.nickname = this.value">
|
||||
</td>
|
||||
</tr>
|
||||
</tbody></table>
|
||||
</div>
|
||||
</div></div>
|
||||
<table>
|
||||
<tbody><tr>
|
||||
<td></td>
|
||||
<td>
|
||||
<button id="connect" onclick="network.connect( $connections )">📡 Connect!</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
|
||||
collapsed: false,
|
||||
$localFiles: $localFiles = el.querySelector("#localFiles"),
|
||||
|
||||
toggle(state){
|
||||
this.collapsed = state !== undefined ? state : !this.collapsed
|
||||
},
|
||||
|
||||
init(opts){
|
||||
el.innerHTML = this.html
|
||||
document.querySelector("#messages").appendChild(el);
|
||||
(['click']).map( (e) => el.addEventListener(e, (ev) => this[e] && this[e](ev.target.id,ev) ) )
|
||||
setTimeout( () => {
|
||||
document.dispatchEvent( new CustomEvent("$files:ready", {detail: {$files:this,xrf}}) )
|
||||
},100)
|
||||
return this
|
||||
},
|
||||
|
||||
click(id,e){
|
||||
switch(id){
|
||||
case "icon":
|
||||
case "more": return this.toggle(); break;
|
||||
}
|
||||
this.toggle(false)
|
||||
}
|
||||
},
|
||||
{
|
||||
|
||||
get(me,k,v){ return me[k] },
|
||||
|
||||
set(me,k,v){
|
||||
me[k] = v
|
||||
switch( k ){
|
||||
case "buttons": el.querySelector("#buttons").innerHTML = this.renderButtons(me);
|
||||
document.dispatchEvent( new CustomEvent("$menu:buttons:render", {detail: el.querySelector('.menu') }) )
|
||||
break;
|
||||
case "collapsed":
|
||||
el.querySelector("#buttons").style.display = me.collapsed ? 'block' : 'none'
|
||||
frontend.emit('$menu:collapse', v)
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
renderButtons: (data) => `${data.buttons.join('')}`
|
||||
|
||||
})
|
||||
|
||||
// reactify component!
|
||||
document.addEventListener('frontend:ready', (e) => {
|
||||
window.$files = filesComponent( document.createElement('div') ).init(e.detail)
|
||||
})
|
||||
|
|
@ -1,84 +0,0 @@
|
|||
// this demonstrates the remotestorage aframe component
|
||||
|
||||
|
||||
document.addEventListener('frontend:ready', (e) => {
|
||||
|
||||
function loadScript(cb){
|
||||
let el = document.createElement("script")
|
||||
el.setAttribute("defer","")
|
||||
el.src = "https://unpkg.com/remotestoragejs@2.0.0-beta.7/release/remotestorage.js"
|
||||
document.head.appendChild(el)
|
||||
|
||||
el = document.createElement("script")
|
||||
el.src = "https://unpkg.com/remotestorage-widget@1.6.0/build/widget.js"
|
||||
el.addEventListener('load', () => setTimeout(cb,2000) )
|
||||
document.head.appendChild(el)
|
||||
}
|
||||
|
||||
function addStyles(){
|
||||
let el = document.createElement('style')
|
||||
el.type = 'text/css'
|
||||
el.innerHTML = `
|
||||
|
||||
#remotestorage-widget {
|
||||
left: 0;
|
||||
position: fixed;
|
||||
display:block;
|
||||
}
|
||||
body.menu #remotestorage-widget{
|
||||
top: 50px;
|
||||
}
|
||||
body #remotestorage-widget {
|
||||
top: 0px;
|
||||
}
|
||||
`
|
||||
document.head.appendChild(el)
|
||||
}
|
||||
|
||||
function addButtons(){
|
||||
const $widget = document.querySelector(".rs-widget")
|
||||
debugger
|
||||
|
||||
const $btnLoad = document.createElement('button')
|
||||
const $btnSave = document.createElement('button')
|
||||
$btnLoad.innerText = 'load'
|
||||
$btnSave.innerText = 'save'
|
||||
$widget.appendChild($btnLoad)
|
||||
$widget.appendChild($btnSave)
|
||||
}
|
||||
|
||||
function init(){
|
||||
let apis = {}
|
||||
window.remoteStorage = new RemoteStorage({logging: true })
|
||||
if( Object.keys(apis).length ) remoteStorage.setApiKeys(apis)
|
||||
|
||||
remoteStorage.on('connected', (e) => { console.log("connected") } )
|
||||
//remoteStorage.on('network-offline', (e) => this.el.sceneEl.emit('remoteStorage.network-offline',e) )
|
||||
//remoteStorage.on('network-online', (e) => this.el.sceneEl.emit('remoteStorage.network-online',e) )
|
||||
//remoteStorage.on('error', (e) => this.el.sceneEl.emit('remoteStorage.error',e) )
|
||||
//remoteStorage.on('ready', (e) => { } )
|
||||
|
||||
remoteStorage.access.claim( `webxr`, 'rw'); // our data dir
|
||||
remoteStorage.caching.enable( `/webxr/` ) // local-first, remotestorage-second
|
||||
|
||||
}
|
||||
|
||||
addStyles()
|
||||
loadScript(init)
|
||||
|
||||
// decorate fileLoaders
|
||||
window.frontend.fileLoaders = (function(fileLoaders){
|
||||
return function(){
|
||||
// show rs widgets
|
||||
if( !document.querySelector("#remotestorage-widget") ){
|
||||
let opts = {}
|
||||
opts.modalBackdrop = false
|
||||
widget = new window.Widget(window.remoteStorage, opts)
|
||||
widget.attach();
|
||||
addButtons()
|
||||
}
|
||||
|
||||
//fileLoaders()
|
||||
}
|
||||
})( window.frontend.fileLoaders )
|
||||
})
|
||||
105
src/3rd/js/plugin/remotestorage/remotestorage.js
Normal file
105
src/3rd/js/plugin/remotestorage/remotestorage.js
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
// this demonstrates the remotestorage aframe component
|
||||
|
||||
// reactive component for displaying the menu
|
||||
remoteStorageComponent = (el) => new Proxy({
|
||||
|
||||
html: `
|
||||
<style type="text/css">
|
||||
body div#remotestorage-widget .rs-button{
|
||||
background: #AAA;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="remoteFilesTab">
|
||||
<div id="rswidget"></div>
|
||||
<br><br>
|
||||
<button id="uploadFile" ><i class="gg-software-upload"></i> upload</button>
|
||||
<button id="downloadfile"><i class="gg-software-download"></i> download</button>
|
||||
</div>
|
||||
`,
|
||||
|
||||
show: false,
|
||||
|
||||
toggle(state){
|
||||
this.show = state !== undefined ? state : !this.show
|
||||
},
|
||||
|
||||
init(opts){
|
||||
// create HTML element
|
||||
$files.tabs = $files.tabs.concat({id:"remoteFiles", name: "remote files"})
|
||||
el.innerHTML = this.html
|
||||
el.className = "tab"
|
||||
this.toggle(this.show) // trigger visibility
|
||||
document.querySelector("#files .tab-frame").appendChild(el);
|
||||
|
||||
// setup input listeners
|
||||
(['click']).map( (e) => el.addEventListener(e, (ev) => typeof this[e] == 'function' && this[e](ev.target.id,ev) ) )
|
||||
|
||||
// signal ready
|
||||
setTimeout( () => {
|
||||
document.dispatchEvent( new CustomEvent("remotestorage:ready", {detail: {$files:this,xrf}}) )
|
||||
},100)
|
||||
|
||||
this.loadScript( () => this.initRemoteStorage() )
|
||||
|
||||
return this
|
||||
},
|
||||
|
||||
loadScript(cb){
|
||||
let el = document.createElement("script")
|
||||
el.setAttribute("defer","")
|
||||
el.src = "https://unpkg.com/remotestoragejs@2.0.0-beta.7/release/remotestorage.js"
|
||||
document.head.appendChild(el)
|
||||
|
||||
el = document.createElement("script")
|
||||
el.src = "https://unpkg.com/remotestorage-widget@1.6.0/build/widget.js"
|
||||
el.addEventListener('load', () => setTimeout(cb,2000) )
|
||||
document.head.appendChild(el)
|
||||
},
|
||||
|
||||
initRemoteStorage(){
|
||||
let apis = {
|
||||
dropbox: "4jc8nx1lbarp472"
|
||||
}
|
||||
window.remoteStorage = new RemoteStorage({logging: true })
|
||||
if( Object.keys(apis).length ) remoteStorage.setApiKeys(apis)
|
||||
|
||||
remoteStorage.on('connected', (e) => { console.log("connected") } )
|
||||
//remoteStorage.on('network-offline', (e) => this.el.sceneEl.emit('remoteStorage.network-offline',e) )
|
||||
//remoteStorage.on('network-online', (e) => this.el.sceneEl.emit('remoteStorage.network-online',e) )
|
||||
//remoteStorage.on('error', (e) => this.el.sceneEl.emit('remoteStorage.error',e) )
|
||||
//remoteStorage.on('ready', (e) => { } )
|
||||
|
||||
remoteStorage.access.claim( `webxr`, 'rw'); // our data dir
|
||||
remoteStorage.caching.enable( `/webxr/` ) // local-first, remotestorage-second
|
||||
|
||||
// create widget
|
||||
let opts = {}
|
||||
opts.modalBackdrop = false
|
||||
widget = new window.Widget(window.remoteStorage, opts)
|
||||
widget.attach( "rswidget" );
|
||||
|
||||
},
|
||||
|
||||
click(id,e){
|
||||
switch(id){
|
||||
case "icon":
|
||||
case "more": return this.toggle(); break;
|
||||
}
|
||||
this.toggle(false)
|
||||
}
|
||||
},
|
||||
{
|
||||
|
||||
get(me,k,v){ return me[k] },
|
||||
|
||||
set(me,k,v){
|
||||
me[k] = v
|
||||
},
|
||||
|
||||
})
|
||||
|
||||
// reactify component!
|
||||
document.addEventListener('$files:ready', (e) => {
|
||||
window.$remotestorage = remoteStorageComponent( document.createElement('div') ).init(e.detail)
|
||||
})
|
||||
Loading…
Add table
Reference in a new issue