Skip to content

Instantly share code, notes, and snippets.

@ile

ile/card.mustache

Last active February 11, 2017 22:01
Download ZIP

Revisions

  1. ile revised this gist Feb 11, 2017. 1 changed file with 4 additions and 1 deletion.
    5 changes: 4 additions & 1 deletion card.mustache
    View file
    Original file line number Diff line number Diff line change
    @@ -45,7 +45,10 @@
    {{/}}

    <oembed: tag="oembed">
    <iframe src="http://api.embed.rocks/oembed/?url={{encodeURIComponent(item.url)}}"></iframe>
    <iframe src="/oembed/{{encodeURIComponent(item.url)}}"></iframe>

    <oembed2: tag="oembed2">
    <iframe src="https://api.embed.rocks/oembed/?url={{encodeURIComponent(item.url)}}&key=4ed843c5-5ed4-4201-9e68-a227c314aae8"></iframe>

    <text: tag="text">
    {{if !play}}
  2. ile renamed this gist Jan 7, 2017. 1 changed file with 0 additions and 0 deletions.
    0 card.moustache → card.mustache
    View file
    File renamed without changes.
  3. ile renamed this gist Jan 7, 2017. 1 changed file with 0 additions and 0 deletions.
    0 card.mustache → card.moustache
    View file
    File renamed without changes.
  4. ile renamed this gist Jan 7, 2017. 1 changed file with 0 additions and 2 deletions.
    2 changes: 0 additions & 2 deletions card.html → card.mustache
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,3 @@
    ```moustache
    <index:>
    {{if item}}
    <div class="card{{if big}} card-big{{/}}{{if (item.videos.length || allowOembed())}} card-video{{/}}{{if (item.type == 'audio')}} card-audio{{/}}">
    @@ -115,4 +114,3 @@ <h3>{{item.title}}</h3>
    {{/}}
    <i on-click="stop()" class="viewer-close fa fa-times-circle"></i>
    </div>
    ```
  5. ile revised this gist Jan 7, 2017. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion card.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    ```mustache
    ```moustache
    <index:>
    {{if item}}
    <div class="card{{if big}} card-big{{/}}{{if (item.videos.length || allowOembed())}} card-video{{/}}{{if (item.type == 'audio')}} card-audio{{/}}">
  6. ile revised this gist Jan 7, 2017. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions card.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,4 @@
    ```mustache
    <index:>
    {{if item}}
    <div class="card{{if big}} card-big{{/}}{{if (item.videos.length || allowOembed())}} card-video{{/}}{{if (item.type == 'audio')}} card-audio{{/}}">
    @@ -114,3 +115,4 @@ <h3>{{item.title}}</h3>
    {{/}}
    <i on-click="stop()" class="viewer-close fa fa-times-circle"></i>
    </div>
    ```
  7. ile created this gist Jan 7, 2017.
    116 changes: 116 additions & 0 deletions card.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,116 @@
    <index:>
    {{if item}}
    <div class="card{{if big}} card-big{{/}}{{if (item.videos.length || allowOembed())}} card-video{{/}}{{if (item.type == 'audio')}} card-audio{{/}}">
    {{if preferOembed()}}
    <oembed></oembed>
    {{else if (item.type == 'photo' && item.images.length) }}
    <single-image image="//safe.chttr.co/{{item.images[0].safe}}"></single-image>
    {{else if (item.oembed.type == 'photo' && item.oembed.images.length) }}
    <single-image image="//safe.chttr.co/{{item.oembed.images[0].safe}}"></single-image>
    {{else if (item.images.length && !play)}}
    <with-image></with-image>
    {{else if play}}
    <viewer></viewer>
    {{else if html5Video()}}
    <video-html5 small="{{if !big}}true{{/}}" big="{{if big}}true{{/}}"></video-html5>
    {{else if item.type == 'audio'}}
    <aud></aud>
    {{else if hasText()}}
    <a target="_blank" href="{{item.url}}">
    <text></text>
    </a>
    {{else if allowOembed()}}
    <oembed></oembed>
    {{/}}
    </div>
    {{/}}

    <btn: tag="btn">
    <span class="fa fa-play-circle"></span>

    <with-image: tag="with-image">
    {{if (item.videos.length || allowOembed())}}
    <span class="vplay" on-click="play()">
    <im></im>
    <btn></btn>
    </span>
    <a target="_blank" href="{{item.url}}">
    <text></text>
    </a>
    {{else}}
    <a target="_blank" href="{{item.url}}">
    <im></im>
    <text></text>
    </a>
    {{/}}

    <oembed: tag="oembed">
    <iframe src="http://api.embed.rocks/oembed/?url={{encodeURIComponent(item.url)}}"></iframe>

    <text: tag="text">
    {{if !play}}
    <div class="card-text">
    <h3>{{item.title}}</h3>
    <p>{{item.description}}</p>
    {{if item.favicon.safe || item.site}}
    <p class="fav">{{if item.favicon.safe}}<img onerror="this.src='/img/broken.jpg'" class="favicon" src="//safe.chttr.co/{{item.favicon.safe}}">{{/}}{{item.site}}</p>
    {{/}}
    </div>
    {{/}}

    <video-iframe: tag="video-iframe">
    <iframe style="{{videoSize()}}" src="{{item.videos[0].secureUrl || item.videos[0].url}}"></iframe>
    <text></text>

    <oembed-player: tag="oembed-player">
    <iframe src="http://embed.rocks:3001/oembed/?url={{encodeURIComponent(item.secureUrl || item.url)}}"></iframe>

    <aud: tag="aud">
    <audio controls loop>
    <source type="{{item.audios[0].type}}" src="{{item.audios[0].secureUrl || item.audios[0].url}}">
    </audio>

    <video-html5: tag="video-html5">
    {{if play}}
    <video controls loop autoplay>
    <source type="{{item.videos[0].type}}" src="{{item.videos[0].secureUrl || item.videos[0].url}}">
    </video>
    {{else if small || big}}
    <span class="vplay" on-click="play()">
    <video class="{{if small}}small{{else if big}}big{{/}}">
    <source type="{{item.videos[0].type}}" src="{{item.videos[0].secureUrl || item.videos[0].url}}">
    </video>
    <btn></btn>
    </span>
    {{else}}
    <video controls loop>
    <source type="{{item.videos[0].type}}" src="{{item.videos[0].secureUrl || item.videos[0].url}}">
    </video>
    {{/}}
    <text></text>

    <single-image: tag="single-image">
    <section class="photos-list photos-list-1">
    <img src="{{@image}}">
    </section>

    <im: tag="im">
    {{if item.images}}
    {{if item.images[0].safe}}
    <img onerror="this.src='/img/broken.jpg'" class="card-image" src="//safe.chttr.co/{{item.images[0].safe}}">
    {{else}}
    <img onerror="this.src='/img/broken.jpg'" class="card-image" src="{{item.images[0].url}}">
    {{/}}
    {{/}}

    <viewer: tag="viewer">
    <div on-click="stop()" class="dl-container">
    {{if html5Video()}}
    <video-html5></video-html5>
    {{else if iframeVideo()}}
    <video-iframe></video-iframe>
    {{else if allowOembed()}}
    <oembed-player></oembed-player>
    {{/}}
    <i on-click="stop()" class="viewer-close fa fa-times-circle"></i>
    </div>