Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision 		Previous revision
enterprise:demos:gallery [2021/10/24 22:17]
admin 		enterprise:demos:gallery [2021/10/27 00:45] (current)
admin
Line 80: Line 80:
 <script> <script>
     function initPage(langx,domx,oneplayer) {     function initPage(langx,domx,oneplayer) {
-        let $ = domx.query;+      let $ = domx.query; 
 +      var medias = [ 
 +          { 
 +            type: 'image', 
 +            poster : "/medias/enterprise/demos/diagramjhg.jpeg", 
 +            media : "/medias/enterprise/demos/diagramjhg.jpegp",  
 +            title : "diagramjhg" 
 +          }, 
 +          { 
 +           type: 'image', 
 +            poster : '/medias/enterprise/demos/flyingcar.jpg', 
 +            media : "/medias/enterprise/demos/flyingcar.obj.zip",  
 +            title : "flyingcar" 
 +          }, 
 +          { 
 +            type: 'image', 
 +            poster : '/medias/enterprise/demos/gosthouse.jpg', 
 +            media : "/medias/enterprise/demos/gosthouse.obj.zip",  
 +            title : "gosthouse" 
 +          }, 
 +          { 
 +           type: 'image', 
 +            poster : "/medias/enterprise/demos/grand-view-park-sf.jpeg", 
 +            media : "/medias/enterprise/demos/grand-view-park-sf.jpegp",  
 +            title : "grand view park"
  
-        let _windowLoaded = false; +          },
-        var medias = [ +
-            { +
-              type: 'image', +
-              poster : "/medias/enterprise/demos/diagramjhg.jpeg", +
-              media : "/medias/enterprise/demos/diagramjhg.jpegp",  +
-              title : "diagramjhg" +
-            }, +
-            { +
-             type: 'image', +
-              poster : '/medias/enterprise/demos/flyingcar.jpg', +
-              media : "/medias/enterprise/demos/flyingcar.obj.zip",  +
-              title : "flyingcar" +
-            }, +
-            { +
-              type: 'image', +
-              poster : '/medias/enterprise/demos/gosthouse.jpg', +
-              media : "/medias/enterprise/demos/gosthouse.obj.zip",  +
-              title : "gosthouse" +
-            }, +
-            { +
-             type: 'image', +
-              poster : "/medias/enterprise/demos/grand-view-park-sf.jpeg", +
-              media : "/medias/enterprise/demos/grand-view-park-sf.jpegp",  +
-              title : "grand view park"+
  
-            },+          { 
 +            type: 'image', 
 +            poster : "/medias/enterprise/demos/primaryiondrive.jpg", 
 +            media : "/medias/enterprise/demos/primaryiondrive.glb.zip",  
 +            title : "PrimaryIon Drive" 
 +          }, 
 +           
 +          { 
 +           type: 'image', 
 +            poster : "/medias/enterprise/demos/sam010.jpg", 
 +            media : "/medias/enterprise/demos/sam019.mp4",  
 +            title : "sam"
  
-            { +          },        
-              type: 'image', +          { 
-              poster : "/medias/enterprise/demos/primaryiondrive.jpg", +           type: 'image', 
-              media : "/medias/enterprise/demos/primaryiondrive.glb",  +            poster : "/medias/enterprise/demos/the-earth-around.png", 
-              title : "PrimaryIon Drive" +            media : "/medias/enterprise/demos/the-earth-around.mp4p",  
-            }, +            title : "the earth around"
-             +
-            { +
-             type: 'image', +
-              poster : "/medias/enterprise/demos/sam010.jpg", +
-              media : "/medias/enterprise/demos/sam019.mp4",  +
-              title : "sam"+
  
-            },        +          }        
-            { +      ];
-             type: 'image', +
-              poster : "/medias/enterprise/demos/the-earth-around.png", +
-              media : "/medias/enterprise/demos/the-earth-around.mp4p",  +
-              title : "the earth around"+
  
-            }        +      const mediaEls = Array.prototype.slice.call(document.getElementsByTagName('u-oneplayer'));
-        ]; +
-        const autoSetup = function () {+
  
-            const mediaEls = Array.prototype.slice.call(document.getElementsByTagName('u-oneplayer'));+      if (mediaEls && mediaEls.length > 0) { 
 +        for (let i = 0, e = mediaEls.length; i < e; i++) { 
 +          const mediaEl = mediaEls[i], 
 +                pickerOptions = { 
 +                  tabs : [ 
 +                    {label:"Gallery",from:"listing",items:medias,modes:true} 
 +                  ],
  
-            if (mediaEls && mediaEls.length > 0) { +                  template : $("#tpl-oneplayer-picker").html(),
-                for (let i = 0, e = mediaEls.length; i < e; i++) {+
  
-                    const mediaEl = mediaEls[i], +                  templates : { 
-                          pickerOptions = { +                    tabitem : $("#tpl-oneplayer-picker-tabitem").html(), 
-                            tabs : [ +                    tabpane : $("#tpl-oneplayer-picker-tabpane").html() 
-                              {label:"Gallery",from:"listing",items:medias,modes:true} +                  },
-                            ],+
  
-                            template : $("#tpl-oneplayer-picker").html(),+                  froms : { 
 +                    listing : { 
 +                      template : $("#tpl-oneplayer-picker-listing").html(),
  
-                            templates : { +                      item : { 
-                              tabitem : $("#tpl-oneplayer-picker-tabitem").html(), +                        template : $("#tpl-oneplayer-picker-listing-item").html() 
-                              tabpane : $("#tpl-oneplayer-picker-tabpane").html() +                      },
-                            },+
  
-                            froms : { +                      modes : { 
-                              listing : { +                        template : $("#tpl-oneplayer-picker-listing-modes").html() 
-                                template : $("#tpl-oneplayer-picker-listing").html(), +                      }
- +
-                                item : { +
-                                  template : $("#tpl-oneplayer-picker-listing-item").html() +
-                                }, +
- +
-                                modes : { +
-                                  template : $("#tpl-oneplayer-picker-listing-modes").html() +
-                                } +
-                              } +
-                            } +
-                          }; +
- +
-                    if (mediaEl && mediaEl.getAttribute) { +
-                        if (mediaEl.player === undefined) { +
-                           let player = new oneplayer.Player(mediaEl,{ +
-                             autoplay : true, +
-                             picker : pickerOptions +
-                           }); +
-                        } +
-                    } else { +
-                        autoSetupTimeout(1); +
-                        break;+
                     }                     }
-                } +                  } 
-            } else if (!_windowLoaded) { +                };
-                autoSetupTimeout(1); +
-            } +
-        }; +
-        function autoSetupTimeout(wait) {+
  
-            window.setTimeout(autoSetup, wait);+          if (mediaEl.player === undefined) { 
 +             mediaEl.player = new oneplayer.Player(mediaEl,{ 
 +               autoplay : true, 
 +               picker : pickerOptions 
 +             }); 
 +          }
         }         }
-        function setWindowLoaded() { +      }
-            _windowLoaded = true; +
-            window.removeEventListener('load', setWindowLoaded); +
-        } +
-        if (document.readyState === 'complete') { +
-            setWindowLoaded(); +
-        } else { +
-            window.addEventListener('load', setWindowLoaded); +
-        } +
-        const hasLoaded = function () { +
-            return _windowLoaded; +
-        }; +
- +
-        autoSetupTimeout(1,oneplayer); +
     }     }
 </script> </script>
