Scroll Spy Service

There are multiple components used by scrollspy

  • Scrollspy service is used to keep track of all and active anchors
  • Multiple directives including:
  • mac-scroll-spy - Element to spy scroll event
  • mac-scroll-spy-anchor - Section in element spying on
  • mac-scroll-spy-target - Element to highlight, most likely a nav item

Scrollspy defaults:
offset - 0

Parameters

register
Type: Function
Register an anchor with the service

  • {String} id ID of the anchor
  • {DOM Element} element Element to spy on

unregister
Type: Function
Remove anchor from service

  • {String} id ID of the anchor

setActive
Type: Function
Set active anchor and fire all listeners

  • {Object} anchor Anchor object

addListener
Type: Function
Add listener when active is set

  • {Function} fn Callback function

removeListener
Type: Function
Remove listener

  • {Function} fn Callback function

mac-scroll-spy

Element to spy scroll event on

Parameters

mac-scroll-spy-offset
Type: Integer
Top offset when calculating scroll position

mac-scroll-spy-anchor

Section in the spied element

Parameters

id
Type: String
ID to identify anchor

mac-scroll-spy-anchor
Type: String
ID to identify anchor (user either id or this attribute)

refresh-scroll-spy
Type: Event
To refresh the top offset of all scroll spy anchors

mac-scroll-spy-target

Element to highlight when anchor scroll into view

Parameters

mac-scroll-spy-target
Type: String
Name of the anchor

mac-scroll-spy-target-class
Type: String
Class to apply for highlighting (default active)

Example

The nav to the right and this documentation page is probably the best example

Scroll spy element

<body mac-scroll-spy mac-scroll-spy-offset="10"></body>

Scroll spy target

<ul class="nav nav-list docs-sidenav">
  <li mac-scroll-spy-target="modal"><a href="#modal">Modal</a></li>
  <li mac-scroll-spy-target="scrollspy"><a href="#scrollspy">Scroll Spy</a></li>
</ul>
Scroll spy anchor
<section id="modal" mac-scroll-spy-anchor></section>

mac-affix

Fix the component at a certain position

Parameters

mac-affix-disabled
Type: Expr
To unpin element (default false)

mac-affix-top
Type: Expr
Top offset (default 0)

mac-affix-bottom
Type: Expr
Bottom offset (default 0)

refresh-mac-affix
Type: Event
To update the position of affixed element

Example

The nav to the right uses mac-affix
<div mac-affix>Nav content</div>

Tooltip

Tooltip directive

Parameters

mac-tooltip
Type: String
Text to show in tooltip

mac-tooltip-direction
Type: String
Direction of tooltip (default 'top')

mac-tooltip-trigger
Type: String
How tooltip is triggered (default 'hover')

mac-tooltip-inside
Type: Boolean
Should the tooltip be appended inside element (default false)

mac-tooltip-disabled
Type: Expr
Disable and enable tooltip

Example

<a href="#" mac-tooltip="Tooltip on bottom" mac-tooltip-direction="bottom">Tooltip on bottom</a>

Popover Service

A popover service to keep state of opened popover. Allowing user to hide certain
or all popovers

Parameters

popoverList
Type: Array
The popover that's currently being shown

registered
Type: Array
Object storing all the registered popover DOM elements

last
Type: Function
Get data of the last popover

  • Returns {Object} The last opened popover

register
Type: Function
Register a popover with an id and an element

  • {String} id Popover id
  • {DOM Element} element Popover element
  • Returns {Bool} If the id already existed

unregister
Type: Function
Remove id and element from registered list of popover

  • {String} id Popover id
  • Returns {Bool} If the id exist

add
Type: Function
Add a new popover to opened list

  • {String} id Popover id
  • {DOM Element} popover Popover DOM element
  • {DOM Element} element Trigger DOM element
  • {Object} options Additional options
  • Returns {Object} The new popover object

pop
Type: Function
Get and remove the last popover from list

  • Returns {Object} Last element from popoverList

show
Type: Function
Show and position a registered popover

  • {String} id Popover id
  • {DOM Element} element Element that trigger the popover
  • {Object} options Additional options for popover

getById
Type: Function
Get opened popover object by id

  • {String} id Popover id
  • Returns {Object} Opened popover object

resize
Type: Function
Update size and position of an opened popover

  • {Object|String} popoverObj Support multiple type input:
    • Object: One of the popover objects in popoverList
    • String: Popover ID

