Foundation Coral UI 3 snippets

foundation-coral-3-snippets.js

// Adapt window into UI Coral 3 object
let ui = $(window).adaptTo("foundation-ui"); 

/* API:
 * 1. alert: function(title, message, type)
 * 2. clearWait: function()
 * 3. notify: function(title, message, type)
 * 4. prompt: function(title, message, type, actions, callback)
 * 5. wait: function(element)
 * 6. waitTicker: function(title, message)
 */

/* 
 * 1. alert: function(title, message, type)
 * type can be "error", "warning", "info" or null
 */
ui.alert("My Title", 
         "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ullamcorper, velit vel convallis ornare, velit sapien vestibulum massa, non ultricies sapien neque eu massa. Nunc auctor elementum tortor sit amet eleifend. Fusce tempor dui lectus, vel vestibulum massa euismod id. Morbi vel vehicula lacus, ut aliquam mi. Ut sit amet sollicitudin odio. Sed sodales sodales libero mattis posuere. Ut felis mi, consectetur nec commodo sed, fringilla et ex. Fusce pretium, orci eu elementum fermentum, arcu quam blandit justo, quis blandit metus urna sed dui.", 
         "info")

/* 
 * 2. clearWait: function()
 */
ui.clearWait()

/* 
 * 3. notify: function(title, message, type)
 * type can be "error", "warning", "info" or null
 */
ui.notify("My Title", 
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ullamcorper, velit vel convallis ornare, velit sapien vestibulum massa, non ultricies sapien neque eu massa. Nunc auctor elementum tortor sit amet eleifend. Fusce tempor dui lectus, vel vestibulum massa euismod id. Morbi vel vehicula lacus, ut aliquam mi. Ut sit amet sollicitudin odio. Sed sodales sodales libero mattis posuere. Ut felis mi, consectetur nec commodo sed, fringilla et ex. Fusce pretium, orci eu elementum fermentum, arcu quam blandit justo, quis blandit metus urna sed dui.", 
          "info")


/* 
 * 4. prompt: function(title, message, type, actions, callback)
 * type can be "error", "warning", "info" or null
 */
ui.prompt(
  "My Title", 
  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ullamcorper, velit vel convallis ornare, velit sapien vestibulum massa, non ultricies sapien neque eu massa. Nunc auctor elementum tortor sit amet eleifend. Fusce tempor dui lectus, vel vestibulum massa euismod id. Morbi vel vehicula lacus, ut aliquam mi. Ut sit amet sollicitudin odio. Sed sodales sodales libero mattis posuere. Ut felis mi, consectetur nec commodo sed, fringilla et ex. Fusce pretium, orci eu elementum fermentum, arcu quam blandit justo, quis blandit metus urna sed dui.", 
  "info", 
  [
    {
      text: "Default Cancel Button"
    }, 
    {
      text: "Custom Button",
      warning: true,
      handler: function() {
        console.log('test')
    }
}])

/* 
 * 5. wait: function(element)
 * If element is passed, the loader will be sitting on top of that particular element, not blocking the interaction with other elements on the page
 */
ui.wait()
ui.wait(document.getElementById("granite-shell-content"))

/* 
 * 6. waitTicker: function(title, message)
 */
ui.waitTicker("My Title", 
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ullamcorper, velit vel convallis ornare, velit sapien vestibulum massa, non ultricies sapien neque eu massa. Nunc auctor elementum tortor sit amet eleifend. Fusce tempor dui lectus, vel vestibulum massa euismod id. Morbi vel vehicula lacus, ut aliquam mi. Ut sit amet sollicitudin odio. Sed sodales sodales libero mattis posuere. Ut felis mi, consectetur nec commodo sed, fringilla et ex. Fusce pretium, orci eu elementum fermentum, arcu quam blandit justo, quis blandit metus urna sed dui.")