Line 207: Line 176:
 <link type="text/css" rel="stylesheet" href="/lib/tpl/skydoku/assets/oneplayer/css/oneplayer-all.css"> <link type="text/css" rel="stylesheet" href="/lib/tpl/skydoku/assets/oneplayer/css/oneplayer-all.css">
 <style> <style>
-        .throbber { +  .throbber { 
-            position: absolute; +    position: absolute; 
-            top: 0px; +    top: 0px; 
-            left: 0px; +    left: 0px; 
-            background: rgba(255, 152, 0, 0.86); +    background: rgba(255, 152, 0, 0.86); 
-            color: rgb(255, 255, 255); +    color: rgb(255, 255, 255); 
-            display: flex; +    display: flex; 
-            align-items: center; +    align-items: center; 
-            justify-content: center; +    justify-content: center; 
-            width: 100%; +    width: 100%; 
-            height: 100%; +    height: 100%; 
-            z-index: 9999; +    z-index: 9999; 
-        } +  } 
-        .u-oneplayer { +  .u-oneplayer { 
-            position: absolute; +    position: absolute; 
-        }+  }
  
-     .uop-picker .lark-carousel .desc, .lark-carousel .ground { +  .uop-picker .lark-carousel .desc, .lark-carousel .ground { 
-      display: none; +    display: none; 
-     }+  }
  
