1 | |
---|
2 | // Register the plugin within the editor. |
---|
3 | CKEDITOR.plugins.add('vp_accordion', { |
---|
4 | // This plugin requires the Widgets System defined in the 'widget' plugin. |
---|
5 | requires: 'widget', |
---|
6 | |
---|
7 | // The plugin initialization logic goes inside this method. |
---|
8 | init: function( editor ) { |
---|
9 | // Generate editables for 50 accordion items. |
---|
10 | var editables = {}; |
---|
11 | for (var i=1; i < 50; i++) { |
---|
12 | editables['header' + i] = { |
---|
13 | selector: '.ui-accordion-header-' + i |
---|
14 | }; |
---|
15 | editables['content' + i] = { |
---|
16 | selector: '.ui-accordion-content-' + i |
---|
17 | } |
---|
18 | } |
---|
19 | |
---|
20 | // Register the widget. |
---|
21 | editor.widgets.add('vp_accordion', { |
---|
22 | // Allow all HTML elements, classes, and styles that this widget requires. |
---|
23 | // Read more about the Advanced Content Filter here: |
---|
24 | // * http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter |
---|
25 | // * http://docs.ckeditor.com/#!/guide/plugin_sdk_integration_with_acf |
---|
26 | allowedContent: |
---|
27 | 'div(!ui-accordion,!template-custom-accordion);' + |
---|
28 | 'h3(!ui-accordion-header,!foobar123,!foobar);' + |
---|
29 | 'div(!ui-accordion-content);', |
---|
30 | |
---|
31 | // Minimum HTML which is required by this widget to work. |
---|
32 | requiredContent: 'div(static-simple-2columns)', |
---|
33 | |
---|
34 | // Define two nested editable areas. |
---|
35 | editables: editables, |
---|
36 | |
---|
37 | // Define the template of a new widget. |
---|
38 | // @todo: template-custom-accordion__toolbar could probably defined in upcast and removed in downcast. |
---|
39 | template: |
---|
40 | '<div class="ui-accordion template-custom-accordion">' + |
---|
41 | ' <div class="template-custom-accordion__toolbar">' + |
---|
42 | ' <a class="template-custom-accordion__toolbar-btn-add" href="#">Add</a>' + |
---|
43 | ' <a class="template-custom-accordion__toolbar-btn-remove" href="#">Remove</a>' + |
---|
44 | ' </div>' + |
---|
45 | ' <h3 class="ui-accordion-header ui-accordion-header-1">Accordion title</h3>' + |
---|
46 | ' <div class="ui-accordion-content ui-accordion-content-1">' + |
---|
47 | ' <p>Accordion content</p>' + |
---|
48 | ' </div>' + |
---|
49 | ' <h3 class="ui-accordion-header ui-accordion-header-2">Accordion title</h3>' + |
---|
50 | ' <div class="ui-accordion-content ui-accordion-content-2">' + |
---|
51 | ' <p>Accordion content</p>' + |
---|
52 | ' </div>' + |
---|
53 | '</div>', |
---|
54 | |
---|
55 | // Check the elements that need to be converted to widgets. |
---|
56 | // |
---|
57 | // Note: The "element" argument is an instance of http://docs.ckeditor.com/#!/api/CKEDITOR.htmlParser.element |
---|
58 | // so it is not a real DOM element yet. This is caused by the fact that upcasting is performed |
---|
59 | // during data processing which is done on DOM represented by JavaScript objects. |
---|
60 | upcast: function( element ) { |
---|
61 | // Return "true" (that element needs to converted to a Simple Box widget) |
---|
62 | // for all <div> elements with a "simplebox" class. |
---|
63 | return element.name == 'div' && element.hasClass('template-custom-accordion'); |
---|
64 | }, |
---|
65 | |
---|
66 | init: function() { |
---|
67 | var $widget = jQuery(this.element.$); |
---|
68 | var currentAccordionItemCount = 0; |
---|
69 | |
---|
70 | // Find the current index. |
---|
71 | $widget.find('.template-custom-accordion__toolbar-btn-add').click(function() { |
---|
72 | $widget.find('.ui-accordion-header').each(function() { |
---|
73 | var matches = this.className.match(/ui-accordion-header-([0-9])/); |
---|
74 | currentAccordionItemCount = matches[1]; |
---|
75 | }); |
---|
76 | |
---|
77 | // Increase the index. |
---|
78 | currentAccordionItemCount++; |
---|
79 | |
---|
80 | var templateHeader = '<h3 class="ui-accordion-header ui-accordion-header-' + currentAccordionItemCount + '">Accordion title</h3>', |
---|
81 | templateContent = '<div class="ui-accordion-content ui-accordion-content-' + currentAccordionItemCount + '">' + |
---|
82 | '<p>Accordion content</p>' + |
---|
83 | '</div>'; |
---|
84 | |
---|
85 | // Create dom elements. |
---|
86 | var elementHeader = CKEDITOR.dom.element.createFromHtml(templateHeader); |
---|
87 | var elementContent = CKEDITOR.dom.element.createFromHtml(templateContent); |
---|
88 | |
---|
89 | // Append new HTML. |
---|
90 | $widget.append(jQuery(elementHeader.$)); |
---|
91 | $widget.append(jQuery(elementContent.$)); |
---|
92 | }); |
---|
93 | } |
---|
94 | }); |
---|
95 | |
---|
96 | // Add the button for the widget to properly trigger all rules for ACF and |
---|
97 | // later hide the button with css. |
---|
98 | editor.ui.addButton && editor.ui.addButton('vp_accordion_button', { |
---|
99 | label: 'Dummy label', |
---|
100 | command: 'vp_accordion' |
---|
101 | }); |
---|
102 | } |
---|
103 | }); |
---|