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

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 left 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

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

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

Example

The nav to the left 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>

Autocomplete

A directive for providing suggestions while typing into the field

Dependencies

  • mac-menu

Parameters

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

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)

Example

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

Example with autocomplete using source

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

Tag Autocomplete

A directive for generating tag input with autocomplete support on text input

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

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

Dependencies

  • jQuery
  • jQuery datepicker

Parameters

mac-datepicker-id
Type: String
The id of the text input field

mac-datepicker-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

mac-datepicker-disabled
Type: Boolean
Enable or disable datepicker

Example

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

Time

A directive for creating a time input field

Parameters

mac-time-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

mac-time-placeholder
Type: String
Placeholder text of the text input (default --:--)

mac-time-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
  mac-time-id="input-start-time"
  mac-time-model="myStartTime"
  mac-time-default="11:59 PM">
</mac-time>

Tag Input

A directive for generating tag input.

Parameters

mac-tag-input-tags
Type: String
The list of elements to populate the select input

mac-tag-input-selected
Type: String
The list of elements selected by the user

mac-tag-input-placeholder
Type: String
Placeholder text for tag input (default "")

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

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

Proxy directive to mac tag autocomplete

Example

<mac-tag-input
  mac-tag-input-tags="extraTagInputs"
  mac-tag-input-placeholder="Select all target countries"
  mac-tag-input-selected="selected"
  mac-tag-input-value="id"
  mac-tag-input-label="name">
</mac-tag-input>

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>

File upload

Directive for proxying jQuery file upload

Dependencies

  • jQuery file upload

Parameters

mac-upload-route
Type: String
File upload route

mac-upload-submit
Type: Function
Function to call on submit

mac-upload-success
Type: Function
Upload success callback

mac-upload-error
Type: Function
Upload error callback

mac-upload-always
Type: Function
Callback for completed (success, abort or error) requests

mac-upload-previews
Type: Expression
List of uploaded files {Array}

mac-upload-progress
Type: Function
Upload progress callback

mac-upload-drop-zone
Type: String
The selector that we can drop files onto

mac-upload-form-data
Type: Expression
Additional form data {Array|Object|Function|FormData}

mac-upload-options
Type: Expression
Additional options to pass to jquery fileupload

Example

Upload
  • {{preview.fileName}}
<input type="file"
  name="files[]"
  ng-disabled="!fileUploaderEnabled"
  multiple="multiple"
  mac-upload="mac-upload"
  mac-upload-route="uploadRoute"
  mac-upload-success="fileUploadSuccess($data, $status)"
  mac-upload-error="fileUploadError($response, $data, $status)"
  mac-upload-submit="fileUploadSubmit($event, $data)"
  mac-upload-drop-zone=".example-hit-area"
  mac-upload-previews="uploadPreviews"/>
<ul>
  <li ng-repeat="preview in uploadPreviews">
    <img ng-src="{{previewImage(preview)}}"/>
    <span>{{preview.fileName}}</span>
  </li>
</ul>

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">