hide
Type: Function
Hide a certain popover. If no selector is provided, the
last opened popover is hidden

  • {DOM Element|String} selector Support multiple type input:
    • DOM Element: Popover trigger element
    • String: Popover ID
  • {Function} callback Callback after popover is hidden

hideAll
Type: Function
Hide all popovers

mac-popover (attribute)

Mac popover trigger directive. Without using mac-popover-child-popover, the last
popover will be closed automatically

Parameters

mac-popover
Type: String
ID of the popover to show

mac-popover-fixed
Type: Boolean
Determine if the popover is fixed

mac-popover-child-popover
Type: Boolean
If the popover is child of another popover (default false)

mac-popover-offset-x
Type: Integer
Extra x offset (default 0)

mac-popover-offset-y
Type: Integer
Extra y offset (default 0)

mac-popover-trigger
Type: String
Trigger option, click | hover | focus (default click)

  • click: Popover only opens when user click on trigger
  • hover: Popover shows when user hover on trigger
  • focus: Popover shows when focus on input element

mac-popover-exclude
Type: String
CSV of popover id that can't be shown at the same time

mac-popover(element)

Element directive to define popover

Parameters

id
Type: String
Modal id

mac-popover-refresh-on
Type: String
Event to update popover size and position

mac-popover-footer
Type: Bool
Show footer or not

mac-popover-header
Type: Bool
Show header or not

mac-popover-title
Type: String
Popover title

mac-popover-direction
Type: String
Popover direction (default "above left")

  • above, below or middle - Place the popover above, below or center align the trigger element
  • left or right - Place tip on the left or right of the popover

Example

Open a popoverOpen a popoverOpen a popoverOpen a popoverOpen a popoverOpen a popover
<a mac-popover="testPopover">Open test popover</a>

<mac-popover id="testPopover" >Open a popover</mac-popover>

Autocomplete

A directive for providing suggestions while typing into the field

Autocomplete allows for custom html templating in the dropdown and some properties are exposed on the local scope on each template instance, including:

Variable Type Details
$index Number iterator offset of the repeated element (0..length-1)
$first Boolean true if the repeated element is first in the iterator.
$middle Boolean true if the repeated element is between the first and last in the iterator.
$last Boolean true if the repeated element is last in the iterator.
$even Boolean true if the iterator position $index is even (otherwise false).
$odd Boolean true if the iterator position $index is odd (otherwise false).
item Object item object with value and label if label-key is set

To use custom templating 

<mac-autocomplete mac-autocomplete-url="someUrl" ng-model="model">  
  <span> {{item.label}} </span>  
</mac-autocomplete>

Template default to {{item.label}} if not defined

Dependencies

  • mac-menu

Parameters

ng-model
Type: String
Assignable angular expression to data-bind to (required)

mac-placeholder
Type: String
Placeholder text

mac-autocomplete-url
Type: String
Url to fetch autocomplete dropdown list data. URL may include GET params e.g. "/users?nocache=1"

mac-autocomplete-source
Type: Expression
Data to use.
Source support multiple types:

  • Array: An array can be used for local data and there are two supported formats:
    • An array of strings: ["Item1", "Item2"]
    • An array of objects with mac-autocomplete-label key: [{name:"Item1"}, {name:"Item2"}]
  • String: Using a string as the source is the same as passing the variable into mac-autocomplete-url
  • Function: A callback when querying for data. The callback receive two arguments:
    • {String} Value currently in the text input
    • {Function} A response callback which expects a single argument, data to user. The data will be
      populated on the menu and the menu will adjust accordingly

mac-autocomplete-disabled
Type: Boolean
Boolean value if autocomplete should be disabled

mac-autocomplete-on-select
Type: Function
Function called when user select on an item

  • selected - {Object} The item selected

mac-autocomplete-on-success
Type: Function
function called on success ajax request

  • data - {Object} Data returned from the request
  • status - {Number} The status code of the response
  • header - {Object} Header of the response

mac-autocomplete-on-error
Type: Function
Function called on ajax request error

  • data - {Object} Data returned from the request
  • status - {Number} The status code of the response
  • header - {Object} Header of the response

mac-autocomplete-label
Type: String
The label to display to the users (default "name")

mac-autocomplete-query
Type: String
The query parameter on GET command (default "q")

mac-autocomplete-delay
Type: Integer
Delay on fetching autocomplete data after keyup (default 800)

mac-menu-class
Type: Expr
Classes for mac-menu used by mac-autocomplete. For more info, check ngClass

Example

<mac-autocomplete
  mac-autocomplete-url="autocompleteUrl"
  mac-autocomplete-query="q"
  mac-autocomplete-on-success="onSuccess(data)"
  mac-placeholder="\'Autocomplete\'"
  ng-model="autocompleteQuery">
