import { mergeOver, Ωempty } from '../helper/utilities.js';
import { makeAnchor } from '../factory/anchor.js';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.
import { mergeOver, Ωempty } from '../helper/utilities.js';
import { makeAnchor } from '../factory/anchor.js';Shared constants
import { BLUR_ACTION, CLICK_ACTION, DESCRIPTION, DISABLED, DOWNLOAD, FOCUS_ACTION, HREF, HREFLANG, NAME, PING, REFERRERPOLICY, REL, TAB_ORDER, TARGET } from '../helper/shared-vars.js';Local constants
const ANCHORTYPE = 'anchorType';export default function (P = Ωempty) { 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);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();
}; 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.anchorBlurAction ~~> anchor.blurAction boolean - default: true
artefact.anchorClickAction ~~> anchor.clickAction function - returns onclick string
artefact.anchorDescription ~~> anchor.description
artefact.anchorDisabled ~~> anchor.disabled boolean: - default: false
artefact.anchorDownload ~~> anchor.download
artefact.anchorFocusAction ~~> anchor.focusAction boolean - default: true
artefact.anchorHref ~~> anchor.href
artefact.anchorHreflang ~~> anchor.hreflang
artefact.anchorName ~~> anchor.name
artefact.anchorPing ~~> anchor.ping
artefact.anchorReferrerPolicy ~~> anchor.referrerPolicy
artefact.anchorRel ~~> anchor.rel
artefact.anchorTabOrder ~~> anchor.tabOrder number - default: 0
artefact.anchorTarget ~~> anchor.target
artefact.anchorType ~~> anchor.anchorType
anchorName
G.anchorName = function () { return this.anchorGetHelper(NAME); };anchorDescription
G.anchorDescription = function () { return this.anchorGetHelper(DESCRIPTION); };
S.anchorDescription = function (item) { this.anchorSetHelper(DESCRIPTION, item); };anchorType
G.anchorType = function () { return this.anchorGetHelper(ANCHORTYPE); };
S.anchorType = function (item) { this.anchorSetHelper(ANCHORTYPE, item); };anchorTarget
G.anchorTarget = function () { return this.anchorGetHelper(TARGET); };
S.anchorTarget = function (item) { this.anchorSetHelper(TARGET, item); };anchorTabOrder
G.anchorTabOrder = function () { return this.anchorGetHelper(TAB_ORDER); };
S.anchorTabOrder = function (item) { this.anchorSetHelper(TAB_ORDER, item); };anchorDisabled
G.anchorDisabled = function () { return this.anchorGetHelper(DISABLED); };
S.anchorDisabled = function (item) { this.anchorSetHelper(DISABLED, item); };anchorRel
G.anchorRel = function () { return this.anchorGetHelper(REL); };
S.anchorRel = function (item) { this.anchorSetHelper(REL, item); };anchorReferrerPolicy
G.anchorReferrerPolicy = function () { return this.anchorGetHelper(REFERRERPOLICY); };
S.anchorReferrerPolicy = function (item) { this.anchorSetHelper(REFERRERPOLICY, item); };anchorPing
G.anchorPing = function () { return this.anchorGetHelper(PING); };
S.anchorPing = function (item) { this.anchorSetHelper(PING, item); };anchorHreflang
G.anchorHreflang = function () { return this.anchorGetHelper(HREFLANG); };
S.anchorHreflang = function (item) { this.anchorSetHelper(HREFLANG, item); };anchorHref
G.anchorHref = function () { return this.anchorGetHelper(HREF); };
S.anchorHref = function (item) { this.anchorSetHelper(HREF, item); };anchorDownload
G.anchorDownload = function () { return this.anchorGetHelper(DOWNLOAD); };
S.anchorDownload = function (item) { this.anchorSetHelper(DOWNLOAD, item); };anchorFocusAction
S.anchorFocusAction = function (item) { this.anchorSetHelper(FOCUS_ACTION, item); };anchorBlurAction
S.anchorBlurAction = function (item) { this.anchorSetHelper(BLUR_ACTION, item); };anchorClickAction
S.anchorClickAction = function (item) { this.anchorSetHelper(CLICK_ACTION, 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: { ... },
});
S.anchor = function (items) {
if (!this.anchor) this.buildAnchor(items);
else this.anchor.set(items);
};Internal helper functions
P.anchorGetHelper = function(key) {
if (this.anchor) return this.anchor.get(key);
return null;
}
P.anchorSetHelper = function(key, val) {
if (!this.anchor) this.buildAnchor({ [key]: val });
if (this.anchor) this.anchor.set({ [key]: val });
}The buildAnchor function triggers the (re)build of the <a> element and adds it to the DOM
P.buildAnchor = function (items = {}) {
if (this.anchor) this.anchor.demolish();
if (!items.anchorName) items.anchorName = `${this.name}-anchor`;
if (!items.description) items.description = `Anchor link for ${this.name} ${this.type}`;
items.host = this;
items.controller = this.getCanvasWrapper();
items.hold = this.getCanvasNavElement();
this.anchor = makeAnchor(items);
};rebuildAnchor - triggers the Anchor object’s build function
P.rebuildAnchor = function () {
if (this.anchor) this.anchor.rebuild();
};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();
};
}