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

Comparing version 4.1.0 to 4.1.1

a11y-gif-player.js

@@ -5,3 +5,3 @@ /**
  */
-import { LitElement, html, css, nothing } from "lit";
+import { LitElement, html, css } from "lit";
 import { SchemaBehaviors } from "@lrnwebcomponents/schema-behaviors/schema-behaviors.js";
@@ -45,3 +45,2 @@ import { IntersectionObserverMixin } from "@lrnwebcomponents/intersection-element/lib/IntersectionObserverMixin.js";
     this.disabled = false;
-    this.tooltip = "";
     this.__playing = false;
@@ -139,8 +138,2 @@ this._updateFromSlot();
         }
-        simple-tooltip {
-          --simple-tooltip-background: #000000;
-          --simple-tooltip-opacity: 1;
-          --simple-tooltip-text-color: #ffffff;
-          --simple-tooltip-delay-in: 0;
-        }
       `,
@@ -176,3 +169,3 @@ ];
                 />`
-              : nothing}
+              : ``}
 
@@ -198,7 +191,2 @@ <button
               </svg>
-              <span class="sr-only">
-                ${this.__playing && this.tooltipPlaying
-                  ? this.tooltipPlaying
-                  : this.tooltip}
-              </span>
             </button>
@@ -214,9 +202,4 @@ <a11y-details
           </div>
-          <simple-tooltip for="button" offset="30" animation-delay="0">
-            ${this.__playing && this.tooltipPlaying
-              ? this.tooltipPlaying
-              : this.tooltip}
-          </simple-tooltip>
         `
-      : nothing} `;
+      : ``} `;
   }
@@ -275,15 +258,2 @@ /**
       /**
-       * default tooltip
-       */
-      tooltip: {
-        type: String,
-      },
-      /**
-       * tooltip when playing
-       */
-      tooltipPlaying: {
-        type: String,
-        attribute: "tooltip-playing",
-      },
-      /**
        * whether GIF is playing
@@ -311,6 +281,35 @@ */
         import("@lrnwebcomponents/a11y-details/a11y-details.js");
-        import("@lrnwebcomponents/simple-tooltip/simple-tooltip.js");
+        // support for automatic web service scrape of the gif for a still image
+        if (this.shadowRoot && !this.srcWithoutAnimation && this.src) {
+          // import registry
+          import(
+            "@lrnwebcomponents/micro-frontend-registry/micro-frontend-registry.js"
+          ).then(() => {
+            this._automaticStill = true;
+            this.srcWithoutAnimation = this.generateStill(this.src);
+          });
+        }
       }
+      // support src changing after the fact, we are visible, and set to automatic generation
+      if (
+        this.shadowRoot &&
+        propName === "src" &&
+        this[propName] &&
+        this.elementVisible &&
+        this._automaticStill
+      ) {
+        this.srcWithoutAnimation = this.generateStill(this.src);
+      }
     });
   }
+  generateStill(src) {
+    // enable core services, though should be available
+    const MicroFrontendRegistry =
+      window.MicroFrontendRegistry.requestAvailability();
+    MicroFrontendRegistry.enableServices(["core"]);
+    return MicroFrontendRegistry.url("@core/imgManipulate", {
+      quality: 50,
+      src: src,
+    });
+  }
   /**
@@ -330,3 +329,3 @@ * mutation observer for a11y-details
       childList: true,
-      subtree: false,
+      subtree: true,
     });
@@ -386,7 +385,17 @@ window.addEventListener("beforeprint", (event) => {
   _updateFromSlot() {
-    let img = this.querySelector("img"),
-      src = img ? img.src : undefined,
-      alt = img ? img.alt : undefined;
-    if (src) this.srcWithoutAnimation = src;
-    if (alt) this.alt = alt;
+    let img = this.querySelector("img");
+    if (img) {
+      let src = img.src || null;
+      let alt = img.alt || null;
+      if (src) this.srcWithoutAnimation = src;
+      if (alt) this.alt = alt;
+    }
+    // support simple-img tag since it can auto-convert gif to static!
+    img = this.querySelector("simple-img");
+    if (img) {
+      let src = img.srcconverted || null;
+      let alt = img.alt || null;
+      if (src) this.srcWithoutAnimation = src;
+      if (alt) this.alt = alt;
+    }
   }
@@ -403,3 +412,3 @@ /**
 }
-window.customElements.define(A11yGifPlayer.tag, A11yGifPlayer);
+customElements.define(A11yGifPlayer.tag, A11yGifPlayer);
 export { A11yGifPlayer };

a11y-gif-player.stories.js

@@ -15,5 +15,9 @@ import { html } from "lit-html";
 
+const utils = new StorybookUtilities();
 export const A11yGifPlayerStory = () => {
-  const utils = new StorybookUtilities();
-  return utils.makeElementFromHaxDemo(A11yGifPlayer);
+  return utils.makeUsageDocs(
+    A11yGifPlayer,
+    import.meta.url,
+    utils.makeElementFromHaxDemo(A11yGifPlayer)
+  );
 };

a11y-gif-player.umd.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@lrnwebcomponents/simple-tooltip/simple-tooltip.js"),require("@lrnwebcomponents/a11y-details/a11y-details.js"),require("lit"),require("@lrnwebcomponents/schema-behaviors/schema-behaviors.js"),require("@lrnwebcomponents/intersection-element/lib/IntersectionObserverMixin.js"),require("@lrnwebcomponents/i18n-manager/lib/I18NMixin.js")):"function"==typeof define&&define.amd?define(["exports","@lrnwebcomponents/simple-tooltip/simple-tooltip.js","@lrnwebcomponents/a11y-details/a11y-details.js","lit","@lrnwebcomponents/schema-behaviors/schema-behaviors.js","@lrnwebcomponents/intersection-element/lib/IntersectionObserverMixin.js","@lrnwebcomponents/i18n-manager/lib/I18NMixin.js"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).A11yGifPlayer={},null,null,e.lit,e.schemaBehaviors_js,e.IntersectionObserverMixin_js,e.I18NMixin_js)}(this,(function(e,t,n,o,i,r,a){"use strict";function l(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function s(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?l(Object(n),!0).forEach((function(t){u(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):l(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function u(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function p(e){return p=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)},p(e)}function f(e,t){return f=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e},f(e,t)}function d(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function y(e,t){if(t&&("object"==typeof t||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return d(e)}function b(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,o=p(e);if(t){var i=p(this).constructor;n=Reflect.construct(o,arguments,i)}else n=o.apply(this,arguments);return y(this,n)}}function g(e,t){for(;!Object.prototype.hasOwnProperty.call(e,t)&&null!==(e=p(e)););return e}function h(){return h="undefined"!=typeof Reflect&&Reflect.get?Reflect.get:function(e,t,n){var o=g(e,t);if(o){var i=Object.getOwnPropertyDescriptor(o,t);return i.get?i.get.call(arguments.length<3?e:n):i.value}},h.apply(this,arguments)}function m(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}var v,w,_,O,j=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&f(e,t)}(a,e);var t,n,i,r=b(a);function a(){var e;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,a),(e=r.call(this)).__gifLoaded=!1,e.disabled=!1,e.tooltip="",e.__playing=!1,e._updateFromSlot(),e.t={toggleAnimation:"Toggle animation"},e.registerLocalization({context:d(e),basePath:"undefined"==typeof document&&"undefined"==typeof location?new(require("url").URL)("file:"+__filename).href:"undefined"==typeof document?location.href:document.currentScript&&document.currentScript.src||new URL("a11y-gif-player.umd.js",document.baseURI).href,locales:["es"]}),e}return t=a,i=[{key:"styles",get:function(){return[o.css(O||(O=m(['\n        :host {\n          display: block;\n        }\n        :host([hidden]) {\n          display: none;\n        }\n        .sr-only {\n          position: absolute;\n          left: -9999999px;\n          top: 0;\n          width: 0;\n          overflow: hidden;\n        }\n        #container {\n          padding: 0;\n          margin: 0;\n          position: relative;\n          border: var(--a11y-gif-player-border, none);\n          border-radius: var(--a11y-gif-player-border-radius, 0);\n        }\n        img {\n          width: 100%;\n        }\n        button {\n          position: absolute;\n          width: 100%;\n          top: 0;\n          left: 0;\n          bottom: 0;\n          right: 0;\n          background-size: contain;\n          background-color: var(--a11y-gif-player-button-bg, #cccccc);\n        }\n        button:active,\n        button:focus,\n        button:hover {\n          border: var(--a11y-gif-player-focus-border, none);\n          outline: var(--a11y-gif-player-outline, 3px solid);\n        }\n        button[disabled] {\n          cursor: var(--a11y-gif-player-disabled-cursor, not-allowed);\n        }\n        button[aria-pressed="true"] {\n          opacity: 0;\n        }\n        svg {\n          position: absolute;\n          top: 35%;\n          left: 35%;\n          width: var(--a11y-gif-player-arrow-size, 30%);\n          height: var(--a11y-gif-player-arrow-size, 30%);\n        }\n        g {\n          opacity: var(--a11y-gif-player-arrow-opacity, 0.5);\n        }\n        button:not([disabled]):active g,\n        button:not([disabled]):hover g,\n        button:not([disabled]):focus g {\n          opacity: var(--a11y-gif-player-button-focus-opacity, 0.7);\n        }\n        polygon {\n          fill: var(--a11y-gif-player-button-color, #000000);\n          stroke: var(--a11y-gif-player-arrow-border-color, #ffffff);\n          stroke-width: var(--a11y-gif-player-arrow-border-width, 15px);\n        }\n        text {\n          fill: var(--a11y-gif-player-button-text-color, #ffffff);\n        }\n        #longdesc {\n          position: absolute;\n          left: 2px;\n          bottom: 2px;\n          width: calc(100% - 2px);\n          font-size: 80%;\n        }\n        simple-tooltip {\n          --simple-tooltip-background: #000000;\n          --simple-tooltip-opacity: 1;\n          --simple-tooltip-text-color: #ffffff;\n          --simple-tooltip-delay-in: 0;\n        }\n      '])))]}},{key:"tag",get:function(){return"a11y-gif-player"}},{key:"properties",get:function(){return s(s({},h(p(a),"properties",this)),{},{alt:{type:String},disabled:{type:Boolean},describedBy:{attribute:"described-by",type:String},longdesc:{type:String,attribute:"longdesc"},src:{type:String},srcWithoutAnimation:{type:String,attribute:"src-without-animation"},tooltip:{type:String},tooltipPlaying:{type:String,attribute:"tooltip-playing"},__playing:{type:Boolean},__gifLoaded:{type:Boolean}})}},{key:"haxProperties",get:function(){return decodeURIComponent("undefined"==typeof document&&"undefined"==typeof location?new(require("url").URL)("file:"+__filename).href:"undefined"==typeof document?location.href:document.currentScript&&document.currentScript.src||new URL("a11y-gif-player.umd.js",document.baseURI).href)+"/../lib/".concat(this.tag,".haxProperties.json")}}],(n=[{key:"__imageLoaded",value:function(e){this.__gifLoaded=!0}},{key:"render",value:function(){return o.html(v||(v=m([""," "])),this.elementVisible?o.html(w||(w=m(['\n          <div id="container">\n            <slot hidden></slot>\n            <img\n              src="','"\n              alt="','"\n              loading="lazy"\n              aria-describedby="'," ",'"\n              slot="summary"\n            />\n            ','\n\n            <button\n              id="button"\n              aria-controls="gif"\n              aria-pressed="','"\n              @click="','"\n              ?disabled="','"\n              .style="background-image: url(\'','\')"\n            >\n              <svg\n                id="svg"\n                aria-hidden="true"\n                xmlns="http://www.w3.org/2000/svg"\n                viewBox="0 0 200 200"\n              >\n                <g>\n                  <polygon points="30,20 30,180 170,100"></polygon>\n                  <text x="50" y="115" font-size="40px">GIF</text>\n                </g>\n              </svg>\n              <span class="sr-only">\n                ','\n              </span>\n            </button>\n            <a11y-details\n              id="longdesc"\n              ?hidden="','"\n              .style="opacity:','"\n            >\n              <div slot="summary">info</div>\n              <div slot="details">','</div>\n            </a11y-details>\n          </div>\n          <simple-tooltip for="button" offset="30" animation-delay="0">\n            ',"\n          </simple-tooltip>\n        "])),this.__gifLoaded&&this.__playing?this.src:this.srcWithoutAnimation,this.alt,this.longdesc?"longdesc":"",(this.describedBy||"").trim(),this.__playing?o.html(_||(_=m(['<img\n                  src="','"\n                  alt=""\n                  hidden\n                  slot="summary"\n                  @load="','"\n                />'])),this.src,this.__imageLoaded):o.nothing,this.__playing?"true":"false",this.toggle,this.disabled||!this.src,this.srcWithoutAnimation,this.__playing&&this.tooltipPlaying?this.tooltipPlaying:this.tooltip,!this.src||!this.longdesc,this.__playing?0:1,this.longdesc,this.__playing&&this.tooltipPlaying?this.tooltipPlaying:this.tooltip):o.nothing)}},{key:"updated",value:function(e){var t=this;h(p(a.prototype),"updated",this).call(this,e),e.forEach((function(e,n){"elementVisible"===n&&t[n]}))}},{key:"observer",get:function(){var e=this;return new MutationObserver((function(){return e._updateFromSlot()}))}},{key:"connectedCallback",value:function(){var e=this;h(p(a.prototype),"connectedCallback",this)&&h(p(a.prototype),"connectedCallback",this).call(this),this.observer.observe(this,{attributes:!1,childList:!0,subtree:!1}),window.addEventListener("beforeprint",(function(t){e.shadowRoot.querySelector("#longdesc").toggleOpen()})),window.addEventListener("afterprint",(function(t){e.shadowRoot.querySelector("#longdesc").toggleOpen()}))}},{key:"disconnectedCallback",value:function(){var e=this;h(p(a.prototype),"disconnectedCallback",this)&&h(p(a.prototype),"disconnectedCallback",this).call(this),this.observer.disconnect(),window.removeEventListener("beforeprint",(function(t){e.shadowRoot.querySelector("#longdesc").toggleOpen()})),window.removeEventListener("afterprint",(function(t){e.shadowRoot.querySelector("#longdesc").toggleOpen()}))}},{key:"play",value:function(){this.__playing=!0}},{key:"stop",value:function(){this.__playing=!1}},{key:"toggle",value:function(){this.__playing?this.stop():this.play()}},{key:"toggleAnimation",value:function(){this.__playing?this.stop():this.play()}},{key:"_updateFromSlot",value:function(){var e=this.querySelector("img"),t=e?e.src:void 0,n=e?e.alt:void 0;t&&(this.srcWithoutAnimation=t),n&&(this.alt=n)}}])&&c(t.prototype,n),i&&c(t,i),Object.defineProperty(t,"prototype",{writable:!1}),a}(a.I18NMixin(r.IntersectionObserverMixin(i.SchemaBehaviors(o.LitElement))));window.customElements.define(j.tag,j),e.A11yGifPlayer=j,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@lrnwebcomponents/micro-frontend-registry/micro-frontend-registry.js"),require("@lrnwebcomponents/a11y-details/a11y-details.js"),require("lit"),require("@lrnwebcomponents/schema-behaviors/schema-behaviors.js"),require("@lrnwebcomponents/intersection-element/lib/IntersectionObserverMixin.js"),require("@lrnwebcomponents/i18n-manager/lib/I18NMixin.js")):"function"==typeof define&&define.amd?define(["exports","@lrnwebcomponents/micro-frontend-registry/micro-frontend-registry.js","@lrnwebcomponents/a11y-details/a11y-details.js","lit","@lrnwebcomponents/schema-behaviors/schema-behaviors.js","@lrnwebcomponents/intersection-element/lib/IntersectionObserverMixin.js","@lrnwebcomponents/i18n-manager/lib/I18NMixin.js"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).A11yGifPlayer={},e.$$0,null,e.lit,e.schemaBehaviors_js,e.IntersectionObserverMixin_js,e.I18NMixin_js)}(this,(function(e,t,n,r,o,i,a){"use strict";function s(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var l,c,u,f,d=s(t);function p(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function y(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?p(Object(n),!0).forEach((function(t){g(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):p(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function b(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,P(r.key),r)}}function g(e,t,n){return(t=P(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function h(e){return h=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},h(e)}function v(e,t){return v=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},v(e,t)}function m(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function w(e,t){if(t&&("object"==typeof t||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return m(e)}function O(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,r=h(e);if(t){var o=h(this).constructor;n=Reflect.construct(r,arguments,o)}else n=r.apply(this,arguments);return w(this,n)}}function _(e,t){for(;!Object.prototype.hasOwnProperty.call(e,t)&&null!==(e=h(e)););return e}function j(){return j="undefined"!=typeof Reflect&&Reflect.get?Reflect.get.bind():function(e,t,n){var r=_(e,t);if(r){var o=Object.getOwnPropertyDescriptor(r,t);return o.get?o.get.call(arguments.length<3?e:n):o.value}},j.apply(this,arguments)}function k(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}function P(e){var t=function(e,t){if("object"!=typeof e||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t||"default");if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:String(t)}var S=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&v(e,t)}(a,e);var t,n,o,i=O(a);function a(){var e;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,a),(e=i.call(this)).__gifLoaded=!1,e.disabled=!1,e.__playing=!1,e._updateFromSlot(),e.t={toggleAnimation:"Toggle animation"},e.registerLocalization({context:m(e),basePath:"undefined"==typeof document&&"undefined"==typeof location?new(require("url").URL)("file:"+__filename).href:"undefined"==typeof document?location.href:document.currentScript&&document.currentScript.src||new URL("a11y-gif-player.umd.js",document.baseURI).href,locales:["es"]}),e}return t=a,o=[{key:"styles",get:function(){return[r.css(f||(f=k(['\n        :host {\n          display: block;\n        }\n        :host([hidden]) {\n          display: none;\n        }\n        .sr-only {\n          position: absolute;\n          left: -9999999px;\n          top: 0;\n          width: 0;\n          overflow: hidden;\n        }\n        #container {\n          padding: 0;\n          margin: 0;\n          position: relative;\n          border: var(--a11y-gif-player-border, none);\n          border-radius: var(--a11y-gif-player-border-radius, 0);\n        }\n        img {\n          width: 100%;\n        }\n        button {\n          position: absolute;\n          width: 100%;\n          top: 0;\n          left: 0;\n          bottom: 0;\n          right: 0;\n          background-size: contain;\n          background-color: var(--a11y-gif-player-button-bg, #cccccc);\n        }\n        button:active,\n        button:focus,\n        button:hover {\n          border: var(--a11y-gif-player-focus-border, none);\n          outline: var(--a11y-gif-player-outline, 3px solid);\n        }\n        button[disabled] {\n          cursor: var(--a11y-gif-player-disabled-cursor, not-allowed);\n        }\n        button[aria-pressed="true"] {\n          opacity: 0;\n        }\n        svg {\n          position: absolute;\n          top: 35%;\n          left: 35%;\n          width: var(--a11y-gif-player-arrow-size, 30%);\n          height: var(--a11y-gif-player-arrow-size, 30%);\n        }\n        g {\n          opacity: var(--a11y-gif-player-arrow-opacity, 0.5);\n        }\n        button:not([disabled]):active g,\n        button:not([disabled]):hover g,\n        button:not([disabled]):focus g {\n          opacity: var(--a11y-gif-player-button-focus-opacity, 0.7);\n        }\n        polygon {\n          fill: var(--a11y-gif-player-button-color, #000000);\n          stroke: var(--a11y-gif-player-arrow-border-color, #ffffff);\n          stroke-width: var(--a11y-gif-player-arrow-border-width, 15px);\n        }\n        text {\n          fill: var(--a11y-gif-player-button-text-color, #ffffff);\n        }\n        #longdesc {\n          position: absolute;\n          left: 2px;\n          bottom: 2px;\n          width: calc(100% - 2px);\n          font-size: 80%;\n        }\n      '])))]}},{key:"tag",get:function(){return"a11y-gif-player"}},{key:"properties",get:function(){return y(y({},j(h(a),"properties",this)),{},{alt:{type:String},disabled:{type:Boolean},describedBy:{attribute:"described-by",type:String},longdesc:{type:String,attribute:"longdesc"},src:{type:String},srcWithoutAnimation:{type:String,attribute:"src-without-animation"},__playing:{type:Boolean},__gifLoaded:{type:Boolean}})}},{key:"haxProperties",get:function(){return decodeURIComponent("undefined"==typeof document&&"undefined"==typeof location?new(require("url").URL)("file:"+__filename).href:"undefined"==typeof document?location.href:document.currentScript&&document.currentScript.src||new URL("a11y-gif-player.umd.js",document.baseURI).href)+"/../lib/".concat(this.tag,".haxProperties.json")}}],(n=[{key:"__imageLoaded",value:function(e){this.__gifLoaded=!0}},{key:"render",value:function(){return r.html(l||(l=k([""," "])),this.elementVisible?r.html(c||(c=k(['\n          <div id="container">\n            <slot hidden></slot>\n            <img\n              src="','"\n              alt="','"\n              loading="lazy"\n              aria-describedby="'," ",'"\n              slot="summary"\n            />\n            ','\n\n            <button\n              id="button"\n              aria-controls="gif"\n              aria-pressed="','"\n              @click="','"\n              ?disabled="','"\n              .style="background-image: url(\'','\')"\n            >\n              <svg\n                id="svg"\n                aria-hidden="true"\n                xmlns="http://www.w3.org/2000/svg"\n                viewBox="0 0 200 200"\n              >\n                <g>\n                  <polygon points="30,20 30,180 170,100"></polygon>\n                  <text x="50" y="115" font-size="40px">GIF</text>\n                </g>\n              </svg>\n            </button>\n            <a11y-details\n              id="longdesc"\n              ?hidden="','"\n              .style="opacity:','"\n            >\n              <div slot="summary">info</div>\n              <div slot="details">',"</div>\n            </a11y-details>\n          </div>\n        "])),this.__gifLoaded&&this.__playing?this.src:this.srcWithoutAnimation,this.alt,this.longdesc?"longdesc":"",(this.describedBy||"").trim(),this.__playing?r.html(u||(u=k(['<img\n                  src="','"\n                  alt=""\n                  hidden\n                  slot="summary"\n                  @load="','"\n                />'])),this.src,this.__imageLoaded):"",this.__playing?"true":"false",this.toggle,this.disabled||!this.src,this.srcWithoutAnimation,!this.src||!this.longdesc,this.__playing?0:1,this.longdesc):"")}},{key:"updated",value:function(e){var t=this;j(h(a.prototype),"updated",this).call(this,e),e.forEach((function(e,n){"elementVisible"===n&&t[n]&&t.shadowRoot&&!t.srcWithoutAnimation&&t.src&&Promise.resolve(d).then((function(){t._automaticStill=!0,t.srcWithoutAnimation=t.generateStill(t.src)})),t.shadowRoot&&"src"===n&&t[n]&&t.elementVisible&&t._automaticStill&&(t.srcWithoutAnimation=t.generateStill(t.src))}))}},{key:"generateStill",value:function(e){var t=window.MicroFrontendRegistry.requestAvailability();return t.enableServices(["core"]),t.url("@core/imgManipulate",{quality:50,src:e})}},{key:"observer",get:function(){var e=this;return new MutationObserver((function(){return e._updateFromSlot()}))}},{key:"connectedCallback",value:function(){var e=this;j(h(a.prototype),"connectedCallback",this)&&j(h(a.prototype),"connectedCallback",this).call(this),this.observer.observe(this,{attributes:!1,childList:!0,subtree:!0}),window.addEventListener("beforeprint",(function(t){e.shadowRoot.querySelector("#longdesc").toggleOpen()})),window.addEventListener("afterprint",(function(t){e.shadowRoot.querySelector("#longdesc").toggleOpen()}))}},{key:"disconnectedCallback",value:function(){var e=this;j(h(a.prototype),"disconnectedCallback",this)&&j(h(a.prototype),"disconnectedCallback",this).call(this),this.observer.disconnect(),window.removeEventListener("beforeprint",(function(t){e.shadowRoot.querySelector("#longdesc").toggleOpen()})),window.removeEventListener("afterprint",(function(t){e.shadowRoot.querySelector("#longdesc").toggleOpen()}))}},{key:"play",value:function(){this.__playing=!0}},{key:"stop",value:function(){this.__playing=!1}},{key:"toggle",value:function(){this.__playing?this.stop():this.play()}},{key:"toggleAnimation",value:function(){this.__playing?this.stop():this.play()}},{key:"_updateFromSlot",value:function(){var e=this.querySelector("img");if(e){var t=e.src||null,n=e.alt||null;t&&(this.srcWithoutAnimation=t),n&&(this.alt=n)}if(e=this.querySelector("simple-img")){var r=e.srcconverted||null,o=e.alt||null;r&&(this.srcWithoutAnimation=r),o&&(this.alt=o)}}}])&&b(t.prototype,n),o&&b(t,o),Object.defineProperty(t,"prototype",{writable:!1}),a}(a.I18NMixin(i.IntersectionObserverMixin(o.SchemaBehaviors(r.LitElement))));customElements.define(S.tag,S),e.A11yGifPlayer=S,Object.defineProperty(e,"__esModule",{value:!0})}));

custom-elements.json

@@ -6,3 +6,3 @@ {
       "name": "a11y-gif-player",
-      "description": "`a11y-gif-player`\nplays gifs in an accessible way by having the user click to play their animation\n### Styling\n\n`<a11y-gif-player>` provides the following custom properties\nfor styling:\n\nCustom property | Description | Default\n----------------|-------------|----------\n`--a11y-gif-player-border` | border around player/button | none\n`--a11y-gif-player-border-radius` | border-radius for player/button | 0\n`--a11y-gif-player-focus-border` | border-radius for player/button when hovered or focused | none\n`--a11y-gif-player-cursor` | cursor for player/button when hovered or focused | pointer\n`--a11y-gif-player-outline` | outline for player/button when hovered or focused | \n`--a11y-gif-player-disabled-cursor` | cursor for player/button when disabled | not-allowed\n`--a11y-gif-player-arrow-size` | arrow icon size | 30%\n`--a11y-gif-player-arrow-opacity` | default arrow icon opacity | 0.5\n`--a11y-gif-player-button-focus-opacity` | arrow icon opacity when hovered or focused | 0.7\n`--a11y-gif-player-button-color` | arrow icon color | #000000\n`--a11y-gif-player-arrow-border-color` | arrow icon border color | #ffffff\n`--a11y-gif-player-arrow-border-width` | arrow icon border width | 15px\n`--a11y-gif-player-button-text-color` | arrow icon text color | #ffffff\n`--a11y-gif-player-button-bg` | button background color when no static image | #cccccc\n\nAttributes:\n\n  * `alt` {`string`} - Alt text of gif\n\n  * `described-by` {`string`} - other id's to add to aria-describedby\n\n  * `longdesc` {`string`} - longer image description for accesibility\n\n  * `src` {`string`} - Source of animated gif\n\n  * `src-without-animation` {`string`} - Source of static version of image\n\n  * `tooltip-playing` {`string`} - tooltip when playing\n\n  * `__gifLoaded` {`boolean`} - if the gif source is loaded to avoid jarring on load\n\n  * `disabled` {`boolean`} - Whether button is disabled\n\n  * `tooltip` {`string`} - default tooltip\n\n  * `__playing` {`boolean`} - whether GIF is playing\n\n  * `t` - \n\n  * `element-visible` {`boolean`} - \n\n  * `schemaMap` - Schema Map for the element, used to generate a valid prefix on the fly\nProps set for Polymer compatibility\n\nProperties:\n\n  * `alt` {`string`} - Alt text of gif\n\n  * `describedBy` {`string`} - other id's to add to aria-describedby\n\n  * `longdesc` {`string`} - longer image description for accesibility\n\n  * `src` {`string`} - Source of animated gif\n\n  * `srcWithoutAnimation` {`string`} - Source of static version of image\n\n  * `tooltipPlaying` {`string`} - tooltip when playing\n\n  * `observer` - mutation observer for a11y-details\n\n  * `__gifLoaded` {`boolean`} - if the gif source is loaded to avoid jarring on load\n\n  * `disabled` {`boolean`} - Whether button is disabled\n\n  * `tooltip` {`string`} - default tooltip\n\n  * `__playing` {`boolean`} - whether GIF is playing\n\n  * `t` - \n\n  * `elementVisible` {`boolean`} - \n\n  * `IOThresholds` {`number[]`} - \n\n  * `IORootMargin` {`string`} - \n\n  * `IOVisibleLimit` {`number`} - \n\n  * `IORemoveOnVisible` {`boolean`} - \n\n  * `IODelay` {`number`} - \n\n  * `IORoot` - \n\n  * `schemaResourceID` {`string`} - \n\n  * `schemaMap` - Schema Map for the element, used to generate a valid prefix on the fly\nProps set for Polymer compatibility",
+      "description": "`a11y-gif-player`\nplays gifs in an accessible way by having the user click to play their animation\n### Styling\n\n`<a11y-gif-player>` provides the following custom properties\nfor styling:\n\nCustom property | Description | Default\n----------------|-------------|----------\n`--a11y-gif-player-border` | border around player/button | none\n`--a11y-gif-player-border-radius` | border-radius for player/button | 0\n`--a11y-gif-player-focus-border` | border-radius for player/button when hovered or focused | none\n`--a11y-gif-player-cursor` | cursor for player/button when hovered or focused | pointer\n`--a11y-gif-player-outline` | outline for player/button when hovered or focused | \n`--a11y-gif-player-disabled-cursor` | cursor for player/button when disabled | not-allowed\n`--a11y-gif-player-arrow-size` | arrow icon size | 30%\n`--a11y-gif-player-arrow-opacity` | default arrow icon opacity | 0.5\n`--a11y-gif-player-button-focus-opacity` | arrow icon opacity when hovered or focused | 0.7\n`--a11y-gif-player-button-color` | arrow icon color | #000000\n`--a11y-gif-player-arrow-border-color` | arrow icon border color | #ffffff\n`--a11y-gif-player-arrow-border-width` | arrow icon border width | 15px\n`--a11y-gif-player-button-text-color` | arrow icon text color | #ffffff\n`--a11y-gif-player-button-bg` | button background color when no static image | #cccccc\n\nAttributes:\n\n  * `alt` {`string`} - Alt text of gif\n\n  * `described-by` {`string`} - other id's to add to aria-describedby\n\n  * `longdesc` {`string`} - longer image description for accesibility\n\n  * `src` {`string`} - Source of animated gif\n\n  * `src-without-animation` {`string`} - Source of static version of image\n\n  * `__gifLoaded` {`boolean`} - if the gif source is loaded to avoid jarring on load\n\n  * `disabled` {`boolean`} - Whether button is disabled\n\n  * `__playing` {`boolean`} - whether GIF is playing\n\n  * `t` - \n\n  * `element-visible` {`boolean`} - \n\n  * `schemaMap` - Schema Map for the element, used to generate a valid prefix on the fly\nProps set for Polymer compatibility\n\nProperties:\n\n  * `alt` {`string`} - Alt text of gif\n\n  * `describedBy` {`string`} - other id's to add to aria-describedby\n\n  * `longdesc` {`string`} - longer image description for accesibility\n\n  * `src` {`string`} - Source of animated gif\n\n  * `srcWithoutAnimation` {`string`} - Source of static version of image\n\n  * `observer` - mutation observer for a11y-details\n\n  * `__gifLoaded` {`boolean`} - if the gif source is loaded to avoid jarring on load\n\n  * `disabled` {`boolean`} - Whether button is disabled\n\n  * `__playing` {`boolean`} - whether GIF is playing\n\n  * `t` - \n\n  * `elementVisible` {`boolean`} - \n\n  * `IOThresholds` {`number[]`} - \n\n  * `IORootMargin` {`string`} - \n\n  * `IOVisibleLimit` {`number`} - \n\n  * `IORemoveOnVisible` {`boolean`} - \n\n  * `IODelay` {`number`} - \n\n  * `IORoot` - \n\n  * `schemaResourceID` {`string`} - \n\n  * `schemaMap` - Schema Map for the element, used to generate a valid prefix on the fly\nProps set for Polymer compatibility",
       "attributes": [
@@ -30,6 +30,2 @@ {
         {
-          "name": "tooltip-playing",
-          "description": "`tooltip-playing` {`string`} - tooltip when playing\n\nProperty: tooltipPlaying"
-        },
-        {
           "name": "__gifLoaded",
@@ -45,6 +41,2 @@ "description": "`__gifLoaded` {`boolean`} - if the gif source is loaded to avoid jarring on load\n\nProperty: __gifLoaded\n\nDefault: false",
         {
-          "name": "tooltip",
-          "description": "`tooltip` {`string`} - default tooltip\n\nProperty: tooltip\n\nDefault: "
-        },
-        {
           "name": "__playing",
@@ -71,3 +63,3 @@ "description": "`__playing` {`boolean`} - whether GIF is playing\n\nProperty: __playing\n\nDefault: false",
       "name": "a11y-gif-player",
-      "description": "`a11y-gif-player`\nplays gifs in an accessible way by having the user click to play their animation\n### Styling\n\n`<a11y-gif-player>` provides the following custom properties\nfor styling:\n\nCustom property | Description | Default\n----------------|-------------|----------\n`--a11y-gif-player-border` | border around player/button | none\n`--a11y-gif-player-border-radius` | border-radius for player/button | 0\n`--a11y-gif-player-focus-border` | border-radius for player/button when hovered or focused | none\n`--a11y-gif-player-cursor` | cursor for player/button when hovered or focused | pointer\n`--a11y-gif-player-outline` | outline for player/button when hovered or focused | \n`--a11y-gif-player-disabled-cursor` | cursor for player/button when disabled | not-allowed\n`--a11y-gif-player-arrow-size` | arrow icon size | 30%\n`--a11y-gif-player-arrow-opacity` | default arrow icon opacity | 0.5\n`--a11y-gif-player-button-focus-opacity` | arrow icon opacity when hovered or focused | 0.7\n`--a11y-gif-player-button-color` | arrow icon color | #000000\n`--a11y-gif-player-arrow-border-color` | arrow icon border color | #ffffff\n`--a11y-gif-player-arrow-border-width` | arrow icon border width | 15px\n`--a11y-gif-player-button-text-color` | arrow icon text color | #ffffff\n`--a11y-gif-player-button-bg` | button background color when no static image | #cccccc\n\nAttributes:\n\n  * `alt` {`string`} - Alt text of gif\n\n  * `described-by` {`string`} - other id's to add to aria-describedby\n\n  * `longdesc` {`string`} - longer image description for accesibility\n\n  * `src` {`string`} - Source of animated gif\n\n  * `src-without-animation` {`string`} - Source of static version of image\n\n  * `tooltip-playing` {`string`} - tooltip when playing\n\n  * `__gifLoaded` {`boolean`} - if the gif source is loaded to avoid jarring on load\n\n  * `disabled` {`boolean`} - Whether button is disabled\n\n  * `tooltip` {`string`} - default tooltip\n\n  * `__playing` {`boolean`} - whether GIF is playing\n\n  * `t` - \n\n  * `element-visible` {`boolean`} - \n\n  * `schemaMap` - Schema Map for the element, used to generate a valid prefix on the fly\nProps set for Polymer compatibility\n\nProperties:\n\n  * `alt` {`string`} - Alt text of gif\n\n  * `describedBy` {`string`} - other id's to add to aria-describedby\n\n  * `longdesc` {`string`} - longer image description for accesibility\n\n  * `src` {`string`} - Source of animated gif\n\n  * `srcWithoutAnimation` {`string`} - Source of static version of image\n\n  * `tooltipPlaying` {`string`} - tooltip when playing\n\n  * `observer` - mutation observer for a11y-details\n\n  * `__gifLoaded` {`boolean`} - if the gif source is loaded to avoid jarring on load\n\n  * `disabled` {`boolean`} - Whether button is disabled\n\n  * `tooltip` {`string`} - default tooltip\n\n  * `__playing` {`boolean`} - whether GIF is playing\n\n  * `t` - \n\n  * `elementVisible` {`boolean`} - \n\n  * `IOThresholds` {`number[]`} - \n\n  * `IORootMargin` {`string`} - \n\n  * `IOVisibleLimit` {`number`} - \n\n  * `IORemoveOnVisible` {`boolean`} - \n\n  * `IODelay` {`number`} - \n\n  * `IORoot` - \n\n  * `schemaResourceID` {`string`} - \n\n  * `schemaMap` - Schema Map for the element, used to generate a valid prefix on the fly\nProps set for Polymer compatibility",
+      "description": "`a11y-gif-player`\nplays gifs in an accessible way by having the user click to play their animation\n### Styling\n\n`<a11y-gif-player>` provides the following custom properties\nfor styling:\n\nCustom property | Description | Default\n----------------|-------------|----------\n`--a11y-gif-player-border` | border around player/button | none\n`--a11y-gif-player-border-radius` | border-radius for player/button | 0\n`--a11y-gif-player-focus-border` | border-radius for player/button when hovered or focused | none\n`--a11y-gif-player-cursor` | cursor for player/button when hovered or focused | pointer\n`--a11y-gif-player-outline` | outline for player/button when hovered or focused | \n`--a11y-gif-player-disabled-cursor` | cursor for player/button when disabled | not-allowed\n`--a11y-gif-player-arrow-size` | arrow icon size | 30%\n`--a11y-gif-player-arrow-opacity` | default arrow icon opacity | 0.5\n`--a11y-gif-player-button-focus-opacity` | arrow icon opacity when hovered or focused | 0.7\n`--a11y-gif-player-button-color` | arrow icon color | #000000\n`--a11y-gif-player-arrow-border-color` | arrow icon border color | #ffffff\n`--a11y-gif-player-arrow-border-width` | arrow icon border width | 15px\n`--a11y-gif-player-button-text-color` | arrow icon text color | #ffffff\n`--a11y-gif-player-button-bg` | button background color when no static image | #cccccc\n\nAttributes:\n\n  * `alt` {`string`} - Alt text of gif\n\n  * `described-by` {`string`} - other id's to add to aria-describedby\n\n  * `longdesc` {`string`} - longer image description for accesibility\n\n  * `src` {`string`} - Source of animated gif\n\n  * `src-without-animation` {`string`} - Source of static version of image\n\n  * `__gifLoaded` {`boolean`} - if the gif source is loaded to avoid jarring on load\n\n  * `disabled` {`boolean`} - Whether button is disabled\n\n  * `__playing` {`boolean`} - whether GIF is playing\n\n  * `t` - \n\n  * `element-visible` {`boolean`} - \n\n  * `schemaMap` - Schema Map for the element, used to generate a valid prefix on the fly\nProps set for Polymer compatibility\n\nProperties:\n\n  * `alt` {`string`} - Alt text of gif\n\n  * `describedBy` {`string`} - other id's to add to aria-describedby\n\n  * `longdesc` {`string`} - longer image description for accesibility\n\n  * `src` {`string`} - Source of animated gif\n\n  * `srcWithoutAnimation` {`string`} - Source of static version of image\n\n  * `observer` - mutation observer for a11y-details\n\n  * `__gifLoaded` {`boolean`} - if the gif source is loaded to avoid jarring on load\n\n  * `disabled` {`boolean`} - Whether button is disabled\n\n  * `__playing` {`boolean`} - whether GIF is playing\n\n  * `t` - \n\n  * `elementVisible` {`boolean`} - \n\n  * `IOThresholds` {`number[]`} - \n\n  * `IORootMargin` {`string`} - \n\n  * `IOVisibleLimit` {`number`} - \n\n  * `IORemoveOnVisible` {`boolean`} - \n\n  * `IODelay` {`number`} - \n\n  * `IORoot` - \n\n  * `schemaResourceID` {`string`} - \n\n  * `schemaMap` - Schema Map for the element, used to generate a valid prefix on the fly\nProps set for Polymer compatibility",
       "attributes": [
@@ -95,6 +87,2 @@ {
         {
-          "name": "tooltip-playing",
-          "description": "`tooltip-playing` {`string`} - tooltip when playing\n\nProperty: tooltipPlaying"
-        },
-        {
           "name": "__gifLoaded",
@@ -110,6 +98,2 @@ "description": "`__gifLoaded` {`boolean`} - if the gif source is loaded to avoid jarring on load\n\nProperty: __gifLoaded\n\nDefault: false",
         {
-          "name": "tooltip",
-          "description": "`tooltip` {`string`} - default tooltip\n\nProperty: tooltip\n\nDefault: "
-        },
-        {
           "name": "__playing",
@@ -116,0 +100,0 @@ "description": "`__playing` {`boolean`} - whether GIF is playing\n\nProperty: __playing\n\nDefault: false",

lib/a11y-gif-player.haxProperties.json

@@ -6,18 +6,33 @@ {
   "gizmo": {
-    "title": "Accessible GIF",
-    "description": "Makes animated GIFs accessible.",
+    "title": "GIF",
+    "description": "Make animated GIFs accessible.",
     "icon": "gif",
     "color": "grey",
-    "groups": ["Images", "Media"],
+    "tags": [
+      "Images",
+      "player",
+      "gif",
+      "media",
+      "a11y",
+      "accessibility",
+      "animation",
+      "image"
+    ],
     "handles": [
       {
+        "type": "gif",
+        "type_exclusive": true,
+        "source": "src",
+        "source2": "srcWithoutAnimation",
+        "alt": "alt"
+      },
+      {
         "type": "image",
         "source": "src",
         "source2": "srcWithoutAnimation",
-        "alt": "alt",
-        "ariaDescribedby": "describedBy"
+        "alt": "alt"
       }
     ],
     "meta": {
-      "author": "ELMS:LN"
+      "author": "HAXTheWeb core team"
     }
@@ -37,11 +52,2 @@ },
       {
-        "property": "srcWithoutAnimation",
-        "title": "Still Image",
-        "description": "The URL to a still image version of your GIF.",
-        "inputMethod": "haxupload",
-        "icon": "link",
-        "validationType": "url",
-        "required": true
-      },
-      {
         "property": "alt",
@@ -53,19 +59,25 @@ "title": "Alt Text",
         "required": true
-      },
+      }
+    ],
+    "advanced": [
       {
         "property": "longdesc",
         "title": "Long Description",
-        "description": "Long descriptions of the GOF for accessibiility",
+        "description": "Long descriptions of the GIF for accessibiility",
         "inputMethod": "textarea"
-      }
-    ],
-    "advanced": [
+      },
       {
-        "property": "describedBy",
-        "title": "aria-decsribedby",
-        "description": "Space-separated id list for long descriptions that appear elsewhere",
-        "inputMethod": "textfield"
+        "property": "srcWithoutAnimation",
+        "title": "Still Image",
+        "description": "The URL to a still image version of your GIF.",
+        "inputMethod": "haxupload",
+        "icon": "link",
+        "validationType": "url",
+        "required": true
       }
     ]
   },
+  "saveOptions": {
+    "unsetAttributes": ["element-visible"]
+  },
   "demoSchema": [
@@ -77,5 +89,4 @@ {
         "src": "https://media0.giphy.com/media/zHaPZZvl6cVHi/giphy.gif",
-        "srcWithoutAnimation": "https://media0.giphy.com/media/zHaPZZvl6cVHi/480w_s.jpg",
-        "longdesc": "Pepe Silvia scene from It's Always Sunny in Philadelphia. Jesus, dude, you're still making GIFs. The GIF's don't stop.",
-        "style": "max-width:400px"
+        "longdesc": "Pepe Silvia scene from It's Always Sunny in Philadelphia. The GIF's don't stop.",
+        "elementVisible": true
       }
@@ -82,0 +93,0 @@ }

package.json

@@ -15,3 +15,3 @@ {
   },
-  "version": "4.1.0",
+  "version": "4.1.1",
   "description": "Play gifs in an accessible way by having the user click to play their animation",
@@ -41,17 +41,19 @@ "repository": {
   "dependencies": {
-    "@lrnwebcomponents/a11y-details": "^4.1.0",
+    "@lrnwebcomponents/a11y-details": "^4.1.1",
     "@lrnwebcomponents/intersection-element": "^4.0.4",
-    "@lrnwebcomponents/schema-behaviors": "^4.1.0",
-    "@lrnwebcomponents/simple-tooltip": "^4.1.0",
-    "lit": "^2.2.8"
+    "@lrnwebcomponents/micro-frontend-registry": "^4.1.1",
+    "@lrnwebcomponents/schema-behaviors": "^4.1.1",
+    "@lrnwebcomponents/simple-tooltip": "^4.1.1",
+    "lit": "^2.6.1"
   },
   "devDependencies": {
     "@lrnwebcomponents/deduping-fix": "^4.0.0",
-    "@lrnwebcomponents/storybook-utilities": "^4.1.0",
+    "@lrnwebcomponents/simple-img": "^4.1.1",
+    "@lrnwebcomponents/storybook-utilities": "^4.1.1",
     "@open-wc/testing": "3.0.4",
     "@polymer/iron-component-page": "github:PolymerElements/iron-component-page",
     "@polymer/iron-demo-helpers": "3.1.0",
-    "@web/dev-server": "0.1.31",
+    "@web/dev-server": "0.1.34",
     "@webcomponents/webcomponentsjs": "2.6.0",
-    "concurrently": "7.0.0",
+    "concurrently": "7.4.0",
     "gulp-babel": "8.0.0",
@@ -71,3 +73,3 @@ "lodash": "^4.17.21",
   ],
-  "gitHead": "4770bd248a313aee84314a95ffdad8ff25a22188"
+  "gitHead": "5fd3b49314297b354117d2fb80bad4c953c07ae7"
 }

src/a11y-gif-player.js

@@ -5,3 +5,3 @@ /**
  */
-import { LitElement, html, css, nothing } from "lit";
+import { LitElement, html, css } from "lit";
 import { SchemaBehaviors } from "@lrnwebcomponents/schema-behaviors/schema-behaviors.js";
@@ -45,3 +45,2 @@ import { IntersectionObserverMixin } from "@lrnwebcomponents/intersection-element/lib/IntersectionObserverMixin.js";
     this.disabled = false;
-    this.tooltip = "";
     this.__playing = false;
@@ -139,8 +138,2 @@ this._updateFromSlot();
         }
-        simple-tooltip {
-          --simple-tooltip-background: #000000;
-          --simple-tooltip-opacity: 1;
-          --simple-tooltip-text-color: #ffffff;
-          --simple-tooltip-delay-in: 0;
-        }
       `,
@@ -176,3 +169,3 @@ ];
                 />`
-              : nothing}
+              : ``}
 
@@ -198,7 +191,2 @@ <button
               </svg>
-              <span class="sr-only">
-                ${this.__playing && this.tooltipPlaying
-                  ? this.tooltipPlaying
-                  : this.tooltip}
-              </span>
             </button>
@@ -214,9 +202,4 @@ <a11y-details
           </div>
-          <simple-tooltip for="button" offset="30" animation-delay="0">
-            ${this.__playing && this.tooltipPlaying
-              ? this.tooltipPlaying
-              : this.tooltip}
-          </simple-tooltip>
         `
-      : nothing} `;
+      : ``} `;
   }
@@ -275,15 +258,2 @@ /**
       /**
-       * default tooltip
-       */
-      tooltip: {
-        type: String,
-      },
-      /**
-       * tooltip when playing
-       */
-      tooltipPlaying: {
-        type: String,
-        attribute: "tooltip-playing",
-      },
-      /**
        * whether GIF is playing
@@ -311,6 +281,35 @@ */
         import("@lrnwebcomponents/a11y-details/a11y-details.js");
-        import("@lrnwebcomponents/simple-tooltip/simple-tooltip.js");
+        // support for automatic web service scrape of the gif for a still image
+        if (this.shadowRoot && !this.srcWithoutAnimation && this.src) {
+          // import registry
+          import(
+            "@lrnwebcomponents/micro-frontend-registry/micro-frontend-registry.js"
+          ).then(() => {
+            this._automaticStill = true;
+            this.srcWithoutAnimation = this.generateStill(this.src);
+          });
+        }
       }
