@lrnwebcomponents/a11y-gif-player - npm Package Compare versions

Comparing version 2.0.7 to 2.0.8

a11y-gif-player.amd.js

@@ -1,1 +0,1 @@
-define(["exports","./node_modules/@polymer/polymer/polymer-legacy.js","./node_modules/@polymer/iron-a11y-keys/iron-a11y-keys.js","./node_modules/@polymer/iron-image/iron-image.js","./node_modules/@lrnwebcomponents/hax-body-behaviors/lib/HAXWiring.js","./node_modules/@lrnwebcomponents/schema-behaviors/schema-behaviors.js"],function(_exports,_polymerLegacy,_ironA11yKeys,_ironImage,_HAXWiring,_schemaBehaviors){"use strict";Object.defineProperty(_exports,"__esModule",{value:!0});_exports.A11yGifPlayer=void 0;function _templateObject_4b3b8ea034da11e98db31d8320b1ab7f(){var data=babelHelpers.taggedTemplateLiteral(["\n    <style>\n      :host {\n        display: block;\n      }\n      :host #gifbutton > * {\n        position: relative;\n      }\n      :host #svg {\n        position: absolute;\n        top: 35%;\n        left: 35%;\n      }\n      :host #gifbutton:active,\n      :host #gifbutton:focus,\n      :host #gifbutton:hover {\n        cursor: pointer;\n        outline: 1px solid blue;\n      }\n      :host #preload {\n        display: none;\n      }\n    </style>\n    <div id=\"gifbutton\" aria-role=\"button\" aria-controls=\"gif\" tabindex=\"0\">\n      <div>\n        <img\n          id=\"gif\"\n          alt$=\"[[alt]]\"\n          src$=\"[[srcWithoutAnimation]]\"\n          style=\"width:100%;height:100%;\"\n        />\n        <svg\n          id=\"svg\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 200 200\"\n          width=\"30%\"\n          height=\"30%\"\n        >\n          <g opacity=\".5\">\n            <polygon\n              points=\"30,20 30,180 170,100\"\n              fill=\"#000000\"\n              stroke=\"#ffffff\"\n              stroke-width=\"15px\"\n            ></polygon>\n            <text x=\"50\" y=\"115\" fill=\"#ffffff\" font-size=\"40px\">GIF</text>\n          </g>\n        </svg>\n      </div>\n    </div>\n    <iron-image id=\"preload\" src$=\"[[src]]\" hidden=\"\"></iron-image>\n    <iron-a11y-keys\n      id=\"a11y\"\n      keys=\"enter space\"\n      on-keys-pressed=\"toggleAnimation\"\n    ></iron-a11y-keys>\n  "],["\n    <style>\n      :host {\n        display: block;\n      }\n      :host #gifbutton > * {\n        position: relative;\n      }\n      :host #svg {\n        position: absolute;\n        top: 35%;\n        left: 35%;\n      }\n      :host #gifbutton:active,\n      :host #gifbutton:focus,\n      :host #gifbutton:hover {\n        cursor: pointer;\n        outline: 1px solid blue;\n      }\n      :host #preload {\n        display: none;\n      }\n    </style>\n    <div id=\"gifbutton\" aria-role=\"button\" aria-controls=\"gif\" tabindex=\"0\">\n      <div>\n        <img\n          id=\"gif\"\n          alt\\$=\"[[alt]]\"\n          src\\$=\"[[srcWithoutAnimation]]\"\n          style=\"width:100%;height:100%;\"\n        />\n        <svg\n          id=\"svg\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 200 200\"\n          width=\"30%\"\n          height=\"30%\"\n        >\n          <g opacity=\".5\">\n            <polygon\n              points=\"30,20 30,180 170,100\"\n              fill=\"#000000\"\n              stroke=\"#ffffff\"\n              stroke-width=\"15px\"\n            ></polygon>\n            <text x=\"50\" y=\"115\" fill=\"#ffffff\" font-size=\"40px\">GIF</text>\n          </g>\n        </svg>\n      </div>\n    </div>\n    <iron-image id=\"preload\" src\\$=\"[[src]]\" hidden=\"\"></iron-image>\n    <iron-a11y-keys\n      id=\"a11y\"\n      keys=\"enter space\"\n      on-keys-pressed=\"toggleAnimation\"\n    ></iron-a11y-keys>\n  "]);_templateObject_4b3b8ea034da11e98db31d8320b1ab7f=function _templateObject_4b3b8ea034da11e98db31d8320b1ab7f(){return data};return data}var A11yGifPlayer=(0,_polymerLegacy.Polymer)({_template:(0,_polymerLegacy.html)(_templateObject_4b3b8ea034da11e98db31d8320b1ab7f()),is:"a11y-gif-player",behaviors:[HAXBehaviors.PropertiesBehaviors,SchemaBehaviors.Schema],listeners:{tap:"toggleAnimation"},properties:{src:{type:String,value:null},srcWithoutAnimation:{type:String,value:null},alt:{type:String,value:null}},ready:function ready(){this.stop();this.$.a11y.target=this.$.gifbutton},play:function play(){this.__stopped=!0;this.toggleAnimation()},stop:function stop(){this.__stopped=!1;this.toggleAnimation()},toggleAnimation:function toggleAnimation(){if(this.__stopped){this.__stopped=!1;this.$.svg.style.visibility="hidden";if(null!=this.src){this.$.gif.src=this.src}this.$.gif.alt=this.alt+" (Stop animation.)"}else{this.__stopped=!0;this.$.svg.style.visibility="visible";if(null!=this.srcWithoutAnimation){this.$.gif.src=this.srcWithoutAnimation}this.$.gif.alt=this.alt+" (Play animation.)"}},attached:function attached(){var props={canScale:!0,canPosition:!0,canEditSource:!1,gizmo:{title:"Accessible GIF",description:"Makes animated GIFs accessible.",icon:"gif",color:"grey",groups:["Images","Media"],handles:[{type:"image",source:"src",source2:"srcWithoutAnimation",alt:"alt"}],meta:{author:"LRNWebComponents"}},settings:{quick:[{property:"src",title:"Animated GIF",description:"The URL to your animated GIF.",inputMethod:"textfield",icon:"link",validationType:"url",required:!0},{property:"srcWithoutAnimation",title:"Still Image",description:"The URL to a still image version of your GIF.",inputMethod:"textfield",icon:"link",validationType:"url",required:!0},{property:"alt",title:"Alt Text",description:"Alternative text for the image.",inputMethod:"textfield",icon:"accessibility",required:!0}],configure:[{property:"src",title:"Animated GIF",description:"The URL to your animated GIF.",inputMethod:"textfield",icon:"link",validationType:"url",required:!0},{property:"srcWithoutAnimation",title:"Still Image",description:"The URL to a still image version of your GIF.",inputMethod:"textfield",icon:"link",validationType:"url",required:!0},{property:"alt",title:"Alt Text",description:"Alternative text for the image.",inputMethod:"textfield",icon:"accessibility",required:!0}],advanced:[]}};this.setHaxProperties(props)}});_exports.A11yGifPlayer=A11yGifPlayer});
+define(["exports","./node_modules/@polymer/polymer/polymer-legacy.js","./node_modules/@polymer/iron-a11y-keys/iron-a11y-keys.js","./node_modules/@polymer/iron-image/iron-image.js","./node_modules/@lrnwebcomponents/hax-body-behaviors/lib/HAXWiring.js","./node_modules/@lrnwebcomponents/schema-behaviors/schema-behaviors.js"],function(_exports,_polymerLegacy,_ironA11yKeys,_ironImage,_HAXWiring,_schemaBehaviors){"use strict";Object.defineProperty(_exports,"__esModule",{value:!0});_exports.A11yGifPlayer=void 0;function _templateObject_ac60fd50459211e983bc5566251593a4(){var data=babelHelpers.taggedTemplateLiteral(["\n    <style>\n      :host {\n        display: block;\n      }\n      :host #gifbutton > * {\n        position: relative;\n      }\n      :host #svg {\n        position: absolute;\n        top: 35%;\n        left: 35%;\n      }\n      :host #gifbutton:active,\n      :host #gifbutton:focus,\n      :host #gifbutton:hover {\n        cursor: pointer;\n        outline: 1px solid blue;\n      }\n      :host #preload {\n        display: none;\n      }\n    </style>\n    <div id=\"gifbutton\" aria-role=\"button\" aria-controls=\"gif\" tabindex=\"0\">\n      <div>\n        <img\n          id=\"gif\"\n          alt$=\"[[alt]]\"\n          src$=\"[[srcWithoutAnimation]]\"\n          style=\"width:100%;height:100%;\"\n        />\n        <svg\n          id=\"svg\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 200 200\"\n          width=\"30%\"\n          height=\"30%\"\n        >\n          <g opacity=\".5\">\n            <polygon\n              points=\"30,20 30,180 170,100\"\n              fill=\"#000000\"\n              stroke=\"#ffffff\"\n              stroke-width=\"15px\"\n            ></polygon>\n            <text x=\"50\" y=\"115\" fill=\"#ffffff\" font-size=\"40px\">GIF</text>\n          </g>\n        </svg>\n      </div>\n    </div>\n    <iron-image id=\"preload\" src$=\"[[src]]\" hidden=\"\"></iron-image>\n    <iron-a11y-keys\n      id=\"a11y\"\n      keys=\"enter space\"\n      on-keys-pressed=\"toggleAnimation\"\n    ></iron-a11y-keys>\n  "],["\n    <style>\n      :host {\n        display: block;\n      }\n      :host #gifbutton > * {\n        position: relative;\n      }\n      :host #svg {\n        position: absolute;\n        top: 35%;\n        left: 35%;\n      }\n      :host #gifbutton:active,\n      :host #gifbutton:focus,\n      :host #gifbutton:hover {\n        cursor: pointer;\n        outline: 1px solid blue;\n      }\n      :host #preload {\n        display: none;\n      }\n    </style>\n    <div id=\"gifbutton\" aria-role=\"button\" aria-controls=\"gif\" tabindex=\"0\">\n      <div>\n        <img\n          id=\"gif\"\n          alt\\$=\"[[alt]]\"\n          src\\$=\"[[srcWithoutAnimation]]\"\n          style=\"width:100%;height:100%;\"\n        />\n        <svg\n          id=\"svg\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 200 200\"\n          width=\"30%\"\n          height=\"30%\"\n        >\n          <g opacity=\".5\">\n            <polygon\n              points=\"30,20 30,180 170,100\"\n              fill=\"#000000\"\n              stroke=\"#ffffff\"\n              stroke-width=\"15px\"\n            ></polygon>\n            <text x=\"50\" y=\"115\" fill=\"#ffffff\" font-size=\"40px\">GIF</text>\n          </g>\n        </svg>\n      </div>\n    </div>\n    <iron-image id=\"preload\" src\\$=\"[[src]]\" hidden=\"\"></iron-image>\n    <iron-a11y-keys\n      id=\"a11y\"\n      keys=\"enter space\"\n      on-keys-pressed=\"toggleAnimation\"\n    ></iron-a11y-keys>\n  "]);_templateObject_ac60fd50459211e983bc5566251593a4=function _templateObject_ac60fd50459211e983bc5566251593a4(){return data};return data}var A11yGifPlayer=(0,_polymerLegacy.Polymer)({_template:(0,_polymerLegacy.html)(_templateObject_ac60fd50459211e983bc5566251593a4()),is:"a11y-gif-player",behaviors:[HAXBehaviors.PropertiesBehaviors,SchemaBehaviors.Schema],listeners:{tap:"toggleAnimation"},properties:{src:{type:String,value:null},srcWithoutAnimation:{type:String,value:null},alt:{type:String,value:null}},ready:function ready(){this.stop();this.$.a11y.target=this.$.gifbutton},play:function play(){this.__stopped=!0;this.toggleAnimation()},stop:function stop(){this.__stopped=!1;this.toggleAnimation()},toggleAnimation:function toggleAnimation(){if(this.__stopped){this.__stopped=!1;this.$.svg.style.visibility="hidden";if(null!=this.src){this.$.gif.src=this.src}this.$.gif.alt=this.alt+" (Stop animation.)"}else{this.__stopped=!0;this.$.svg.style.visibility="visible";if(null!=this.srcWithoutAnimation){this.$.gif.src=this.srcWithoutAnimation}this.$.gif.alt=this.alt+" (Play animation.)"}},attached:function attached(){var props={canScale:!0,canPosition:!0,canEditSource:!1,gizmo:{title:"Accessible GIF",description:"Makes animated GIFs accessible.",icon:"gif",color:"grey",groups:["Images","Media"],handles:[{type:"image",source:"src",source2:"srcWithoutAnimation",alt:"alt"}],meta:{author:"LRNWebComponents"}},settings:{quick:[{property:"src",title:"Animated GIF",description:"The URL to your animated GIF.",inputMethod:"textfield",icon:"link",validationType:"url",required:!0},{property:"srcWithoutAnimation",title:"Still Image",description:"The URL to a still image version of your GIF.",inputMethod:"textfield",icon:"link",validationType:"url",required:!0},{property:"alt",title:"Alt Text",description:"Alternative text for the image.",inputMethod:"textfield",icon:"accessibility",required:!0}],configure:[{property:"src",title:"Animated GIF",description:"The URL to your animated GIF.",inputMethod:"textfield",icon:"link",validationType:"url",required:!0},{property:"srcWithoutAnimation",title:"Still Image",description:"The URL to a still image version of your GIF.",inputMethod:"textfield",icon:"link",validationType:"url",required:!0},{property:"alt",title:"Alt Text",description:"Alternative text for the image.",inputMethod:"textfield",icon:"accessibility",required:!0}],advanced:[]}};this.setHaxProperties(props)}});_exports.A11yGifPlayer=A11yGifPlayer});

