From fc906df5f60ecf850464f31bbf143ffc0a583a9d Mon Sep 17 00:00:00 2001 From: howard-stearns Date: Mon, 22 Aug 2016 15:04:38 -0700 Subject: [PATCH] separate into three files --- scripts/system/html/SnapshotReview.html | 193 +-------------------- scripts/system/html/css/SnapshotReview.css | 131 ++++++++++++++ scripts/system/html/js/SnapshotReview.js | 77 ++++++++ 3 files changed, 210 insertions(+), 191 deletions(-) create mode 100644 scripts/system/html/css/SnapshotReview.css create mode 100644 scripts/system/html/js/SnapshotReview.js diff --git a/scripts/system/html/SnapshotReview.html b/scripts/system/html/SnapshotReview.html index 01a9f0bd84..db70a1910b 100644 --- a/scripts/system/html/SnapshotReview.html +++ b/scripts/system/html/SnapshotReview.html @@ -2,199 +2,10 @@ Share - + - - + diff --git a/scripts/system/html/css/SnapshotReview.css b/scripts/system/html/css/SnapshotReview.css new file mode 100644 index 0000000000..4faa17e7a3 --- /dev/null +++ b/scripts/system/html/css/SnapshotReview.css @@ -0,0 +1,131 @@ +/* +// edit-style.css +// +// Created by Howard Stearns for David Rowe 8/22/2016. +// Copyright 2016 High Fidelity, Inc. +// +// Distributed under the Apache License, Version 2.0. +// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html +*/ + + +.snapshot-container { + width: 100%; + padding-top: 3px; +} + +.snapshot-column-left { + width: 320px; + position: absolute; + padding-top: 8px; +} + +.snapshot-column-right { + margin-left: 342px; +} + +.snapshot-column-right > div > img { + width: 100%; +} + +@media (max-width: 768px) { + .snapshot-column-left { + position: initial; + width: 100%; + } + .snapshot-column-right { + margin-left: 0; + width: 100%; + } + .snapshot-column-right > div > img { + margin-top: 18px !important; + } +} + +.snapshot-column-right > div { + position: relative; + padding: 2px; +} + +.snapshot-column-right > div > img { + border: 2px solid #575757; + margin: -2px; +} + +hr { + padding-left: 0; + padding-right: 0; + margin: 21px 0; +} + +.snapsection { + text-align: center; +} + +.title { + text-transform: uppercase; + font-size: 12px; +} + +.prompt { + font-family: Raleway-SemiBold; + font-size: 14px; +} + +div.button { + padding-top: 21px; +} + +.compound-button { + position: relative; + height: auto; +} + +.compound-button input { + padding-left: 40px; +} + +.compound-button .glyph { + display: inline-block; + position: absolute; + left: 12px; + top: 16px; + width: 23px; + height: 23px; + background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaGVpZ2h0PSI0MCIKICAgd2lkdGg9IjQwIgogICBpZD0ic3ZnMiIKICAgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIKICAgdmlld0JveD0iMCAwIDQwIDQwIgogICB5PSIwcHgiCiAgIHg9IjBweCIKICAgdmVyc2lvbj0iMS4xIj48bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGEzNCI+PHJkZjpSREY+PGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPjxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PjxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz48ZGM6dGl0bGU+PC9kYzp0aXRsZT48L2NjOldvcms+PC9yZGY6UkRGPjwvbWV0YWRhdGE+PGRlZnMKICAgICBpZD0iZGVmczMyIiAvPjxzdHlsZQogICAgIGlkPSJzdHlsZTQiCiAgICAgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiM0MTQwNDI7fQoJLnN0MXtmaWxsOiNDQ0NDQ0M7fQoJLnN0MntmaWxsOiMxMzk4QkI7fQoJLnN0M3tmaWxsOiMzMUQ4RkY7fQo8L3N0eWxlPjxnCiAgICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwtMTEwKSIKICAgICBpZD0iTGF5ZXJfMSI+PGNpcmNsZQogICAgICAgc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MSIKICAgICAgIGlkPSJjaXJjbGUxMyIKICAgICAgIHI9IjQuNDQwMDAwMSIKICAgICAgIGN5PSIxMjYuMTciCiAgICAgICBjeD0iMjAuNTQwMDAxIgogICAgICAgY2xhc3M9InN0MSIgLz48cGF0aAogICAgICAgc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MSIKICAgICAgIGlkPSJwYXRoMTUiCiAgICAgICBkPSJtIDI4Ljg3LDEzOS4yNiBjIDAuMDEsLTAuMDEgMC4wMiwtMC4wMiAwLjAzLC0wLjAzIGwgMCwtMS44NiBjIDAsLTIuNjggLTIuMzMsLTQuNzcgLTUsLTQuNzcgbCAtNi40MiwwIGMgLTIuNjgsMCAtNC44NSwyLjA5IC00Ljg1LDQuNzcgbCAwLDEuODggMTYuMjQsMCB6IgogICAgICAgY2xhc3M9InN0MSIgLz48cGF0aAogICAgICAgc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MSIKICAgICAgIGlkPSJwYXRoMTciCiAgICAgICBkPSJtIDM4LjE3LDEyMy40MiBjIDAsLTMuOTcgLTMuMjIsLTcuMTkgLTcuMTksLTcuMTkgbCAtMjAuMzEsMCBjIC0zLjk3LDAgLTcuMTksMy4yMiAtNy4xOSw3LjE5IGwgMCwxNC4xOCBjIDAsMy45NyAzLjIyLDcuMTkgNy4xOSw3LjE5IGwgMjAuMzEsMCBjIDMuOTcsMCA3LjE5LC0zLjIyIDcuMTksLTcuMTkgbCAwLC0xNC4xOCB6IG0gLTEuNzgsMTQuMjcgYyAwLDMuMDMgLTIuNDYsNS40OSAtNS40OSw1LjQ5IGwgLTIwLjMyLDAgYyAtMy4wMywwIC01LjQ5LC0yLjQ2IC01LjQ5LC01LjQ5IGwgMCwtMTQuMTkgYyAwLC0zLjAzIDIuNDYsLTUuNDkgNS40OSwtNS40OSBsIDIwLjMzLDAgYyAzLjAzLDAgNS40OSwyLjQ2IDUuNDksNS40OSBsIDAsMTQuMTkgeiIKICAgICAgIGNsYXNzPSJzdDEiIC8+PC9nPjxnCiAgICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwtMTEwKSIKICAgICBpZD0iTGF5ZXJfMiIgLz48L3N2Zz4=); + background-repeat: no-repeat; + background-size: 23px 23px; +} + +.setting { + display: inline-table; + height: 28px; +} + +.setting label { + display: table-cell; + vertical-align: middle; + font-family: Raleway-SemiBold; + font-size: 14px; +} + +.setting + .setting { + margin-left: 18px; +} + +input[type=button].naked { + font-size: 40px; + line-height: 40px; + width: 30px; + padding: 0; + margin: 0 0 -6px 0; + position: relative; + top: -6px; + left: -8px; + background: none; +} + +input[type=button].naked:hover { + color: #00b4ef; + background: none; +} diff --git a/scripts/system/html/js/SnapshotReview.js b/scripts/system/html/js/SnapshotReview.js new file mode 100644 index 0000000000..a6515df825 --- /dev/null +++ b/scripts/system/html/js/SnapshotReview.js @@ -0,0 +1,77 @@ +"use strict"; +// +// SnapshotReview.js +// scripts/system/html/js/ +// +// Created by Howard Stearns 8/22/2016 +// Copyright 2016 High Fidelity, Inc. +// +// Distributed under the Apache License, Version 2.0. +// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html +// + +var paths = [], idCounter = 0, useCheckboxes; +function addImage(data) { + var div = document.createElement("DIV"), + input = document.createElement("INPUT"), + label = document.createElement("LABEL"), + img = document.createElement("IMG"), + id = "p" + idCounter++; + function toggle() { data.share = input.checked; } + img.src = data.localPath; + div.appendChild(img); + data.share = true; + if (useCheckboxes) { // I'd rather use css, but the included stylesheet is quite particular. + // Our stylesheet(?) requires input.id to match label.for. Otherwise input doesn't display the check state. + label.setAttribute('for', id); // cannot do label.for = + input.id = id; + input.type = "checkbox"; + input.checked = true; + input.addEventListener('change', toggle); + div.class = "property checkbox"; + div.appendChild(input); + div.appendChild(label); + } + document.getElementById("snapshot-images").appendChild(div); + paths.push(data); + +} +function handleShareButtons(shareMsg) { + var openFeed = document.getElementById('openFeed'); + openFeed.checked = shareMsg.openFeedAfterShare; + openFeed.onchange = function () { EventBridge.emitWebEvent(openFeed.checked ? 'setOpenFeedTrue' : 'setOpenFeedFalse'); }; + if (!shareMsg.canShare) { + // this means you may or may not be logged in, but can't share + // because you are not in a public place. + document.getElementById("sharing").innerHTML = "

Snapshots can be shared when they're taken in shareable places."; + } +} +window.onload = function () { + // Something like the following will allow testing in a browser. + //addImage({localPath: 'c:/Users/howar/OneDrive/Pictures/hifi-snap-by--on-2016-07-27_12-58-43.jpg'}); + //addImage({localPath: 'http://lorempixel.com/1512/1680'}); + openEventBridge(function () { + // Set up a handler for receiving the data, and tell the .js we are ready to receive it. + EventBridge.scriptEventReceived.connect(function (message) { + // last element of list contains a bool for whether or not we can share stuff + var shareMsg = message.pop(); + handleShareButtons(shareMsg); + + // rest are image paths which we add + useCheckboxes = message.length > 1; + message.forEach(addImage); + }); + EventBridge.emitWebEvent('ready'); + }); + +}; +// beware of bug: Cannot send objects at top level. (Nested in arrays is fine.) +function shareSelected() { + EventBridge.emitWebEvent(paths); +}; +function doNotShare() { + EventBridge.emitWebEvent([]); +}; +function snapshotSettings() { + EventBridge.emitWebEvent("openSettings"); +};