skottie - Show both ways to embed skottie.
Bug: skia:
Change-Id: I2ca6e567a91531e6a29e69a5cd4e79ea56bd396a
Reviewed-on: https://skia-review.googlesource.com/c/182145
Auto-Submit: Joe Gregorio <jcgregorio@google.com>
Reviewed-by: Kevin Lubick <kjlubick@google.com>
Commit-Queue: Joe Gregorio <jcgregorio@google.com>
diff --git a/skottie/modules/skottie-sk/skottie-sk.js b/skottie/modules/skottie-sk/skottie-sk.js
index c97ba2e..932a7db 100644
--- a/skottie/modules/skottie-sk/skottie-sk.js
+++ b/skottie/modules/skottie-sk/skottie-sk.js
@@ -9,6 +9,7 @@
*/
import '../skottie-config-sk'
import '../skottie-player-sk'
+import 'elements-sk/collapse-sk'
import 'elements-sk/error-toast-sk'
import { $$ } from 'common-sk/modules/dom'
import { SKIA_VERSION } from '../../build/version.js'
@@ -50,12 +51,11 @@
}
const iframeDirections = (ele) => {
- if (ele._hash === '') {
- return ''
- }
- return html`
- <input size=120 value='<iframe width=${ele._state.width} height=${ele._state.height} src="${window.location.origin}/e/${ele._hash}" scrolling=no></iframe>'>
- `;
+ return `<iframe width="${ele._state.width}" height="${ele._state.height}" src="${window.location.origin}/e/${ele._hash}" scrolling=no>`;
+}
+
+const inlineDirections = (ele) => {
+ return `<skottie-inline-sk width="${ele._state.width}" height="${ele._state.height}" src="${window.location.origin}/_/j/${ele._hash}"></skottie-inline-sk>`;
}
const displayLoaded = (ele) => html`
@@ -69,9 +69,15 @@
</a>
${ele._hasEdits? '(without edits)': ''}
</div>
-<div class=embed>
- ${iframeDirections(ele)}
-</div>
+<button @click=${ele._toggleEmbed}>Embed</button>
+<collapse-sk id=embed closed>
+ <p>
+ <label>Embed using an iframe: <input size=120 value="${iframeDirections(ele)}" scrolling=no></label>
+ </p>
+ <p>
+ <label>Embed on skia.org: <input size=140 value="${inlineDirections(ele)}" scrolling=no></label>
+ </p>
+</collapse-sk>
<section class=figures>
<figure>
${skottiePlayer(ele)}
@@ -391,6 +397,11 @@
}
}
+ _toggleEmbed() {
+ let collapse = $$('#embed', this);
+ collapse.closed = !collapse.closed;
+ }
+
handleEvent(e) {
if (e.type == 'skottie-selected') {
this._state = e.detail;
diff --git a/skottie/modules/skottie-sk/skottie-sk.scss b/skottie/modules/skottie-sk/skottie-sk.scss
index ad19661..d9f6e7b 100644
--- a/skottie/modules/skottie-sk/skottie-sk.scss
+++ b/skottie/modules/skottie-sk/skottie-sk.scss
@@ -104,16 +104,12 @@
margin-left: 0.6em;
}
- .embed {
- display: inline-block;
+ #embed {
+ padding: 1em;
+ border: solid var(--light-gray) 1px;
+ margin: 1em;
+ background: var(--dark-white);
}
-
- .embed input {
- padding: 0.2em;
- border: solid var(--light-blue) 1px;
- margin: 0.6em;
- }
-
}
#json_editor button {
diff --git a/skottie/package.json b/skottie/package.json
index 14696db..7f97356 100644
--- a/skottie/package.json
+++ b/skottie/package.json
@@ -7,18 +7,18 @@
"dependencies": {
"@webcomponents/custom-elements": "^1.2.1",
"common-sk": "~3.1.0",
- "elements-sk": "~2.6.0",
+ "elements-sk": "~2.7.0",
"infra-sk": "^0.8.1",
"jsoneditor": "~5.24.3",
"lit-html": "~0.14.0",
- "lottie-web": "^5.4.2"
+ "lottie-web": "^5.4.3"
},
"devDependencies": {
"copy-webpack-plugin": "^4.6.0",
- "fetch-mock": "~7.2.5",
+ "fetch-mock": "~7.3.0",
"pulito": "^4.1.1",
- "webpack": "^4.27.1",
- "webpack-cli": "^3.1.2"
+ "webpack": "^4.28.1",
+ "webpack-cli": "^3.2.1"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