a11y-gif-player.story.js

@@ -1,56 +0,32 @@
-import { storiesOf } from "@storybook/polymer";
-import * as storybookBridge from "@storybook/addon-knobs/polymer";
 import { A11yGifPlayer } from "./a11y-gif-player.js";
-// need to account for polymer goofiness when webpack rolls this up
-var template = require("raw-loader!./demo/index.html");
-let pattern = /<body[^>]*>((.|[\n\r])*)<\/body>/im;
-var array_matches = pattern.exec(template);
-// now template is just the body contents
-template = array_matches[1];
-const stories = storiesOf("11", module);
-stories.addDecorator(storybookBridge.withKnobs);
-stories.add("a11y-gif-player", () => {
-  var binding = {};
-  // start of tag for demo
-  let elementDemo = `<a11y-gif-player`;
-  // mix in properties defined on the class
-  for (var key in A11yGifPlayer.properties) {
-    // skip prototype
-    if (!A11yGifPlayer.properties.hasOwnProperty(key)) continue;
-    // convert typed props
-    if (A11yGifPlayer.properties[key].type.name) {
-      let method = "text";
-      switch (A11yGifPlayer.properties[key].type.name) {
-        case "Boolean":
-        case "Number":
-        case "Object":
-        case "Array":
-        case "Date":
-          method = A11yGifPlayer.properties[key].type.name.toLowerCase();
-          break;
-        default:
-          method = "text";
-          break;
-      }
-      binding[key] = storybookBridge[method](
-        key,
-        A11yGifPlayer.properties[key].value
-      );
-      // ensure ke-bab case
-      let kebab = key.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g, function(
-        match
-      ) {
-        return "-" + match.toLowerCase();
-      });
-      elementDemo += ` ${kebab}="${binding[key]}"`;
-    }
-  }
-  const innerText = storybookBridge.text("Inner contents", "11");
-  elementDemo += `> ${innerText}</a11y-gif-player>`;
-  return `
-  <h1>Live demo</h1>
-  ${elementDemo}
-  <h1>Additional examples</h1>
-  ${template}
-  `;
-});
+import { StorybookUtilities } from "@lrnwebcomponents/storybook-utilities/storybook-utilities.js";
+
+window.StorybookUtilities.requestAvailability();
+
+/**
+ * add to the pattern library
+ */
+const A11yGifPlayerPattern = {
+  "of": "Pattern Library/Molecules/Media", 
+  "name": 'GIF',
+  "file": require("raw-loader!./demo/index.html"),
+  "replacements": []
+}
+window.StorybookUtilities.instance.addPattern(A11yGifPlayerPattern);
+
+/**
+ * add the live demo
+ */
+const A11yGifPlayerStory = {
+  "of": "a11y-gif-player",
+  "name": "a11y-gif-player",
+  "props": {
+    "alt": {"name": "alt", "type": "String", "value": "IT Crowd: Moss eating popcorn." },
+    "src": {"name": "src", "type": "File", "value": "https://media.giphy.com/media/TrDxCdtmdluP6/giphy.gif" },
+    "srcWithoutAnimation": {"name": "srcWithoutAnimation", "type": "File", "value": "https://media.giphy.com/media/TrDxCdtmdluP6/480w_s.jpg" }
+  }, 
+  "slots": {}, 
+  "attr": ` style="width: 300px"`,
+  "slotted": ``
+};
+window.StorybookUtilities.instance.addLiveDemo(A11yGifPlayerStory);