-     .uop-picker .lark-carousel.rotate .desc, .lark-carousel.rotate .ground { +  .uop-picker .lark-carousel.rotate .desc, .lark-carousel.rotate .ground { 
-      display: block; +    display: block; 
-     }+  }
  
-    .uop-picker .lark-carousel .items-container { +  .uop-picker .lark-carousel .items-container { 
-        height: 100%;  +    height: 100%;  
-    }+  }
  
-    .uop-picker .lark-carousel  .item img { +  .uop-picker .lark-carousel  .item img { 
-        max-width: 100%; +    max-width: 100%; 
-        max-height: 100%; +    max-height: 100%; 
-        display: block; +    display: block; 
-        margin: auto; +    margin: auto; 
-        cursor : pointer; +    cursor : pointer; 
-    }+  }
  
-    .uop-picker .lark-carousel.rotate .items-container { +  .uop-picker .lark-carousel.rotate .items-container { 
-        width: 120px;  +    width: 120px;  
-        height: 170px;  +    height: 170px;  
-    } +  } 
-     .uop-picker .lark-carousel.rotate .item img { +  
-        display: block; +  .uop-picker .lark-carousel.rotate .item img { 
-        height : 220px; +    display: block; 
-        width: 220px; +    height : 220px; 
-     } +    width: 220px; 
- +  }
-    .uop-picker .lark-carousel.coverflow .item { +
-       height : 360px; +
-       width : 360px; +
-    } +
- +
-    .uop-picker .lark-carousel.coverflow .item img { +
-        display: block; +
-        height : 360px; +
-        width : 360px; +
-    } +
- +
-     .uop-picker .lark-carousel.slide .item img { +
-        display: block; +
-        height : 420px; +
-        width : 840px +
-      }+
  
 +  .uop-picker .lark-carousel.coverflow .item {
 +    height : 360px;
 +    width : 360px;
 +  }
  
 +  .uop-picker .lark-carousel.coverflow .item img {
 +    display: block;
 +    height : 360px;
 +    width : 360px;
 +  }
  
 + .uop-picker .lark-carousel.slide .item img {
 +    display: block;
 +    height : 420px;
 +    width : 840px
 +  }
 </style> </style>
  
