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
start [2021/10/26 22:55]
admin 		start [2021/10/27 11:06] (current)
admin
Line 50: Line 50:
   <div class = "urlloader">   <div class = "urlloader">
     <div class="inputzone">     <div class="inputzone">
-      <input type="text" class="archive-url" placeholder="Input url here" />+      <input type="text" class="archive-url" placeholder="Input url here. if external servers,this url must have CORS enabled." />
     </div>     </div>
     <div class="btn-area">     <div class="btn-area">
Line 63: Line 63:
 </script> </script>
  
 +<script id="tpl-oneplayer-picker-listing" charset="UTF-8" type="text/html">
 +  <div class="lark-carousel rotate" >
 +    <div  class="items-container" >
 +      <ul class= "items" >
 +        <!-- Add your images (or video) here -->
 +      </ul>
 +      <!-- Text at center of ground -->
 +      <p class = "desc">3dMAX  Rotate  Carousel</p>
 +      <div id="ground" class="ground" style="width: 720px; height: 720px;"></div>
 +    </div>
 +    <a class="prev">‹</a>
 +    <a class="next">›</a>
 +    <a class="cycle-stop"></a>
 +    <ol class="indicators">
 +    </ol>
 +  </div>        
 +</script>
 +
 +<script id="tpl-oneplayer-picker-listing-modes" charset="UTF-8" type="text/html">
 +  <li class="pull-right">
 +    <div class="btn-group carousel-modes" data-toggle="buttons">
 +      <label class="btn btn-default">
 +        <input name="carsoulMode" type="radio" value="slide"><span class="fa fa-exchange"></span>
 +      </label>
 +      <label class="btn btn-default">
 +        <input name="carsoulMode" type="radio" value="rotate"><span class="fa fa-houzz"></span>
 +      </label>
 +      <label class="btn btn-default">
 +        <input name="carsoulMode" type="radio" value="coverflow"><span class="fa fa-gg"></span>
 +      </label>
 +    </div>
 +  </li>    
 +</script>
 +
 +<script id="tpl-oneplayer-picker-listing-item" charset="UTF-8" type="text/html">
 +  <li class="item"  data-media="<%= media %>" >
 +    <div class="content"><img src="<%= poster %>"></div>
 +  </li>  
 +</script>
  
 <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"
 +
 +          },
 +
 +          {
 +            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/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 mediaEls = Array.prototype.slice.call(document.getElementsByTagName('u-oneplayer'));
Line 77: Line 166:
                         tabs : [                         tabs : [
                           {label:"Local",from:"upload"},                           {label:"Local",from:"upload"},
-                          {label:"Internet",from:"url"}+                          {label:"Internet",from:"url"}, 
 +                          {label:"Samples",from:"listing",items:medias,modes:true}
                         ],                         ],
  
Line 93: Line 183:
                           url : {                           url : {
                             template : $("#tpl-oneplayer-picker-url").html()                             template : $("#tpl-oneplayer-picker-url").html()
 +                          },
 +                          listing : {
 +                            template : $("#tpl-oneplayer-picker-listing").html(),
 +
 +                            item : {
 +                              template : $("#tpl-oneplayer-picker-listing-item").html()
 +                            },
 +
 +                            modes : {
 +                              template : $("#tpl-oneplayer-picker-listing-modes").html()
 +                            }
                           }                           }
                         }                         }
Line 166: Line 267:
           cursor : pointer;           cursor : pointer;
         }         }
-        + 
 +  .uop-picker .lark-carousel .desc, .lark-carousel .ground { 
 +    display: none; 
 +  } 
 + 
 +  .uop-picker .lark-carousel.rotate .desc, .lark-carousel.rotate .ground { 
 +    display: block; 
 +  } 
 + 
 +  .uop-picker .lark-carousel .items-container { 
 +    height: 100%;  
 +  } 
 + 
 +  .uop-picker .lark-carousel  .item img { 
 +    max-width: 90%; 
 +    max-height: 90%; 
 +    display: block; 
 +    margin: auto; 
 +    cursor : pointer; 
 +  } 
 + 
 +  .uop-picker .lark-carousel.rotate .items-container { 
 +    width: 120px;  
 +    height: 170px;  
 +  } 
 +  
 +  .uop-picker .lark-carousel.rotate .item img { 
 +    display: block; 
 +    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 
 +  }
 </style> </style>