<!DOCTYPE html> <html class="no-js" lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="x-ua-compatible" content="ie=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>ZURB Tribute | Demo</title> <link rel="stylesheet" href="css/foundation.min.css" /> <link rel="stylesheet" href="tribute.css" /> <style> body { position: relative; } .tribute-demo-input { outline: none; border: 1px solid #eee; padding: 3px 5px; border-radius: 2px; font-size: 15px; min-height: 32px; cursor: text; } .tribute-demo-input:focus { border-color: #d1d1d1; background-color: #fbfbfb; } [contenteditable="true"]:empty:before { content: attr(placeholder); display: block; color: #ccc; } #test-autocomplete-container { position: relative; } #test-autocomplete-textarea-container { position: relative; } .float-right { float: right; } </style> </head> <body> <div class="row text-center"> <div class="large-12 columns"> <h1>Tribute Demo</h1> </div> </div> <div class="row"> <div class="large-8 small-centered columns"> <div class="callout large"> <h5>Tribute on <code>contenteditable</code> element:</h5> <a id="activateInput">@mention</a> <p id="test" class="tribute-demo-input" placeholder="Enter some text here" ></p> <h5> Tribute with a local collection (on <code>@</code>) and a remote one (on <code>#</code>): </h5> <p id="testMultiple" class="tribute-demo-input" placeholder="Enter some text here" ></p> </div> </div> </div> <br /><br /> <div class="row"> <div class="large-8 small-centered columns"> <div class="callout large"> <h5> Tribute with <code>autocompleteMode:true</code> on <code>contenteditable</code> element: </h5> <!-- <a id="activateInput">@mention</a> --> <div id="test-autocomplete-container"> <p id="test-autocomplete" class="tribute-demo-input" placeholder="States of USA" ></p> </div> </div> </div> </div> <div class="row"> <div class="large-8 small-centered columns"> <div class="callout large"> <h5> Tribute with <code>autocompleteMode:true</code> on <code>textarea</code> element: </h5> <div id="test-autocomplete-textarea-container"> <textarea id="test-autocomplete-textarea" cols="40" rows="10" placeholder="States of USA" ></textarea> </div> </div> </div> </div> <div class="row" id="content"> <div class="large-8 medium-8 small-centered columns"> <h5>Tribute on traditional form elements!</h5> <form> <div class="row"> <div class="large-12 columns"> <label>Input Label</label> <input id="testInput" type="text" placeholder="Enter some text here" /> </div> </div> <div class="row"> <div class="large-12 columns"> <label>Textarea Label</label> <textarea id="testarea" placeholder="Enter some text here" ></textarea> </div> </div> </form> <hr /> <p> Brought to you by <a href="https://zurb.com/">ZURB</a>, the creators of <a href="https://helio.app/">Helio</a> </p> <p> Design successful products by rapidly revealing key user behaviors. <a href="https://helio.app/">Helio</a> makes it easy to get reactions on your designs quickly so your team can focus on solving the right problems, right now. </p> <p> The code is available under the <a href="https://github.com/zurb/tribute/blob/master/LICENSE" >MIT License</a >. </p> </div> </div> <script src="tribute.js"></script> <script> // example of alternative callback var tribute = new Tribute({ // menuContainer: document.getElementById('content'), values: [ { key: "Jordan Humphreys", value: "Jordan Humphreys", email: "getstarted@zurb.com" }, { key: "Sir Walter Riley", value: "Sir Walter Riley", email: "getstarted+riley@zurb.com" } ], selectTemplate: function(item) { if (typeof item === "undefined") return null; if (this.range.isContentEditable(this.current.element)) { return ( '<span contenteditable="false"><a href="http://zurb.com" target="_blank" title="' + item.original.email + '">' + item.original.value + "</a></span>" ); } return "@" + item.original.value; }, requireLeadingSpace: false }); tribute.attach(document.getElementById("test")); tribute.attach(document.getElementById("testInput")); tribute.attach(document.getElementById("testarea")); var tributeMultipleTriggers = new Tribute({ collection: [ { // The function that gets call on select that retuns the content to insert selectTemplate: function(item) { if (this.range.isContentEditable(this.current.element)) { return ( '<a href="http://zurb.com" title="' + item.original.email + '">@' + item.original.value + "</a>" ); } return "@" + item.original.value; }, // the array of objects values: [ { key: "Jordan Humphreys", value: "Jordan Humphreys", email: "jordan@zurb.com" }, { key: "Sir Walter Riley", value: "Sir Walter Riley", email: "jordan+riley@zurb.com" } ] }, { // The symbol that starts the lookup trigger: "#", // The function that gets call on select that retuns the content to insert selectTemplate: function(item) { if (this.range.isContentEditable(this.current.element)) { return ( '<a href="mailto:' + item.original.email + '">#' + item.original.name.replace() + "</a>" ); } return "#" + item.original.name; }, // function retrieving an array of objects values: [ { name: "Bob Bill", email: "bobbill@example.com" }, { name: "Steve Stevenston", email: "steve@example.com" } ], lookup: "name", fillAttr: "name" } ] }); tributeMultipleTriggers.attach(document.getElementById("testMultiple")); document .getElementById("test") .addEventListener("tribute-replaced", function(e) { console.log("Original Event:", e.detail.event); console.log("Matched item:", e.detail.item); }); var noMatchRunOnce = false; document .getElementById("test") .addEventListener("tribute-no-match", function(e) { if (noMatchRunOnce) return; var values = [ { key: "Cheese Tacos", value: "Cheese Tacos", email: "cheesetacos@zurb.com" } ]; tribute.appendCurrent(values); noMatchRunOnce = true; }); var activateLink = document.getElementById("activateInput"); if (activateLink) { activateLink.addEventListener("mousedown", function(e) { e.preventDefault(); var input = document.getElementById("test"); tribute.showMenuForCollection(input); }); } // example of Tribute in autocomplete mode var tributeAttributes = { autocompleteMode: true, noMatchTemplate: "", values: [ { key: "Alabama", value: "Alabama" }, { key: "Alaska", value: "Alaska" }, { key: "Arizona", value: "Arizona" }, { key: "Arkansas", value: "Arkansas" }, { key: "California", value: "California" }, { key: "Colorado", value: "Colorado" }, { key: "Connecticut", value: "Connecticut" }, { key: "Delaware", value: "Delaware" }, { key: "Florida", value: "Florida" }, { key: "Georgia", value: "Georgia" }, { key: "Hawaii", value: "Hawaii" }, { key: "Idaho", value: "Idaho" }, { key: "Illinois", value: "Illinois" }, { key: "Indiana", value: "Indiana" }, { key: "Iowa", value: "Iowa" }, { key: "Kansas", value: "Kansas" }, { key: "Kentucky", value: "Kentucky" }, { key: "Louisiana", value: "Louisiana" }, { key: "Maine", value: "Maine" }, { key: "Maryland", value: "Maryland" }, { key: "Massachusetts", value: "Massachusetts" }, { key: "Michigan", value: "Michigan" }, { key: "Minnesota", value: "Minnesota" }, { key: "Mississippi", value: "Mississippi" }, { key: "Missouri", value: "Missouri" }, { key: "Montana", value: "Montana" }, { key: "Nebraska", value: "Nebraska" }, { key: "Nevada", value: "Nevada" }, { key: "New Hampshire", value: "New Hampshire" }, { key: "New Jersey", value: "New Jersey" }, { key: "New Mexico", value: "New Mexico" }, { key: "New York", value: "New York" }, { key: "North Carolina", value: "North Carolina" }, { key: "North Dakota", value: "North Dakota" }, { key: "Ohio", value: "Ohio" }, { key: "Oklahoma", value: "Oklahoma" }, { key: "Oregon", value: "Oregon" }, { key: "Pennsylvania", value: "Pennsylvania" }, { key: "Rhode Island", value: "Rhode Island" }, { key: "South Carolina", value: "South Carolina" }, { key: "South Dakota", value: "South Dakota" }, { key: "Tennessee", value: "Tennessee" }, { key: "Texas", value: "Texas" }, { key: "Utah", value: "Utah" }, { key: "Vermont", value: "Vermont" }, { key: "Virginia", value: "Virginia" }, { key: "Washington", value: "Washington" }, { key: "West Virginia", value: "West Virginia" }, { key: "Wisconsin", value: "Wisconsin" }, { key: "Wyoming", value: "Wyoming" } ], selectTemplate: function(item) { if (typeof item === "undefined") return null; if (this.range.isContentEditable(this.current.element)) { return ( '<span contenteditable="false"><a>' + item.original.key + "</a></span>" ); } return item.original.value; }, menuItemTemplate: function(item) { return item.string; } }; var tributeAutocompleteTest = new Tribute( Object.assign( { menuContainer: document.getElementById( "test-autocomplete-container" ) }, tributeAttributes ) ); tributeAutocompleteTest.attach( document.getElementById("test-autocomplete") ); var tributeAutocompleteTestArea = new Tribute( Object.assign( { menuContainer: document.getElementById( "test-autocomplete-textarea-container" ) }, tributeAttributes ) ); tributeAutocompleteTestArea.attach( document.getElementById("test-autocomplete-textarea") ); </script> </body> </html>