Last active
October 18, 2016 14:06
-
-
Save ghoullier/d42559e039f30f054816ea989167fc55 to your computer and use it in GitHub Desktop.
Orange Test Days Demo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
| <title>Demo</title> | |
| <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css"> | |
| <style>nav { background-color: #26a69a; } main { height: calc(100vh - 64px); overflow-y: auto; } .center-cropped { height: 250px; object-fit: cover; object-position: center; } [data-tag]::before { content: attr(data-tag) }</style> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script> | |
| <script src="https://unpkg.com/[email protected]/dist/zetapush.min.js"></script> | |
| </head> | |
| <body> | |
| <nav> | |
| <div class="nav-wrapper"> | |
| <span class="brand-logo"><i class="material-icons">cloud_upload</i>Flickr</span> | |
| </div> | |
| </nav> | |
| <main> | |
| <form id="form" class="row"> | |
| <div class="file-field input-field col m4 s12"> | |
| <div class="btn"> | |
| <span>File</span> | |
| <input type="file" accept="image/*" required> | |
| </div> | |
| <div class="file-path-wrapper"> | |
| <input class="file-path validate" type="text"> | |
| </div> | |
| </div> | |
| <div class="input-field col m4 s12"> | |
| <input id="tags" type="text" class="validate" required> | |
| <label class="active" for="tags">Tags</label> | |
| </div> | |
| <div class="input-field col m4 s12"> | |
| <button class="btn waves-effect waves-light" type="submit" name="action">Submit | |
| <i class="material-icons right">send</i> | |
| </button> | |
| </div> | |
| <div class="progress hide"> | |
| <div class="indeterminate"></div> | |
| </div> | |
| </form> | |
| <div id="cards" class="row"></div> | |
| </main> | |
| <script src="utils.js"></script> | |
| <script src="index.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const client = new ZetaPush.Client({ | |
| sandboxId: 'qOFdwGSn', | |
| authentication() { | |
| return ZetaPush.Authentication.simple({ | |
| login: 'demo', | |
| password: 'demo' | |
| }) | |
| } | |
| }) | |
| const fs = client.createService({ | |
| Type: ZetaPush.services.Zpfs_hdfs, | |
| listener: { | |
| updateMeta({ data }) { | |
| document.querySelector(`[card-name="${data.name}"] img`).src = thumnail(data) | |
| } | |
| } | |
| }) | |
| const api = client.createService({ | |
| Type: ZetaPush.services.Macro, | |
| listener: { | |
| error(message) { | |
| console.error('error', message) | |
| }, | |
| addFile({ data: { result } }) { | |
| $progress.classList.add('hide') | |
| api.call({ name: 'listFiles' }) | |
| }, | |
| deleteFile({ data: { result } }) { | |
| api.call({ name: 'listFiles' }) | |
| }, | |
| listFiles({ data: { result } }) { | |
| const cards = result.listing.entries.content | |
| render(cards) | |
| }, | |
| searchFiles({ data: { result } }) { | |
| const cards = result.items.content.map(({ data }) => data) | |
| render(cards) | |
| }, | |
| uploadFile({ data: { result } }) { | |
| const file = $file.files[0] | |
| const { url, httpMethod, guid } = result.upload | |
| const tags = $tags.value ? $tags.value.split(' ') : [] | |
| upload({ file, url, httpMethod, guid, tags }).then(() => { | |
| $form.reset() | |
| api.call({ name: 'addFile', parameters: { guid, tags } }) | |
| }) | |
| } | |
| } | |
| }) | |
| client.onConnectionEstablished(() => { | |
| api.call({ name: 'listFiles' }) | |
| }) | |
| client.connect() | |
| $form.addEventListener('submit', (event) => { | |
| event.preventDefault() | |
| $progress.classList.remove('hide') | |
| api.call({ name: 'uploadFile' }) | |
| }) | |
| $('main').on('click', '[data-tag]', (event) => { | |
| api.call({ name: 'searchFiles', parameters: { tags: [ event.target.dataset.tag ] } }) | |
| }) | |
| $(window).on('keyup', ({ key }) => { | |
| if (key === 'Escape') { | |
| api.call({ name: 'listFiles' }) | |
| } | |
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const $cards = document.querySelector('#cards') | |
| const $file = document.querySelector('[type="file"]') | |
| const $form = document.querySelector('#form') | |
| const $tags = document.querySelector('#tags') | |
| const $progress = document.querySelector('.progress') | |
| const UNSECURE_PATTERN = /^http:\/\/|^\/\// | |
| const securize = (url, forceHttps) => url.replace(UNSECURE_PATTERN, 'https://') | |
| const thumnail = ({ url, metadata }) => securize((metadata['thumb-500'] && metadata['thumb-500'].url) || url.url) | |
| const chipTemplate = (tag) => `<div class="chip" data-tag="${tag}"></div>` | |
| const cardTemplate = ({ name, url, metadata, tags } = {}) => ` | |
| <div card-name="${name}" class="col s6 m4"> | |
| <div class="card"> | |
| <div class="card-image"> | |
| <a href="${url.url}" target="_blank"> | |
| <img src="${thumnail({ url, metadata })}" class="center-cropped"> | |
| </a> | |
| </div> | |
| <div class="card-action"> | |
| ${tags.map(chipTemplate).join('')} | |
| </div> | |
| </div> | |
| </div> | |
| ` | |
| const upload = ({ file, url, httpMethod, guid, tags }) => { | |
| return $.ajax({ | |
| url: securize(url), | |
| method: httpMethod, | |
| contentType: false, | |
| processData: false, | |
| data: file, | |
| headers: { | |
| 'Content-Type': file.type | |
| } | |
| }) | |
| } | |
| const render = (cards) => $cards.innerHTML = cards.map(cardTemplate).join('') |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment