- Jump To … +
  ./source/core/animation-loop.js ./source/core/display-cycle.js ./source/core/document-root-elements.js ./source/core/document.js ./source/core/events.js ./source/core/init.js ./source/core/library.js ./source/core/random-seed.js ./source/core/shared-vars.js ./source/core/snippets.js ./source/core/system-flags.js ./source/core/user-interaction.js ./source/core/utilities.js ./source/factory/action.js ./source/factory/anchor.js ./source/factory/animation.js ./source/factory/array-pool.js ./source/factory/bezier.js ./source/factory/block.js ./source/factory/canvas.js ./source/factory/cell-fragment.js ./source/factory/cell.js ./source/factory/cog.js ./source/factory/color.js ./source/factory/conic-gradient.js ./source/factory/coordinate.js ./source/factory/crescent.js ./source/factory/drag-zone.js ./source/factory/element.js ./source/factory/emitter.js ./source/factory/filter-engine-bluenoise-data.js ./source/factory/filter-engine.js ./source/factory/filter.js ./source/factory/font-attributes.js ./source/factory/gradient.js ./source/factory/grid.js ./source/factory/group.js ./source/factory/image-asset.js ./source/factory/keyboard-zone.js ./source/factory/line-spiral.js ./source/factory/line.js ./source/factory/loom.js ./source/factory/mesh.js ./source/factory/net.js ./source/factory/noise-asset.js ./source/factory/observe-update.js ./source/factory/oval.js ./source/factory/palette.js ./source/factory/particle-force.js ./source/factory/particle-history.js ./source/factory/particle-spring.js ./source/factory/particle-world.js ./source/factory/particle.js ./source/factory/pattern.js ./source/factory/phrase.js ./source/factory/picture.js ./source/factory/polygon.js ./source/factory/polyline.js ./source/factory/quadratic.js ./source/factory/quaternion.js ./source/factory/radial-gradient.js ./source/factory/raw-asset.js ./source/factory/reaction-diffusion-asset.js ./source/factory/rectangle.js ./source/factory/render-animation.js ./source/factory/shape.js ./source/factory/spiral.js ./source/factory/sprite-asset.js ./source/factory/stack.js ./source/factory/star.js ./source/factory/state.js ./source/factory/tetragon.js ./source/factory/ticker.js ./source/factory/tracer.js ./source/factory/tween.js ./source/factory/unstacked-element.js ./source/factory/vector.js ./source/factory/video-asset.js ./source/factory/wheel.js ./source/mixin/anchor.js ./source/mixin/asset-advanced-functionality.js ./source/mixin/asset-consumer.js ./source/mixin/asset.js ./source/mixin/base.js ./source/mixin/cascade.js ./source/mixin/cell-key-functions.js ./source/mixin/delta.js ./source/mixin/display-shape.js ./source/mixin/dom.js ./source/mixin/entity.js ./source/mixin/filter.js ./source/mixin/mimic.js ./source/mixin/path.js ./source/mixin/pattern.js ./source/mixin/pivot.js ./source/mixin/position.js ./source/mixin/shape-basic.js ./source/mixin/shape-curve.js ./source/mixin/shape-path-calculation.js ./source/mixin/styles.js ./source/mixin/tween.js

- §

  # Anchor mixin

  The anchor object holds all the data and functionality required to turn an artefact into an HTML clickable link - <a> element - to external URLs. This mixin adds functionality to artefacts for creating and managing anchor objects.

  Each artifact can have a maximum of one anchor object associated with it.

- §

  #### Imports

      import { canvas } from '../core/library.js';

      import { isa_obj, mergeOver, Ωempty } from '../core/utilities.js';

      import { makeAnchor } from '../factory/anchor.js';
      import { scrawlNavigationHold } from '../core/document.js';

      import { DESCRIPTION, DOWNLOAD, HREF, HREFLANG, PING, REFERRERPOLICY, REL, T_CANVAS, T_CELL, TARGET, TYPE, ZERO_STR } from '../core/shared-vars.js';

- §

  #### Export function

      export default function (P = Ωempty) {

- §

  #### Shared attributes

          const defaultAttributes = {

- §

  anchor - a handle to the anchor object. When creating or setting an artefact this can be supplied in the argument object as a Javascript object containing the data required to create the anchor.

              anchor: null,
          };
          P.defs = mergeOver(P.defs, defaultAttributes);

- §

  #### Packet management

  No additional packet functionality required

- §

  #### Clone management

  No additional clone functionality required

- §

  #### Kill management

  `demolishAnchor` - Note that a `handlePacketAnchor` function is also defined in the position mixin, to manage the surrounding kill functionality.

          P.demolishAnchor = function () {

              if (this.anchor) this.anchor.demolish();
          };

- §

  #### Get, Set, deltaSet

          const G = P.getters,
              S = P.setters;

- §

  The following attributes (which largely map to HTML anchor attributes) can be included in the argument object passed to the artefact’s factory and `set` functions, or passed as a String to the `get` function:

      artefact.anchorDescription       ~~>  anchor.description
      artefact.anchorType              ~~>  anchor.type
      artefact.anchorTarget            ~~>  anchor.target
      artefact.anchorRel               ~~>  anchor.rel
      artefact.anchorReferrerPolicy    ~~>  anchor.referrerPolicy
      artefact.anchorPing              ~~>  anchor.ping
      artefact.anchorHreflang          ~~>  anchor.hreflang
      artefact.anchorHref              ~~>  anchor.href
      artefact.anchorDownload          ~~>  anchor.download
      artefact.anchorFocusAction       ~~>  anchor.focusAction
      artefact.anchorBlurAction        ~~>  anchor.blurAction

- §

  anchorDescription

          G.anchorDescription = function () {

              if (this.anchor) return this.anchor.get(DESCRIPTION);
              return ZERO_STR;
          };
          S.anchorDescription = function (item) {

              if (!this.anchor) this.buildAnchor();
              if (this.anchor) this.anchor.setters.description(item);
          };

- §

  anchorType

          G.anchorType = function () {

              if (this.anchor) return this.anchor.get(TYPE);
              return ZERO_STR;
          };
          S.anchorType = function (item) {

              if (!this.anchor) this.buildAnchor();
              if (this.anchor) this.anchor.setters.anchorType(item);
          };

- §

  anchorTarget

          G.anchorTarget = function () {

              if (this.anchor) return this.anchor.get(TARGET);
              return ZERO_STR;
          };
          S.anchorTarget = function (item) {

              if (!this.anchor) this.buildAnchor();
              if (this.anchor) this.anchor.setters.target(item);
          };

- §

  anchorRel

          G.anchorRel = function () {

              if (this.anchor) return this.anchor.get(REL);
              return ZERO_STR;
          };
          S.anchorRel = function (item) {

              if (!this.anchor) this.buildAnchor();
              if (this.anchor) this.anchor.setters.rel(item);
          };

- §

  anchorReferrerPolicy

          G.anchorReferrerPolicy = function () {

              if (this.anchor) return this.anchor.get(REFERRERPOLICY);
              return ZERO_STR;
          };
          S.anchorReferrerPolicy = function (item) {

              if (!this.anchor) this.buildAnchor();
              if (this.anchor) this.anchor.setters.referrerpolicy(item);
          };

- §

  anchorPing

          G.anchorPing = function () {

              if (this.anchor) return this.anchor.get(PING);
              return ZERO_STR;
          };
          S.anchorPing = function (item) {

              if (!this.anchor) this.buildAnchor();
              if (this.anchor) this.anchor.setters.ping(item);
          };

- §

  anchorHreflang

          G.anchorHreflang = function () {

              if (this.anchor) return this.anchor.get(HREFLANG);
              return ZERO_STR;
          };
          S.anchorHreflang = function (item) {

              if (!this.anchor) this.buildAnchor();
              if (this.anchor) this.anchor.setters.hreflang(item);
          };

- §

  anchorHref

          G.anchorHref = function () {

              if (this.anchor) return this.anchor.get(HREF);
              return ZERO_STR;
          };
          S.anchorHref = function (item) {

              if (!this.anchor) this.buildAnchor();
              if (this.anchor) this.anchor.setters.href(item);
          };

- §

  anchorDownload

          G.anchorDownload = function () {

              if (this.anchor) return this.anchor.get(DOWNLOAD);
              return ZERO_STR;
          };
          S.anchorDownload = function (item) {

              if (!this.anchor) this.buildAnchor();
              if (this.anchor) this.anchor.setters.download(item);
          };

- §

  anchorFocusAction

          S.anchorFocusAction = function (item) {

              if (!this.anchor) this.buildAnchor();
              if (this.anchor) this.anchor.setters.focusAction(item);
          };

- §

  anchorBlurAction

          S.anchorBlurAction = function (item) {

              if (!this.anchor) this.buildAnchor();
              if (this.anchor) this.anchor.setters.blurAction(item);
          };

- §

  The artefact’s factory and `set` functions’ argument object can include a single anchor attribute, whose value should be an object containing anchor key:value pairs

      artefact.set({

          anchor: {
              description: 'value',
              type: 'value',
              target: 'value',
              rel: 'value',
              referrerPolicy: 'value',
              ping: 'value',
              hreflang: 'value',
              href: 'value',
              download: 'value',
          },
      });

          S.anchor = function (items) {

              if (!this.anchor) this.buildAnchor(items);
              else this.anchor.set(items);
          };

- §

  #### Prototype functions

- §

  The `buildAnchor` function triggers the (re)build of the <a> element and adds it to the DOM

  Scrawl-canvas generated anchor links are kept in hidden <nav> elements - either the Canvas object’s nav, or the Scrawl-canvas default nav (referenced by scrawlNavigationHold) which Scrawl-canvas automatically generates and adds to the top of the DOM <body> element when it first runs.

  This is done to give screen readers access to link URLs and descriptions associated with Canvas graphical entitys (which visually impaired users may not be able to see). It also allows links to be tabbed through and invoked in the normal way (which may vary dependent on how browsers implement tab focus functionality)

          P.buildAnchor = function (items) {

              if (isa_obj(items)) {

                  if (this.anchor) this.anchor.demolish();

                  if (!items.name) items.name = `${this.name}-anchor`;
                  if (!items.description) items.description = `Anchor link for ${this.name} ${this.type}`;

                  items.host = this;
                  items.hold = this.getAnchorHold();

                  this.anchor = makeAnchor(items);
              }
          };

- §

  `getAnchorHold` - internal function. Locate the current DOM hold element allocated for hosting <a> elements.

          P.getAnchorHold = function () {

              const entityHost = this.currentHost;

              if (entityHost) {

                  if (entityHost.type === T_CANVAS) return entityHost.navigation;

                  if (entityHost.type === T_CELL) {

                      const cellHost = (entityHost.currentHost) ? entityHost.currentHost : canvas[entityHost.host];

                      if (cellHost && cellHost.type === T_CANVAS) return cellHost.navigation;
                  }
              }
              this.dirtyAnchorHold = true;

              return scrawlNavigationHold;
          }

- §

  `rebuildAnchor` - triggers the Anchor object’s `build` function

          P.rebuildAnchor = function () {

              if (this.anchor) this.anchor.build();
          };

- §

  `clickAnchor` - function to pass a user click (or whatever event has been set up) on the artefact through to the anchor object, for action.

          P.clickAnchor = function () {

              if (this.anchor) this.anchor.click();
          };

- §

  Return the prototype

          return P;
      }