package.json

@@ -14,3 +14,3 @@ {
   },
-  "version": "2.0.7",
+  "version": "2.0.8",
   "description": "Play gifs in an accessible way by having the user click to play their animation",
@@ -39,4 +39,4 @@ "repository": {
   "dependencies": {
-    "@lrnwebcomponents/hax-body-behaviors": "^2.0.5",
-    "@lrnwebcomponents/schema-behaviors": "^2.0.5",
+    "@lrnwebcomponents/hax-body-behaviors": "^2.0.8",
+    "@lrnwebcomponents/schema-behaviors": "^2.0.8",
     "@polymer/iron-a11y-keys": "^3.0.0",
@@ -47,3 +47,4 @@ "@polymer/iron-image": "^3.0.0",
   "devDependencies": {
-    "@lrnwebcomponents/deduping-fix": "^2.0.5",
+    "@lrnwebcomponents/deduping-fix": "^2.0.8",
+    "@lrnwebcomponents/storybook-utilities": "^2.0.8",
     "@polymer/iron-component-page": "github:PolymerElements/iron-component-page",
@@ -68,3 +69,3 @@ "@polymer/iron-demo-helpers": "3.0.2",
   ],
-  "gitHead": "33e63ccd15a4f3edd788b4a843c2d15f7089cae6"
+  "gitHead": "e32dcb0831ec951b08cedb01a8f9b5c2e3bcfdaf"
 }

No alert changes

Worsened metrics

Total package byte prevSize

74325

decreased by-96.22%

Dev dependency count

12

increased by9.09%

Number of package files

21

decreased by-16%

Lines of code

1197

decreased by-2.29%

Dependency changes

• Updated@lrnwebcomponents/hax-body-behaviors@^2.0.8

• Updated@lrnwebcomponents/schema-behaviors@^2.0.8