</mac-autocomplete>

Example with autocomplete using source

<mac-autocomplete
  mac-autocomplete-source="[\'hello\', \'world\']"
  mac-placeholder="\'Autocomplete\'">
  ng-model="autocompleteSourceQuery"
</mac-autocomplete>

Tag Autocomplete

A directive for generating tag input with autocomplete support on text input.
Tag autocomplete has priority 800

Dependencies

  • mac-autocomplete
  • mac-menu

Parameters

mac-tag-autocomplete-url
Type: String
Url to fetch autocomplete dropdown list data.
mac-tag-autocomplete-url and mac-tag-autocomplete-source cannot be used together. Url
will always take priority over mac-tag-autocomplete-source.

mac-tag-autocomplete-source
Type: String
Data to use.
Source support multiple types:

  • Array: An array can be used for local data and there are two supported formats:
    • An array of strings: ["Item1", "Item2"]
    • An array of objects with mac-autocomplete-label key: [{name:"Item1"}, {name:"Item2"}]
  • String: Using a string as the source is the same as passing the variable into mac-autocomplete-url
  • Function: A callback when querying for data. The callback receive two arguments:
    • {String} Value currently in the text input
    • {Function} A response callback which expects a single argument, data to user. The data will be
      populated on the menu and the menu will adjust accordingly

mac-tag-autocomplete-value
Type: String
The value to be sent back upon selection (default "id")

mac-tag-autocomplete-label
Type: String
The label to display to the users (default "name")

mac-tag-autocomplete-model
Type: Expr
Model for autocomplete

mac-tag-autocomplete-selected
Type: Array
The list of elements selected by the user (required)

mac-tag-autocomplete-query
Type: String
The query parameter on GET command (defualt "q")

mac-tag-autocomplete-delay
Type: Integer
Time delayed on fetching autocomplete data after keyup (default 800)

mac-tag-autocomplete-placeholder
Type: String
Placeholder text of the text input (default "")

mac-tag-autocomplete-disabled
Type: Boolean
If autocomplete is enabled or disabled (default false)

mac-tag-autocomplete-on-enter
Type: Expr
When autocomplete is disabled, this function is called on enter, Should return either string, object or boolean. If false, item is not added

  • item - {String} User input

mac-tag-autocomplete-events
Type: String
A CSV list of events to attach functions to

mac-tag-autocomplete-on-
Type: Expr
Function to be called when specified event is fired

  • event - {Object} jQuery event
  • value - {String} Value in the input text

mac-tag-autocomplete-clear-input
Type: Event
$broadcast message; clears text input when received

Example

<mac-tag-autocomplete
  mac-tag-autocomplete-url="autocompleteUrl"
  mac-tag-autocomplete-query="q"
  mac-tag-autocomplete-selected="tagAutocompleteSelected"
  mac-tag-autocomplete-value="id"
  mac-tag-autocomplete-label="name"
  mac-tag-autocomplete-placeholder="\'Autocomplete\'"
  mac-tag-autocomplete-model="tagAutocompleteModel">
</mac-tag-autocomplete>

Example with autocomplete disabled

<mac-tag-autocomplete
  mac-tag-autocomplete-selected="tagAutocompleteDisabledSelected"
  mac-tag-autocomplete-placeholder="tagAutocompletePlaceholder"
  mac-tag-autocomplete-value=""
  mac-tag-autocomplete-label=""
  mac-tag-autocomplete-disabled="true">
</mac-tag-autocomplete>

Example with custom actions on events

<mac-tag-autocomplete
  mac-tag-autocomplete-selected="tagAutocompleteEvents"
  mac-tag-autocomplete-placeholder="tagAutocompletePlaceholder"
  mac-tag-autocomplete-value="key"
  mac-tag-autocomplete-label="key"
  mac-tag-autocomplete-on-enter="tagAutocompleteOnSelected(item)"
  mac-tag-autocomplete-events="blur,keyup"
  mac-tag-autocomplete-on-blur="tagAutocompleteOnBlur($event, item)"
  mac-tag-autocomplete-on-keyup="tagAutocompleteOnKeyup()"
  mac-tag-autocomplete-disabled="true"
  mac-tag-autocomplete-model="tagAutocompleteModel">
</mac-tag-autocomplete>

Datepicker

A directive for creating a datepicker on text input using jquery ui. Time input can use any ng- attributes support by text input type.

Dependencies

  • jQuery
  • jQuery datepicker

