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

Version Path
decidim-admin-0.30.0.rc2 app/packs/src/decidim/admin/css_preview.js
decidim-admin-0.30.0.rc1 app/packs/src/decidim/admin/css_preview.js
decidim-admin-0.29.2 app/packs/src/decidim/admin/css_preview.js
decidim-admin-0.29.1 app/packs/src/decidim/admin/css_preview.js
decidim-admin-0.29.0 app/packs/src/decidim/admin/css_preview.js
decidim-admin-0.29.0.rc4 app/packs/src/decidim/admin/css_preview.js
decidim-admin-0.29.0.rc3 app/packs/src/decidim/admin/css_preview.js
decidim-admin-0.29.0.rc2 app/packs/src/decidim/admin/css_preview.js
decidim-admin-0.29.0.rc1 app/packs/src/decidim/admin/css_preview.js