Modules.AnchorTrigger Class
AnchorTrigger module
Constructor
Modules.AnchorTrigger
()
Item Index
Methods
- $data
- $findChilds
- $findParent
- $raw
- _updateHash
- addObserver
- addState
- addStates
- consume
- destroy
- destroyObservers
- destroyStates
- findAll static
- getState
- hasObserver
- notifyObservers
- of static
- offBlur
- offChange
- offClick
- offFocus
- offInput
- offMove
- offPress
- offRelease
- offResize
- offSubmit
- offTransitionEnd
- onBlur
- onChange
- onClick
- onFocus
- onInput
- onMove
- onPress
- onRelease
- onResize
- onSubmit
- onTransitionEnd
- publish
- removeObserver
- removeState
- render
- startUp
- subscribe
- unsubscribe
Methods
$data
-
key
Takes a key and returns either the value of a matching data- attribute or null if no data- attribute is set. Works only on the $root element
Parameters:
-
keyStringKey of the data- attribute to get
Returns:
The value or null
Example:
import DOMModule from './modules/__base/dommodule';
class MyClass extends DOMModule {
render() {
const urlVal = this.$data('url') || '/default/url';
}
}
$findChilds
-
selector
Takes a CSS style selector and returns all elements under the root node of the widget which match the selector as jQuery collection
Parameters:
-
selectorStringSelector to match elements against
Returns:
A jQuery collection of matched elements
Example:
import DOMModule from './modules/__base/dommodule';
class MyClass extends DOMModule {
render() {
this.$buttons = this.$findChilds('button');
}
}
$findParent
-
[selector]
Takes a CSS style selector and returns the closes parent element of the root element of the widget that matches the selector. If no selector is specified, returns the immediate parent element of the root element.
Parameters:
-
[selector]String optionalSelector to match elements against
Returns:
A jQuery collection of matched elements
Example:
import DOMModule from './modules/__base/dommodule';
class MyClass extends DOMModule {
render() {
this.$rootContainer = this.$findParent('div');
}
}
$raw
-
index
Takes an zero based index and returns the raw DOMNode from the underlying jQuery collection on the given index. If the index is higher than the length of the collection, returns the last element of the collection. If it is omitted, returns the first element of the collection. Works only on the $root element
Parameters:
-
indexInteger | AnyIndex of the raw DOMNode you want to get
Returns:
The node on the given position
Example:
import DOMModule from './modules/__base/dommodule';
let items = new DOMModule('li'); // get all <li> elements as $rootNode
items.$raw(); // -> first <li>, equivalent to items.$raw(0)
items.$raw(4); // -> fourth or last <li>, depending on number of elements
_updateHash
-
hash
Updates the hash part of the current URL of the browser
Parameters:
-
hashStringThe new location.hash value
Returns:
Nothing
addObserver
-
x -
[m = 'update']
Adds a observer object to the observable
Parameters:
-
xObjectThe object to register as observer
-
[m = 'update']Function | String optionalFunction or method to use as handler
Returns:
The observable instance
Example:
import Observable from './mixins/observable';
const logger = {
update(message) {
console.log(message);
}
}
const MyClass = Observable(class {
constructor() {
this.addObserver(logger);
}
});
import Observable from './mixins/observable';
const logger = {
log(message) {
console.log(message);
}
}
const MyClass = Observable(class {
constructor() {
this.addObserver(logger, 'log');
}
});
addState
-
state
Allows to add a new state (see example for more info)
Parameters:
-
stateObjectThe new state
Returns:
The instance
Example:
import FSM from './mixins/fsm';
const MyClass = FSM(class {
constructor() {
// New states MyClass can be in are added
this.addState({
name: 'init',
events: {next: 'after'}
}).
addState({
name: 'after',
events: {next: 'last', prev: 'init'}
}).
addState({
name: 'last',
events: {prev: 'after'}
});
}
});
addStates
-
states
Allows to add an array of new states all at once
Parameters:
-
statesArrayThe new states
Returns:
The instance
Example:
import FSM from './mixins/fsm';
const MyStates = [
{name: 'init', events: {next: 'after'}},
{name: 'after', events: {next: 'last', prev: 'init'}},
{name: 'last', events: {prev: 'after'}}
];
const MyClass = FSM(class {
constructor() {
// New states MyClass can be in are added
this.addStates(MyStates);
}
});
consume
-
eventName
Transitions from the current state to the state specified by the given name of event to consume.
Parameters:
-
eventNameStringName of the event to consume
Returns:
The instance
Example:
import FSM from './mixins/fsm';
const MyStates = [
{name: 'init', events: {next: 'after'}},
{name: 'after', events: {next: 'last', prev: 'init'}},
{name: 'last', events: {prev: 'after'}}
];
const MyClass = FSM(class {
constructor() {
// New states MyClass can be in are added
this.addStates(MyStates);
}
});
let myInstance = new MyClass();
myInstance.getState(); // -> 'init'
myInstance.consume('next').consume('next').getState(); // -> 'last'
destroy
()
Undefined
Destroys the instance, releases all attached eventlisteners and removes all observers and states. Also removes the associated HTMLElement from the DOM
Returns:
Nothing
destroyObservers
()
Undefined
Destroys the observable, unregisters all observers
Returns:
Nothing
Example:
import Observable from './mixins/observable';
const logger = {
update(message) {
console.log(message);
}
}
const MyClass = Observable(class {
constructor() {
this.addObserver(logger);
}
});
let myInstance = new MyClass();
myInstance.notifyObservers('Sending a message');
// logs "Sending a message"
myInstance.destroyObservers();
myInstance.notifyObservers('Sending another message');
// nothing happens
destroyStates
()
Undefined
Destroys all states associated with the FSM
Returns:
Nothing
Example:
import FSM from './mixins/fsm';
const MyStates = [
{name: 'init', events: {next: 'after'}},
{name: 'after', events: {next: 'last', prev: 'init'}},
{name: 'last', events: {prev: 'after'}}
];
const MyClass = FSM(class {
constructor() {
// New states MyClass can be in are added
this.addStates(MyStates);
}
});
let myInstance = new MyClass();
myInstance.destroyStates();
findAll
-
selector
Finds and initializes all Accordions on a page at once
Parameters:
-
selectorStringCSS selector to match nodes against
Returns:
A list of instances
Example:
import AnchorTrigger from './modules/anchor/js/anchor';
AnchorTrigger.findAll('[data-widget=AnchorTrigger]');
getState
()
String | Null
Returns the name of the current state or null if no state is set
Returns:
Name of the current state or null
Example:
import FSM from './mixins/fsm';
const MyStates = [
{name: 'init', events: {next: 'after'}},
{name: 'after', events: {next: 'last', prev: 'init'}},
{name: 'last', events: {prev: 'after'}}
];
const MyClass = FSM(class {
constructor() {
// New states MyClass can be in are added
this.addStates(MyStates);
}
});
let myInstance = new MyClass();
myInstance.getState(); // -> 'init'
hasObserver
-
x -
[m = 'update']
Allows to test if a object is registered as a observer
Parameters:
-
xObjectThe object to check against
-
[m = 'update']Function | String optionalThe function or method name to check
Returns:
True if registered, false if not
Example:
import Observable from './mixins/observable';
const logger = {
log(message) {
console.log(message);
}
}
const MyClass = Observable(class {
constructor() {
this.addObserver(logger, 'log');
}
});
let myInstance = new MyClass();
myInstance.hasObserver(logger, 'log');
// -> true
notifyObservers
-
x -
[m = 'update']
Notifies all registered observers with data
Parameters:
-
xObjectThe object to register as observer
-
[m = 'update']Function | String optionalFunction or method to use as handler
Returns:
The observable instance
Example:
import Observable from './mixins/observable';
const logger = {
update(message) {
console.log(message);
}
}
const MyClass = Observable(class {
constructor() {
this.addObserver(logger);
}
});
let myInstance = new MyClass();
myInstance.notifyObservers('Sending a message');
// logs "Sending a message"
of
-
node
Creates a new AnchorTrigger instance without the "new" keyword but does not initialize it
Parameters:
-
nodeNode | String | ConfigsNode, CSS selector or configuration object
Returns:
A new instance
Example:
import AnchorTrigger from './modules/anchor/js/anchor';
const myTrigger = AnchorTrigger.of('[data-widget=AnchorTrigger]');
myTrigger.render().startUp();
offBlur
-
[selector] -
handler
Opposite of the onBlur method
Parameters:
-
[selector]String optionalSelector to match elements against
-
handlerString | FunctionEventhandler function or method name
Returns:
The instance
offChange
-
[selector] -
handler
Opposite of the onChange method
Parameters:
-
[selector]String optionalSelector to match elements against
-
handlerString | FunctionEventhandler function or method name
Returns:
The instance
offClick
-
[selector] -
handler
Opposite of the onClick method
Parameters:
-
[selector]String optionalSelector to match elements against
-
handlerString | FunctionEventhandler function or method name
Returns:
The instance
offFocus
-
[selector] -
handler
Opposite of the onFocus method
Parameters:
-
[selector]String optionalSelector to match elements against
-
handlerString | FunctionEventhandler function or method name
Returns:
The instance
offInput
-
[selector] -
handler
Opposite of the onInput method
Parameters:
-
[selector]String optionalSelector to match elements against
-
handlerString | FunctionEventhandler function or method name
Returns:
The instance
offMove
-
[selector] -
handler
Opposite of the onMove method
Parameters:
-
[selector]String optionalSelector to match elements against
-
handlerString | FunctionEventhandler function or method name
Returns:
The instance
offPress
-
[selector] -
handler
Opposite of the onPress method
Parameters:
-
[selector]String optionalSelector to match elements against
-
handlerString | FunctionEventhandler function or method name
Returns:
The instance
offRelease
-
[selector] -
handler
Opposite of the onRelease method
Parameters:
-
[selector]String optionalSelector to match elements against
-
handlerString | FunctionEventhandler function or method name
Returns:
The instance
offResize
-
[selector] -
fn
Opposite of the onResize method
Parameters:
-
[selector]String optionalSelector to match elements against
-
fnString | FunctionEventhandler function or method name
Returns:
The instance
offSubmit
-
[selector] -
handler
Opposite of the onSubmit method
Parameters:
-
[selector]String optionalSelector to match elements against
-
handlerString | FunctionEventhandler function or method name
Returns:
The instance
offTransitionEnd
-
[selector] -
handler
Opposite of the onTransitionEnd method
Parameters:
-
[selector]String optionalSelector to match elements against
-
handlerString | FunctionEventhandler function or method name
Returns:
The instance
onBlur
-
[selector] -
handler
Takes a CSS style selector and a function or methodname and registers the function or method as eventhandler for all child elements of the root element which match the selector when the blur event occurs. If the selector is omitted and only a function/methodname is given, registers the handler on the root element.
Parameters:
-
[selector]String optionalSelector to match elements against
-
handlerString | FunctionEventhandler function or method name
Returns:
The instance
Example:
import DOMModule from './modules/__base/dommodule';
class MyClass extends DOMModule {
render() {
this.onBlur('input[name=MyInput]', 'blurHandle');
}
blurHandle(event) {
// ... your code ...
}
}
onChange
-
[selector] -
handler
Takes a CSS style selector and a function or methodname and registers the function or method as eventhandler for all child elements of the root element which match the selector when the change event occurs. If the selector is omitted and only a function/methodname is given, registers the handler on the root element.
Parameters:
-
[selector]String optionalSelector to match elements against
-
handlerString | FunctionEventhandler function or method name
Returns:
The instance
Example:
import DOMModule from './modules/__base/dommodule';
class MyClass extends DOMModule {
render() {
this.onChange('button', 'changeHandle');
}
changeHandle(event) {
// ... your code ...
}
}
onClick
-
[selector] -
handler
Takes a CSS style selector and a function or methodname and registers the function or method as eventhandler for all child elements of the root element which match the selector when the click event occurs. If the selector is omitted and only a function/methodname is given, registers the handler on the root element.
Parameters:
-
[selector]String optionalSelector to match elements against
-
handlerString | FunctionEventhandler function or method name
Returns:
The instance
Example:
import DOMModule from './modules/__base/dommodule';
class MyClass extends DOMModule {
render() {
this.onClick('button', 'clickHandle');
}
clickHandle(event) {
// ... your code ...
}
}
onFocus
-
[selector] -
handler
Takes a CSS style selector and a function or methodname and registers the function or method as eventhandler for all child elements of the root element which match the selector when the focus event occurs. If the selector is omitted and only a function/methodname is given, registers the handler on the root element.
Parameters:
-
[selector]String optionalSelector to match elements against
-
handlerString | FunctionEventhandler function or method name
Returns:
The instance
Example:
import DOMModule from './modules/__base/dommodule';
class MyClass extends DOMModule {
render() {
this.onFocus('input[name=MyInput]', 'focusHandle');
}
focusHandle(event) {
// ... your code ...
}
}
onInput
-
[selector] -
handler
Takes a CSS style selector and a function or methodname and registers the function or method as eventhandler for all child elements of the root element which match the selector when either the keyup/input event occurs. If the selector is omitted and only a function/methodname is given, registers the handler on the root element.
Parameters:
-
[selector]String optionalSelector to match elements against
-
handlerString | FunctionEventhandler function or method name
Returns:
The instance
Example:
import DOMModule from './modules/__base/dommodule';
class MyClass extends DOMModule {
render() {
this.onInput('input[name=MyInput]', 'inputHandle');
}
inputHandle(event) {
// ... your code ...
}
}
onMove
-
[selector] -
handler
Takes a CSS style selector and a function or methodname and registers the function or method as eventhandler for all child elements of the root element which match the selector when either the mousemove/touchmove/pointermove event occurs. If the selector is omitted and only a function/methodname is given, registers the handler on the root element.
Parameters:
-
[selector]String optionalSelector to match elements against
-
handlerString | FunctionEventhandler function or method name
Returns:
The instance
Example:
import DOMModule from './modules/__base/dommodule';
class MyClass extends DOMModule {
render() {
this.onMove('.movearea', 'moveHandle');
}
moveHandle(event) {
// ... your code ...
}
}
onPress
-
[selector] -
handler
Takes a CSS style selector and a function or methodname and registers the function or method as eventhandler for all child elements of the root element which match the selector when either the mousedown/touchstart/pointerdown event occurs. If the selector is omitted and only a function/methodname is given, registers the handler on the root element.
Parameters:
-
[selector]String optionalSelector to match elements against
-
handlerString | FunctionEventhandler function or method name
Returns:
The instance
Example:
import DOMModule from './modules/__base/dommodule';
class MyClass extends DOMModule {
render() {
this.onPress('button', 'pressHandle');
}
pressHandle(event) {
// ... your code ...
}
}
onRelease
-
[selector] -
handler
Takes a CSS style selector and a function or methodname and registers the function or method as eventhandler for all child elements of the root element which match the selector when either the mouseup/touchend/pointerup event occurs. If the selector is omitted and only a function/methodname is given, registers the handler on the root element.
Parameters:
-
[selector]String optionalSelector to match elements against
-
handlerString | FunctionEventhandler function or method name
Returns:
The instance
Example:
import DOMModule from './modules/__base/dommodule';
class MyClass extends DOMModule {
render() {
this.onRelease('button', 'releaseHandle');
}
releaseHandle(event) {
// ... your code ...
}
}
onResize
-
fn
Takes function or methodname and registers the function or method as eventhandler on the window object.
Parameters:
-
fnString | FunctionEventhandler function or method name
Returns:
The instance
Example:
import DOMModule from './modules/__base/dommodule';
class MyClass extends DOMModule {
render() {
this.onResize('resizeHandle');
}
resizeHandle(event) {
// ... your code ...
}
}
onSubmit
-
[selector] -
handler
Takes a CSS style selector and a function or methodname and registers the function or method as eventhandler for all child elements of the root element which match the selector when submit event occurs. If the selector is omitted and only a function/methodname is given, registers the handler on the root element.
Parameters:
-
[selector]String optionalSelector to match elements against
-
handlerString | FunctionEventhandler function or method name
Returns:
The instance
Example:
import DOMModule from './modules/__base/dommodule';
class MyClass extends DOMModule {
render() {
this.onSubmit('.my-form', 'submitHandler');
}
submitHandler(event) {
// ... your code ...
}
}
onTransitionEnd
-
[selector] -
handler
Takes a CSS style selector and a function or methodname and registers the function or method as eventhandler for all child elements of the root element which match the selector when either the transitionend/webkitTransitionEnd/mozTransitionEnd/msTransitionEnd/ oTransitionEnd event occurs. If the selector is omitted and only a function/methodname is given, registers the handler on the root element.
Parameters:
-
[selector]String optionalSelector to match elements against
-
handlerString | FunctionEventhandler function or method name
Returns:
The instance
Example:
import DOMModule from './modules/__base/dommodule';
class MyClass extends DOMModule {
render() {
this.onTransitionEnd('.effectarea', 'transitionEndHandle');
}
transitionEndHandle(event) {
// ... your code ...
}
}
publish
-
channel -
data
Allows to publish information through a channel of the mediator
Parameters:
-
channelStringThe channel to publish information through
-
dataThe data to send through
Returns:
The instance
Example:
import Mediator from './mixins/mediator';
const MyClass = Mediator(class {
constructor() {}
});
let myInstance = new MyClass();
myInstance.publish('channelName', 'foo');
removeObserver
-
x -
[m = 'update']
Removes an observer object from the observable
Parameters:
-
xObjectThe object to remove
-
[m = 'update']Function | String optionalFunction or method used as handler
Returns:
The observable instance
Example:
import Observable from './mixins/observable';
const logger = {
update(message) {
console.log(message);
}
}
const MyClass = Observable(class {
constructor() {
this.addObserver(logger);
}
});
let myInstance = new MyClass();
myInstance.removeObserver(logger);
removeState
-
state
Removes a state from the FSM, if it is not the active one. Please note that you have to take care to preserve a valid path of events to consume, or otherwise the FSM will be trapped in a single state (which may be fine if that is your intention)
Parameters:
-
stateObjectThe state to remove
Returns:
The instance
Example:
import FSM from './mixins/fsm';
const MyStates = [
{name: 'init', events: {next: 'after'}},
{name: 'after', events: {next: 'last', prev: 'init'}},
{name: 'last', events: {prev: 'after'}}
];
const MyClass = FSM(class {
constructor() {
// New states MyClass can be in are added
this.addStates(MyStates);
this.removeState(MyStates[2]); // remove the 'last' state
}
});
render
()
This
Renders the instance and checks if a matching reference node has been found
Returns:
The instance
Example:
import AnchorTrigger from './modules/anchor/js/anchor';
const myTrigger = AnchorTrigger.of('[data-widget=AnchorTrigger]');
myTrigger.render();
startUp
()
Undefined
Attaches all eventlisteners to the instance
Returns:
Nothing
Example:
import AnchorTrigger from './modules/anchor/js/anchor';
const myTrigger = AnchorTrigger.of('[data-widget=AnchorTrigger]');
myTrigger.render().startUp();
subscribe
-
channel -
handler
Allows to subscribe to a channel
Parameters:
-
channelStringThe channel to subscribe to
-
handlerFunctionA handler function for incoming data
Returns:
A subscription identifier
Example:
import Mediator from './mixins/mediator';
const Foo = Mediator(class {
constructor() {
this.subscribe('BarChannel', this.handleBar, this);
}
handleBar(data) {
console.log('Foo received:', data);
}
})
const Bar = Mediator(class {
constructor() {
this.subscribe('FooChannel', this.handleFoo, this);
}
handleFoo(data) {
console.log('Bar received:', data);
}
});
let foo = new Foo();
let bar = new Bar();
foo.publish('FooChannel', 'Info from Foo');
// logs "Bar received: Info from Foo"
bar.publish('BarChannel', 'Info from Bar');
// logs "Foo received: Info from Bar"
unsubscribe
-
identifier
Allows to subscribe to a channel
Parameters:
-
identifierStringA subscription ID returned from subscribe()
Returns:
True on success, false on failure
Example:
import Mediator from './mixins/mediator';
const Foo = Mediator(class {
constructor() {
this.listens = this.subscribe('self', this.handler, this);
}
handler(data) {
console.log('Foo received:', data);
}
unlisten() {
return this.unsubscribe(this.listens);
}
})
let foo = new Foo();
foo.publish('self', 1);
// logs "Foo received: 1"
foo.unlisten()
foo.publish('self', 1);
// nothing happens
