https://optimo.ch/assets/gray_matter/custom-cc01aedbdf3641fa80136f…5e4c34a80b044244ad41dfde91cd0a0eac72759e.js

1import FontRadar from 'gray_matter/custom/font_radar'
2import Extend from 'gray_matter/custom/extend'
3import GlyphNames from 'gray_matter/custom/glyph_names'
4import SalesAnalytics from 'gray_matter/custom/sales_analytics'
5import MarkItem from 'gray_matter/rich_text/mark_item'
6import * as Notification from 'gray_matter/utility/notification'
7import * as RichText from 'gray_matter/rich_text/init'
8import axios from 'axios'
9
10export function init(){
11  FontRadar();
12  Extend();
13  GlyphNames();
14  SalesAnalytics();
15  let create_gradient = document.getElementById('create_gradient');
16  if (create_gradient) create_gradient.addEventListener('click', createGradient);
17
18  let save_left_gradient = document.getElementById('save_left_gradient');
19  if (save_left_gradient) save_left_gradient.addEventListener('click', saveLeftGradient);
20  
21  let save_right_gradient = document.getElementById('save_right_gradient');
22  if (save_right_gradient) save_right_gradient.addEventListener('click', saveRightGradient);
23}
24
25async function saveLeftGradient() {
26  const response = await axios.post('/gray_matter/save_gradient', gradientData(1));
27  Notification.showNotification('Gradient saved');   
28}
29
30async function saveRightGradient() {
31  const response = await axios.post('/gray_matter/save_gradient', gradientData(2));
32  Notification.showNotification('Gradient saved');   
33}
34
35function gradientData(side){
36  let data = {};
37  document.querySelectorAll(`.gradient_item .gradient_${side}`).forEach((t) => {
38    data[t.dataset.id] = t.dataset.color;
39  });
40  return { gradient: data };
41}
42
43async function createGradient(){
44  let items = document.querySelectorAll('.gradient_item');
45  const response = await axios.post('/gray_matter/create_gradient', {
46    c1: [
47      document.getElementById('gradient_start_color_h').value, 
48      document.getElementById('gradient_start_color_s').value, 
49      document.getElementById('gradient_start_color_l').value
50    ],
51    c2: [
52      document.getElementById('gradient_end_color_h').value, 
53      document.getElementById('gradient_end_color_s').value, 
54      document.getElementById('gradient_end_color_l').value
55    ],
56    steps: items.length
57  });
58
59  items.forEach((item, i) => {
60    gradientUpdate(item.querySelector('.gradient_1'), response.data.rgb[i]);
61    gradientUpdate(item.querySelector('.gradient_2'), response.data.hsl[i]);
62  });
63}
64
65function gradientUpdate(e, color){
66  e.style.backgroundColor = `#${color}`;
67  e.dataset.color = color;
68}
69
70export function initExtension(){}
71
72export function initRichText(){
73  RichText.addMark(
74    'highlight',
75    {
76      parseDOM: [{tag: "span"}],
77      toDOM() { return ["span", 0] }
78    },
79    {
80      label: 'Highlight'
81    }
82  );
83
84  RichText.addMark(
85    'numerator',
86    {
87      parseDOM: [{tag: "span.numerator", priority: 100}],
88      toDOM() { return ["span", {class: "numerator"}, 0] }
89    },
90    {
91      label: 'Numerator'
92    }
93  );
94
95  RichText.addMark(
96    'small',
97    {
98      parseDOM: [{tag: "span.small", priority: 100}],
99      toDOM() { return ["span", {class: "small"}, 0] }
100    },
101    {
102      label: 'Small'
103    }
104  );
105};