Parameters

ng-model
Type: String
The model to store the selected date
Clearing model by setting it to null or '' will clear the input field

mac-datepicker-on-select
Type: Function
Function called before setting the value to the model

  • date - {String} Selected date from the datepicker
  • instance - {Object} Datepicker instance

mac-datepicker-on-close
Type: String
Function called before closing datepicker

  • date - {String} Selected date from the datepicker
  • instance - {Object} Datepicker instance

mac-datepicker-append-text
Type: String
The text to display after each date field

mac-datepicker-auto-size
Type: Boolean
Automatically resize the input to accommodate dates in the current dateFormat

mac-datepicker-change-month
Type: Boolean
Whether the month should be rendered as a dropdown instead of text

mac-datepicker-change-year
Type: Boolean
Whether the year should be rendered as a dropdown instead of text

mac-datepicker-constrain-input-type
Type: Boolean
Constrain characters allowed by the current dateFormat

mac-datepicker-current-text
Type: String
Text to display for the current day link

mac-datepicker-date-format
Type: String
The format for parse and displayed dates

mac-datepicker-default-date
Type: Expression
Date to highligh on first opening if the field is blank {Date|Number|String}

mac-datepicker-duration
Type: String
Control the speed at which the datepicker appears

mac-datepicker-first-day
Type: Integer
Set the first day of the week. Sunday is 0, Monday is 1

mac-datepicker-max-date
Type: Expression
The maximum selectable date {Date|Number|String}

mac-datepicker-min-date
Type: Expression
The minimum selectable date {Date|Number|String}

mac-datepicker-number-of-months
Type: Integer
The number of months to show at once

mac-datepicker-show-on
Type: String
When the datepicker should appear

mac-datepicker-year-range
Type: Integer
The range of years displayed in the year drop-down

ng-disabled
Type: Boolean
Enable or disable datepicker

Example

<mac-datepicker id="input-start-date" ng-model="startDate"></mac-datepicker>

Time

A directive for creating a time input field. Time input can use any ng- attributes support by text input type.

Parameters

ng-model
Type: String
Assignable angular expression to data-bind to
Clearing model by setting it to null or '' will set model back to default value

name
Type: String
Property name of the form under which the control is published

required
Type: String
Adds required validation error key if the value is not entered.

ng-required
Type: String
Adds required attribute and required validation constraint to
the element when the ngRequired expression evaluates to true. Use ngRequired instead of
required when you want to data-bind to the required attribute.

ng-pattern
Type: String
Sets pattern validation error key if the value does not match the
RegExp pattern expression. Expected value is /regexp/ for inline patterns or regexp for
patterns defined as scope expressions.

ng-change
Type: String
Angular expression to be executed when input changes due to user interaction with the input element.

ng-disabled
Type: String
Enable or disable time input

mac-time-default
Type: String
If model is undefined, use this as the starting value (default 12:00 PM)

Example

<mac-time
  id="input-start-time"
  ng-model="myStartTime"
  mac-time-default="11:59 PM">
</mac-time>

Spinner

A directive for generating spinner

Parameters

mac-spinner-size
Type: Integer
The size of the spinner (default 16)

mac-spinner-z-index
Type: Integer
The z-index (default inherit)

mac-spinner-color
Type: String
Color of all the bars (default #2f3035)

Example

<mac-spinner></mac-spinner>

Canvas Spinner

A directive for generating a canvas spinner
This spinner requires much less CPU/GPU resources than CSS spinner

Parameters

mac-cspinner-width
Type: Integer
Width of each bar (default 2)

mac-cspinner-height
Type: Integer
Height of each bar (default 5)

mac-cpsinner-border
Type: Integer
Border radius (default 1)

mac-cspinner-size
Type: Integer
Dimension of the whole spinner excluding padding (default 20)

mac-cspinner-radius
Type: Integer
Center radius (default 4)

mac-cspinner-bars
Type: Integer
Number of bars (default 10)

mac-cspinner-padding
Type: Integer
Padding around the spinner (default 3)

mac-cspinner-speed
Type: Integer
ms delay between each animation

mac-cspinner-color
Type: String
Color of each bar

mac-cspinner-spin
Type: Expr
Start or stop spinner

Example

<mac-cspinner></mac-cspinner>

Placeholder

Dynamically fill out the placeholder text of input

Parameters

mac-placeholder
Type: String
Variable that contains the placeholder text

Example

<input type="text" mac-placeholder="placeholderVariable">

File upload

File upload has been moved to a separate module. Module can be found here