Sha256: cfdbe44b7a407a4dfda5d47d95bd5ee4ef8f28cc9d07f1af4b7702a079d47383
Contents?: true
Size: 1.37 KB
Versions: 9
Compression:
Stored size: 1.37 KB
Contents
// Preview CSS changes in real time through data attributes when the change event is dispatched. // // @example // ```erb // <%= form.radio_button :text_color, "Blue" // data: { // "css-preview" => true, // "css-preview-updates" => "[data-css-example]:color:blue;" // } %> // // <%= form.radio_button :text_color, "Red" // data: { // "css-preview" => true, // "css-preview-updates" => "[data-css-example]:color:red;" // } %> // // <div data-css-example>This is an example</div> // ``` // // It supports multiple rules separated by semicolons: // selector:property:value; selector:property:value; // // for example: // strong[data-css-example]:color:#0000ff; strong[data-css-example]:backgroundColor:#eeeeee; // window.addEventListener("DOMContentLoaded", () => { document.querySelectorAll("input[data-css-preview=true]").forEach((element) => { element.addEventListener("change", (event) => { const updateRules = event.target.dataset.cssPreviewUpdates.split(";"); updateRules.forEach((rule) => { const [target, property, value] = rule.split(":"); if (target !== "") { document.querySelector(target).style[property.trim()] = value.trim(); } }); }) }) })
Version data entries
9 entries across 9 versions & 1 rubygems