Line 349: Line 316:
 <script> <script>
     function initPage(langx,domx,oneplayer) {     function initPage(langx,domx,oneplayer) {
-        let $ = domx.query;+      let $ = domx.query; 
 +      var medias = [ 
 +          { 
 +            type: 'image', 
 +            poster : "/medias/enterprise/demos/diagramjhg.jpeg", 
 +            media : "/medias/enterprise/demos/diagramjhg.jpegp",  
 +            title : "diagramjhg" 
 +          }, 
 +          { 
 +           type: 'image', 
 +            poster : '/medias/enterprise/demos/flyingcar.jpg', 
 +            media : "/medias/enterprise/demos/flyingcar.obj.zip",  
 +            title : "flyingcar" 
 +          }, 
 +          { 
 +            type: 'image', 
 +            poster : '/medias/enterprise/demos/gosthouse.jpg', 
 +            media : "/medias/enterprise/demos/gosthouse.obj.zip",  
 +            title : "gosthouse" 
 +          }, 
 +          { 
 +           type: 'image', 
 +            poster : "/medias/enterprise/demos/grand-view-park-sf.jpeg", 
 +            media : "/medias/enterprise/demos/grand-view-park-sf.jpegp",  
 +            title : "grand view park"
  
-        let _windowLoaded = false; +          },
-        var medias = [ +
-            { +
-              type: 'image', +
-              poster : "/medias/enterprise/demos/diagramjhg.jpeg", +
-              media : "/medias/enterprise/demos/diagramjhg.jpegp",  +
-              title : "diagramjhg" +
-            }, +
-            { +
-             type: 'image', +
-              poster : '/medias/enterprise/demos/flyingcar.jpg', +
-              media : "/medias/enterprise/demos/flyingcar.obj.zip",  +
-              title : "flyingcar" +
-            }, +
-            { +
-              type: 'image', +
-              poster : '/medias/enterprise/demos/gosthouse.jpg', +
-              media : "/medias/enterprise/demos/gosthouse.obj.zip",  +
-              title : "gosthouse" +
-            }, +
-            { +
-             type: 'image', +
-              poster : "/medias/enterprise/demos/grand-view-park-sf.jpeg", +
-              media : "/medias/enterprise/demos/grand-view-park-sf.jpegp",  +
-              title : "grand view park"+
  
-            },+          { 
 +            type: 'image', 
 +            poster : "/medias/enterprise/demos/primaryiondrive.jpg", 
 +            media : "/medias/enterprise/demos/primaryiondrive.glb",  
 +            title : "PrimaryIon Drive" 
 +          }, 
 +           
 +          { 
 +           type: 'image', 
 +            poster : "/medias/enterprise/demos/sam010.jpg", 
 +            media : "/medias/enterprise/demos/sam019.mp4",  
 +            title : "sam"
  
-            { +          },        
-              type: 'image', +          { 
-              poster : "/medias/enterprise/demos/primaryiondrive.jpg", +           type: 'image', 
-              media : "/medias/enterprise/demos/primaryiondrive.glb",  +            poster : "/medias/enterprise/demos/the-earth-around.png", 
-              title : "PrimaryIon Drive" +            media : "/medias/enterprise/demos/the-earth-around.mp4p",  
-            }, +            title : "the earth around"
-             +
-            { +
-             type: 'image', +
-              poster : "/medias/enterprise/demos/sam010.jpg", +
-              media : "/medias/enterprise/demos/sam019.mp4",  +
-              title : "sam"+
  
-            },        +          }        
-            { +      ];
-             type: 'image', +
-              poster : "/medias/enterprise/demos/the-earth-around.png", +
-              media : "/medias/enterprise/demos/the-earth-around.mp4p",  +
-              title : "the earth around"+
  
-            }        +      const mediaEls = Array.prototype.slice.call(document.getElementsByTagName('u-oneplayer'));
-        ]; +
-        const autoSetup = function () {+
  
-            const mediaEls = Array.prototype.slice.call(document.getElementsByTagName('u-oneplayer'));+      if (mediaEls && mediaEls.length > 0) { 
 +        for (let i = 0, e = mediaEls.length; i < e; i++) { 
 +          const mediaEl = mediaEls[i], 
 +                pickerOptions = { 
 +                  tabs : [ 
 +                    {label:"Gallery",from:"listing",items:medias,modes:true} 
 +                  ],
  
-            if (mediaEls && mediaEls.length > 0) { +                  template : $("#tpl-oneplayer-picker").html(),
-                for (let i = 0, e = mediaEls.length; i < e; i++) {+
  
-                    const mediaEl = mediaEls[i], +                  templates : { 
-                          pickerOptions = { +                    tabitem : $("#tpl-oneplayer-picker-tabitem").html(), 
-                            tabs : [ +                    tabpane : $("#tpl-oneplayer-picker-tabpane").html() 
-                              {label:"Gallery",from:"listing",items:medias,modes:true} +                  },
-                            ],+
  
-                            template : $("#tpl-oneplayer-picker").html(),+                  froms : { 
 +                    listing : { 
 +                      template : $("#tpl-oneplayer-picker-listing").html(),
  
-                            templates : { +                      item : { 
-                              tabitem : $("#tpl-oneplayer-picker-tabitem").html(), +                        template : $("#tpl-oneplayer-picker-listing-item").html() 
-                              tabpane : $("#tpl-oneplayer-picker-tabpane").html() +                      },
-                            },+
  
-                            froms : { +                      modes : { 
-                              listing : { +                        template : $("#tpl-oneplayer-picker-listing-modes").html() 
-                                template : $("#tpl-oneplayer-picker-listing").html(), +                      }
- +
-                                item : { +
-                                  template : $("#tpl-oneplayer-picker-listing-item").html() +
-                                }, +
- +
-                                modes : { +
-                                  template : $("#tpl-oneplayer-picker-listing-modes").html() +
-                                } +
-                              } +
-                            } +
-                          }; +
- +
-                    if (mediaEl && mediaEl.getAttribute) { +
-                        if (mediaEl.player === undefined) { +
-                           let player = new oneplayer.Player(mediaEl,{ +
-                             autoplay : true, +
-                             picker : pickerOptions +
-                           }); +
-                        } +
-                    } else { +
-                        autoSetupTimeout(1); +
-                        break;+
                     }                     }
-                } +                  } 
-            } else if (!_windowLoaded) { +                };
-                autoSetupTimeout(1); +
-            } +
-        }; +
-        function autoSetupTimeout(wait) {+
  
-            window.setTimeout(autoSetup, wait);+          if (mediaEl.player === undefined) { 
 +             mediaEl.player = new oneplayer.Player(mediaEl,{ 
 +               autoplay : true, 
 +               picker : pickerOptions 
 +             }); 
 +          }
         }         }
-        function setWindowLoaded() { +      }
-            _windowLoaded = true; +
-            window.removeEventListener('load', setWindowLoaded); +
-        } +
-        if (document.readyState === 'complete') { +
-            setWindowLoaded(); +
-        } else { +
-            window.addEventListener('load', setWindowLoaded); +
-        } +
-        const hasLoaded = function () { +
-            return _windowLoaded; +
-        }; +
- +
-        autoSetupTimeout(1,oneplayer); +
     }     }
 </script> </script>
