71 lines
3.5 KiB
HTML
71 lines
3.5 KiB
HTML
|
<div id="search" class="relative w-8" style="height:350px">
|
||
|
|
<ul class="dialog-side-tabs">
|
||
|
|
<li>
|
||
|
|
<button class="btn btn-xl btn-transparent btn-icon-labeled hover" v-class="active:media_search_target=='google'" v-on="click:search_google(generic_search_query)">
|
||
|
|
<span class="icon icon-social-google"></span>
|
||
|
|
<span class="icon-label">Google</span>
|
||
|
|
</button>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<button class="btn btn-xl btn-transparent btn-icon-labeled hover" v-class="active:media_search_target=='youtube'" v-on="click:search_youtube(generic_search_query)">
|
||
|
|
<span class="icon icon-social-youtube"></span>
|
||
|
|
<span class="icon-label">Youtube</span>
|
||
|
|
</button>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<button class="btn btn-xl btn-transparent btn-icon-labeled hover" v-class="active:media_search_target=='tumblr'" v-on="click:search_tumblr(generic_search_query)">
|
||
|
|
<span class="icon icon-social-tumblr"></span>
|
||
|
|
<span class="icon-label">Tumblr</span>
|
||
|
|
</button>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<button class="btn btn-xl btn-transparent btn-icon-labeled hover" v-class="active:media_search_target=='soundcloud'" v-on="click:search_soundcloud(generic_search_query)">
|
||
|
|
<span class="icon icon-social-soundcloud"></span>
|
||
|
|
<span class="icon-label">Soundcloud</span>
|
||
|
|
</button>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<div class="dialog-search-input">
|
||
|
|
<!-- generic search box placeholder -->
|
||
|
|
<div class="relative">
|
||
|
|
<span class="icon icon-zoom absolute-top-left no-events" style="margin-top: -2px;"></span>
|
||
|
|
<input type="text" v-model="generic_search_query" v-focus class="input input-white input-round input-block no-b p-l-60" placeholder="[[__("search_media_placeholder")]]" v-on="keyup: search_generic(generic_search_query) | key enter">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- <button type="button" class="btn btn-sm btn-icon btn-round btn-darken absolute-top-right clear-search" style="margin-right: 42px; margin-top: 40px;">
|
||
|
|
<span class="icon icon-cross-1"></span>
|
||
|
|
</button> -->
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="overflow-y-scroll fit dialog-search-results dialog-section" v-if="search_loading">
|
||
|
|
<span class="middle">Searching...</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<!-- search results audio -->
|
||
|
|
<div class="overflow-y-scroll fit dialog-search-results dialog-section" v-if="audio_search_results.length">
|
||
|
|
<div class="search-result search-result-audio relative" v-repeat="r : audio_search_results" v-on="click:create_artifact_via_embed_url(r.permalink_url)">
|
||
|
|
<iframe frameborder="0" seamless width="100%" v-attr="src:r.embed_url"></iframe>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- search results images -->
|
||
|
|
<div class="overflow-y-scroll fit dialog-search-results dialog-section" v-if="image_search_results.length">
|
||
|
|
<div class="search-result search-result-image" v-repeat="r : image_search_results" v-on="click:handle_insert_image_url(r.link)">
|
||
|
|
<img v-attr="src:r.thumb"/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- search results video -->
|
||
|
|
<div class="overflow-y-scroll fit dialog-search-results dialog-section" v-if="video_search_results.length">
|
||
|
|
<div class="search-result search-result-video relative" v-repeat="r : video_search_results" v-on="click:create_artifact_via_embed_url('https://youtube.com/?v='+r.id.videoId)">
|
||
|
|
|
||
|
|
<div class="thumbnail" v-style="background-image: 'url(https://img.youtube.com/vi/'+r.id.videoId+'/hqdefault.jpg)'"> </div>
|
||
|
|
<span>{{r.snippet.title}}</span>
|
||
|
|
<!-- <span>{{r.snippet.description}}</span> -->
|
||
|
|
<!-- <span>{{r.snippet.thumbnails.medium.url}}</span> -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|