index.js 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. import $ from 'jquery';
  2. import Compile, { prepareElement, resetElement } from './compile';
  3. import Forms from '../forms';
  4. import { hex2rgb } from '../utils/colors';
  5. import './presets';
  6. const body = $('body');
  7. const FormState = Forms.FormState.Instance;
  8. const compiler = (element, preview = false, exportScss = false, callback = () => {}) => {
  9. prepareElement(element);
  10. let fields = FormState.collect();
  11. Compile({
  12. preview,
  13. exportScss,
  14. color_scheme: !fields ? [] : fields.filter((value, key) => key.match(/^data\[whitelabel]\[color_scheme]/)).toJS(),
  15. callback: (response) => {
  16. callback.call(callback, response);
  17. resetElement(element);
  18. }
  19. });
  20. };
  21. body.on('click', '[data-preview-scss]', (event) => {
  22. event && event.preventDefault();
  23. let element = $(event.currentTarget);
  24. if (element.data('busy_right_now')) { return false; }
  25. compiler(element, true, false, (response) => {
  26. if (response.files) {
  27. Object.keys(response.files).forEach((key) => {
  28. let file = $(`#admin-pro-preview-${key}`);
  29. let timestamp = Date.now();
  30. if (!file.length) {
  31. file = $(`<link id="admin-pro-preview-${key}" type="text/css" rel="stylesheet" />`);
  32. $('head').append(file);
  33. if (!$('[data-reset-scss]').length) {
  34. let reset = $('<button class="button" data-reset-scss style="margin-left: 5px;"><i class="fa fa-fw fa-history"></i> Reset</button>');
  35. reset.insertAfter(element);
  36. }
  37. }
  38. file.attr('href', `${response.files[key]}?${timestamp}`);
  39. });
  40. }
  41. });
  42. });
  43. body.on('click', '[data-recompile-scss]', (event) => {
  44. event && event.preventDefault();
  45. let element = $(event.currentTarget);
  46. if (element.data('busy_right_now')) { return false; }
  47. compiler(element, true, false);
  48. });
  49. body.on('click', '[data-export-scss]', (event) => {
  50. event && event.preventDefault();
  51. let element = $(event.currentTarget);
  52. if (element.data('busy_right_now')) { return false; }
  53. compiler(element, true, true, (response) => {
  54. if (response.files) {
  55. Object.keys(response.files).forEach((key) => {
  56. if (key === 'download') {
  57. let element = document.createElement('a');
  58. element.setAttribute('href', response.files[key]);
  59. element.setAttribute('download', '');
  60. element.style.display = 'none';
  61. document.body.appendChild(element);
  62. element.click();
  63. document.body.removeChild(element);
  64. }
  65. });
  66. }
  67. });
  68. });
  69. body.on('change._grav_colorpicker', '[data-grav-colorpicker]', (event, input, hex, opacity) => {
  70. let RGB = hex2rgb(hex);
  71. let YIQ = ((RGB.r * 299) + (RGB.g * 587) + (RGB.b * 114)) / 1000;
  72. let contrast = YIQ >= 128 || opacity <= 0.50 ? 'dark' : 'light';
  73. input.parent().removeClass('dark-text light-text').addClass(`${contrast}-text`);
  74. });
  75. body.ready(() => {
  76. $('[data-grav-colorpicker]').trigger('keyup');
  77. });