Line 476: Line 412:
 <link type="text/css" rel="stylesheet" href="/lib/tpl/skydoku/assets/oneplayer/css/oneplayer-all.css"> <link type="text/css" rel="stylesheet" href="/lib/tpl/skydoku/assets/oneplayer/css/oneplayer-all.css">
 <style> <style>
-        .throbber { +  .throbber { 
-            position: absolute; +    position: absolute; 
-            top: 0px; +    top: 0px; 
-            left: 0px; +    left: 0px; 
-            background: rgba(255, 152, 0, 0.86); +    background: rgba(255, 152, 0, 0.86); 
-            color: rgb(255, 255, 255); +    color: rgb(255, 255, 255); 
-            display: flex; +    display: flex; 
-            align-items: center; +    align-items: center; 
-            justify-content: center; +    justify-content: center; 
-            width: 100%; +    width: 100%; 
-            height: 100%; +    height: 100%; 
-            z-index: 9999; +    z-index: 9999; 
-        } +  } 
-        .u-oneplayer { +  .u-oneplayer { 
-            position: absolute; +    position: absolute; 
-        }+  }
  
-     .uop-picker .lark-carousel .desc, .lark-carousel .ground { +  .uop-picker .lark-carousel .desc, .lark-carousel .ground { 
-      display: none; +    display: none; 
-     }+  }
  
-     .uop-picker .lark-carousel.rotate .desc, .lark-carousel.rotate .ground { +  .uop-picker .lark-carousel.rotate .desc, .lark-carousel.rotate .ground { 
-      display: block; +    display: block; 
-     }+  }
  
-    .uop-picker .lark-carousel .items-container { +  .uop-picker .lark-carousel .items-container { 
-        height: 100%;  +    height: 100%;  
-    }+  }
  
-    .uop-picker .lark-carousel  .item img { +  .uop-picker .lark-carousel  .item img { 
-        max-width: 100%; +    max-width: 90%; 
-        max-height: 100%; +    max-height: 90%; 
-        display: block; +    display: block; 
-        margin: auto; +    margin: auto; 
-        cursor : pointer; +    cursor : pointer; 
-    }+  }
  
-    .uop-picker .lark-carousel.rotate .items-container { +  .uop-picker .lark-carousel.rotate .items-container { 
-        width: 120px;  +    width: 120px;  
-        height: 170px;  +    height: 170px;  
-    } +  } 
-     .uop-picker .lark-carousel.rotate .item img { +  
-        display: block; +  .uop-picker .lark-carousel.rotate .item img { 
-        height : 220px; +    display: block; 
-        width: 220px; +    height : 220px; 
-     }+    width: 220px; 
 +  }
  
-    .uop-picker .lark-carousel.coverflow .item { +  .uop-picker .lark-carousel.coverflow .item { 
-       height : 360px; +    height : 360px; 
-       width : 360px; +    width : 360px; 
-    }+  }
  
-    .uop-picker .lark-carousel.coverflow .item img { +  .uop-picker .lark-carousel.coverflow .item img { 
-        display: block; +    display: block; 
-        height : 360px; +    height : 360px; 
-        width : 360px; +    width : 360px; 
-    }+  }
  
-     .uop-picker .lark-carousel.slide .item img { + .uop-picker .lark-carousel.slide .item img { 
-        display: block; +    display: block; 
-        height : 420px; +    height : 420px; 
-        width : 840px +    width : 840px 
-      }+  }
 </style> </style>
 +
 </code> </code>