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

Comparing version 0.0.29 to 0.0.30

a11y-gif-player.amd.js

@@ -1,1 +0,1 @@
-define(["./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(_polymerLegacy){"use strict";function _templateObject_1086b9c0db3311e88b839376d6bb6605(){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 id=\"gif\" alt$=\"[[alt]]\" src$=\"[[srcWithoutAnimation]]\" style=\"width:100%;height:100%;\">\n        <svg id=\"svg\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 200\" width=\"30%\" height=\"30%\">\n          <g opacity=\".5\">\n            <polygon points=\"30,20 30,180 170,100\" fill=\"#000000\" stroke=\"#ffffff\" stroke-width=\"15px\"></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 id=\"a11y\" keys=\"enter space\" on-keys-pressed=\"toggleAnimation\"></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 id=\"gif\" alt\\$=\"[[alt]]\" src\\$=\"[[srcWithoutAnimation]]\" style=\"width:100%;height:100%;\">\n        <svg id=\"svg\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 200\" width=\"30%\" height=\"30%\">\n          <g opacity=\".5\">\n            <polygon points=\"30,20 30,180 170,100\" fill=\"#000000\" stroke=\"#ffffff\" stroke-width=\"15px\"></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 id=\"a11y\" keys=\"enter space\" on-keys-pressed=\"toggleAnimation\"></iron-a11y-keys>\n"]);_templateObject_1086b9c0db3311e88b839376d6bb6605=function(){return data};return data}(0,_polymerLegacy.Polymer)({_template:(0,_polymerLegacy.html)(_templateObject_1086b9c0db3311e88b839376d6bb6605()),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(){this.setHaxProperties({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:[]}})}})});
+define(["./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(_polymerLegacy){"use strict";function _templateObject_a0331300dbb711e89af4d37148578aee(){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 id=\"gif\" alt$=\"[[alt]]\" src$=\"[[srcWithoutAnimation]]\" style=\"width:100%;height:100%;\">\n        <svg id=\"svg\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 200\" width=\"30%\" height=\"30%\">\n          <g opacity=\".5\">\n            <polygon points=\"30,20 30,180 170,100\" fill=\"#000000\" stroke=\"#ffffff\" stroke-width=\"15px\"></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 id=\"a11y\" keys=\"enter space\" on-keys-pressed=\"toggleAnimation\"></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 id=\"gif\" alt\\$=\"[[alt]]\" src\\$=\"[[srcWithoutAnimation]]\" style=\"width:100%;height:100%;\">\n        <svg id=\"svg\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 200\" width=\"30%\" height=\"30%\">\n          <g opacity=\".5\">\n            <polygon points=\"30,20 30,180 170,100\" fill=\"#000000\" stroke=\"#ffffff\" stroke-width=\"15px\"></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 id=\"a11y\" keys=\"enter space\" on-keys-pressed=\"toggleAnimation\"></iron-a11y-keys>\n"]);_templateObject_a0331300dbb711e89af4d37148578aee=function(){return data};return data}(0,_polymerLegacy.Polymer)({_template:(0,_polymerLegacy.html)(_templateObject_a0331300dbb711e89af4d37148578aee()),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(){this.setHaxProperties({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:[]}})}})});

build/es5-amd/a11y-gif-player.js

@@ -9,3 +9,3 @@ define([
   "use strict";
-  function _templateObject_1086b9c0db3311e88b839376d6bb6605() {
+  function _templateObject_a0331300dbb711e89af4d37148578aee() {
     var data = babelHelpers.taggedTemplateLiteral(
@@ -19,3 +19,3 @@ [
     );
-    _templateObject_1086b9c0db3311e88b839376d6bb6605 = function() {
+    _templateObject_a0331300dbb711e89af4d37148578aee = function() {
       return data;
@@ -27,3 +27,3 @@ };
     _template: (0, _polymerLegacy.html)(
-      _templateObject_1086b9c0db3311e88b839376d6bb6605()
+      _templateObject_a0331300dbb711e89af4d37148578aee()
     ),
@@ -30,0 +30,0 @@ is: "a11y-gif-player",

package.json

@@ -14,3 +14,3 @@ {
   },
-  "version": "0.0.29",
+  "version": "0.0.30",
   "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": "^0.0.29",
-    "@lrnwebcomponents/schema-behaviors": "^0.0.29",
+    "@lrnwebcomponents/hax-body-behaviors": "^0.0.30",
+    "@lrnwebcomponents/schema-behaviors": "^0.0.30",
     "@polymer/iron-a11y-keys": "^3.0.0",
@@ -66,3 +66,3 @@ "@polymer/iron-image": "^3.0.0",
   ],
-  "gitHead": "9a19006247e8f5523b63bdc4adb4e358fcf59090"
+  "gitHead": "47f880abc249252e1ee3a26eb759332bd8da7515"
 }

No alert changes

No metric changes

Dependency changes

• + Added@lrnwebcomponents/hax-body-behaviors@0.0.30(transitive)

• + Added@lrnwebcomponents/schema-behaviors@0.0.30(transitive)

• - Removed@lrnwebcomponents/hax-body-behaviors@0.0.29(transitive)

• - Removed@lrnwebcomponents/schema-behaviors@0.0.29(transitive)

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

• Updated@lrnwebcomponents/schema-behaviors@^0.0.30