+      // support src changing after the fact, we are visible, and set to automatic generation
+      if (
+        this.shadowRoot &&
+        propName === "src" &&
+        this[propName] &&
+        this.elementVisible &&
+        this._automaticStill
+      ) {
+        this.srcWithoutAnimation = this.generateStill(this.src);
+      }
     });
   }
+  generateStill(src) {
+    // enable core services, though should be available
+    const MicroFrontendRegistry =
+      window.MicroFrontendRegistry.requestAvailability();
+    MicroFrontendRegistry.enableServices(["core"]);
+    return MicroFrontendRegistry.url("@core/imgManipulate", {
+      quality: 50,
+      src: src,
+    });
+  }
   /**
@@ -330,3 +329,3 @@ * mutation observer for a11y-details
       childList: true,
-      subtree: false,
+      subtree: true,
     });
@@ -386,7 +385,17 @@ window.addEventListener("beforeprint", (event) => {
   _updateFromSlot() {
-    let img = this.querySelector("img"),
-      src = img ? img.src : undefined,
-      alt = img ? img.alt : undefined;
-    if (src) this.srcWithoutAnimation = src;
-    if (alt) this.alt = alt;
+    let img = this.querySelector("img");
+    if (img) {
+      let src = img.src || null;
+      let alt = img.alt || null;
+      if (src) this.srcWithoutAnimation = src;
+      if (alt) this.alt = alt;
+    }
+    // support simple-img tag since it can auto-convert gif to static!
+    img = this.querySelector("simple-img");
+    if (img) {
+      let src = img.srcconverted || null;
+      let alt = img.alt || null;
+      if (src) this.srcWithoutAnimation = src;
+      if (alt) this.alt = alt;
+    }
   }
@@ -403,3 +412,3 @@ /**
 }
-window.customElements.define(A11yGifPlayer.tag, A11yGifPlayer);
+customElements.define(A11yGifPlayer.tag, A11yGifPlayer);
 export { A11yGifPlayer };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

100770

decreased by-5.75%

Dependency count

6

increased by20%

Dev dependency count

13

increased by8.33%

Number of package files

21

decreased by-4.55%

Lines of code

1498

decreased by-14.11%

Dependency changes

• + Added@lrnwebcomponents/micro-frontend-registry@^4.1.1

• + Added@lrnwebcomponents/micro-frontend-registry@4.2.0(transitive)

• Updated@lrnwebcomponents/a11y-details@^4.1.1

• Updated@lrnwebcomponents/schema-behaviors@^4.1.1

• Updated@lrnwebcomponents/simple-tooltip@^4.1.1

• Updatedlit@^2.6.1