|
1
|
|
|
/* globals wp */ |
|
2
|
|
|
import $ from 'jquery' |
|
3
|
|
|
|
|
4
|
|
|
wp.customize.controlConstructor['flynt-typography'] = wp.customize.Control.extend({ |
|
5
|
|
|
ready: function () { |
|
6
|
|
|
const control = this |
|
7
|
|
|
const $select = this.container.find('select') |
|
8
|
|
|
const $variants = this.container.find('.flynt-typography-variants') |
|
9
|
|
|
const $subsets = this.container.find('.flynt-typography-subsets') |
|
10
|
|
|
let settings = control.params.value |
|
11
|
|
|
|
|
12
|
|
|
$select.select2({ |
|
13
|
|
|
data: Object.values(control.params.fonts) |
|
14
|
|
|
}) |
|
15
|
|
|
|
|
16
|
|
|
console.log('control', control) |
|
|
|
|
|
|
17
|
|
|
$select.val(control.params.font).trigger('change') |
|
18
|
|
|
|
|
19
|
|
|
const addOptions = function (element, options, selected = []) { |
|
20
|
|
|
for (const option of options) { |
|
21
|
|
|
const $label = $('<label>') |
|
22
|
|
|
|
|
23
|
|
|
$('<input>', { |
|
24
|
|
|
value: option, |
|
25
|
|
|
type: 'checkbox', |
|
26
|
|
|
checked: selected.includes(option) |
|
27
|
|
|
}).appendTo($label) |
|
28
|
|
|
|
|
29
|
|
|
$('<span>', { |
|
30
|
|
|
text: option |
|
31
|
|
|
}).appendTo($label) |
|
32
|
|
|
|
|
33
|
|
|
$label.appendTo(element) |
|
34
|
|
|
} |
|
35
|
|
|
} |
|
36
|
|
|
|
|
37
|
|
|
$select.on('select2:select', (e) => { |
|
38
|
|
|
const data = e.params.data |
|
39
|
|
|
const id = data.id |
|
40
|
|
|
|
|
41
|
|
|
settings = { |
|
42
|
|
|
family: data.family, |
|
43
|
|
|
subsets: [], |
|
44
|
|
|
variants: [], |
|
45
|
|
|
category: data.category |
|
46
|
|
|
} |
|
47
|
|
|
|
|
48
|
|
|
control.setting.set(settings) |
|
49
|
|
|
|
|
50
|
|
|
$variants.empty() |
|
51
|
|
|
$subsets.empty() |
|
52
|
|
|
|
|
53
|
|
|
addOptions($variants, control.params.fonts[id].variants) |
|
54
|
|
|
addOptions($subsets, control.params.fonts[id].subsets) |
|
55
|
|
|
}) |
|
56
|
|
|
|
|
57
|
|
|
this.container.on('change', '.flynt-typography-variants input', function (e) { |
|
|
|
|
|
|
58
|
|
|
const $el = $(this) |
|
59
|
|
|
const $parent = $el.closest('.flynt-typography-variants') |
|
60
|
|
|
const variants = [] |
|
61
|
|
|
|
|
62
|
|
|
$parent.find('input').each(function (index, element) { |
|
63
|
|
|
if (element.checked) { |
|
64
|
|
|
variants.push(element.value) |
|
65
|
|
|
} |
|
66
|
|
|
}) |
|
67
|
|
|
|
|
68
|
|
|
settings.variants = variants |
|
69
|
|
|
control.setting.set(settings) |
|
70
|
|
|
|
|
71
|
|
|
console.log('seetings variants', control) |
|
|
|
|
|
|
72
|
|
|
// control.setting.sync() |
|
73
|
|
|
// control.setting.set(settings) |
|
74
|
|
|
// control.parent.trigger("change", control) |
|
75
|
|
|
// $select.val('roboto').trigger('change') |
|
76
|
|
|
}) |
|
77
|
|
|
|
|
78
|
|
|
this.container.on('change', '.flynt-typography-subsets input', function (e) { |
|
|
|
|
|
|
79
|
|
|
const $el = $(this) |
|
80
|
|
|
const $parent = $el.closest('.flynt-typography-subsets') |
|
81
|
|
|
const subsets = [] |
|
82
|
|
|
|
|
83
|
|
|
$parent.find('input').each(function (index, element) { |
|
84
|
|
|
if (element.checked) { |
|
85
|
|
|
subsets.push(element.value) |
|
86
|
|
|
} |
|
87
|
|
|
}) |
|
88
|
|
|
|
|
89
|
|
|
settings.subsets = subsets |
|
90
|
|
|
console.log('seetings subsets', settings) |
|
|
|
|
|
|
91
|
|
|
control.setting.set(settings) |
|
92
|
|
|
}) |
|
93
|
|
|
|
|
94
|
|
|
this.container.on('click', '.flynt-typography-reset', function () { |
|
95
|
|
|
const $el = $(this) |
|
96
|
|
|
const id = $el.data('key') |
|
97
|
|
|
|
|
98
|
|
|
$select.val(id).trigger('change') |
|
99
|
|
|
|
|
100
|
|
|
$variants.empty() |
|
101
|
|
|
$subsets.empty() |
|
102
|
|
|
|
|
103
|
|
|
addOptions($variants, control.params.fonts[id].variants, control.params.default.variants) |
|
104
|
|
|
addOptions($subsets, control.params.fonts[id].subsets, control.params.default.subsets) |
|
105
|
|
|
|
|
106
|
|
|
control.setting.set(control.params.default) |
|
107
|
|
|
}) |
|
108
|
|
|
} |
|
109
|
|
|
}) |
|
110
|
|
|
|
flyntwp /
flynt
Loading history...