Align

Kind: global class
Npmpackage:

Align
- new Align()
- .BOTTOM : string
- .CENTER : string
- .LEFT : string
- .RIGHT : string
- .TOP : string
- .BOTTOM_LEFT : string
- .BOTTOM_RIGHT : string
- .TOP_LEFT : string
- .TOP_RIGHT : string
- .get()
- .set()

new Align()

Import from ad-view

// importing into an ES6 class
import { Align } from 'ad-view'

Utility for aligning objects, which works for DOM elements and [CanvasDrawer](CanvasDrawer) elements. The x and y alignments are split up into separate assignemnts in one call. There are extra parameters that can be passed into the object to handle more complex logic.
Notes:
Align, by default, snaps to a full pixel. To change this, see Sample 3 ( snap: false )
Sample 1

// simple classic usage
Align.set(myDiv, Align.LEFT)   // only align left
Align.set(myDiv, Align.BOTTOM) // only align bottom
Align.set(myDiv, Align.CENTER) // align both x and y to the center

Sample 2

// simply align the x and y seperately
Align.set(myDiv, {
	x: Align.RIGHT,
	y: Align.BOTTOM
})

Sample 3
'against' is an object to which we align our given object, like making myDiv perfectly centered against myOtherDiv
'against' could also be a number, as in align myDiv centered against adParams.adWidth / 2

'outer' is an optional complex parameter which determines how we align to the 'against' object; default to false
If 'against' is a number, then 'outer' will have no affect.

// complex alignment, align in relation to another div with an offset shift of 10 pixels, without snapping to a whole pixel
Align.set(myDiv, {
	x: {
		type: Align.RIGHT,
		against: myOtherDiv,
		offset: 10,
		outer: true
	},
	y: {
		type: Align.BOTTOM,
		offset: 14
	},
	snap: false
})

Sample 4

// complex alignment, align in relation to a fixed number with an offset shift of 10 pixels
Align.set(myDiv, {
	x: {
		type: Align.RIGHT,
		against: 200
		offset: 10,
	},
	y: {
		type: Align.BOTTOM,
		against: 30
		offset: 14
	},
});

Sample 5
An Array of items can be passed in to the source argument. All items will be individually aligned following the rules passed into the arg argument

// aligns all items to the center
Align.set([myDiv0, myDiv1, myDiv2], Align.CENTER)

// aligns all items to the horizontal center and bottom
Align.set([myDiv0, myDiv1, myDiv2], {
	x: Align.CENTER,
	y: Align.BOTTOM
})

Sample 6
The optional keys: 'against', 'offset', and 'outer' can be set at the top level to apply to BOTH dirctions as applicable. However, if a key is set within 'x' or 'y', that will take priority

// aligns all items to the center of myRefDiv
Align.set([myDiv0, myDiv1, myDiv2], {
	type: Align.CENTER,
	against: myRefDiv
})

// Note the against set on the top level then in y:
// This is NOT good syntax but does technically works...
Align.set([myDiv0, myDiv1, myDiv2], {
	against: myRefDiv,
	offset: 10
	x: Align.CENTER,
	y: {
		type: Align.BOTTOM,
		against: myOtherDiv
	}
})
// ...in this case use:
Align.set([myDiv0, myDiv1, myDiv2], {
	offset: 10
	x: {
		type: Align.CENTER,
		against: myRefDiv
	},
	y: {
		type: Align.BOTTOM,
		against: myOtherDiv
	}
})