17ff933486ba48167437ca1dadadb1ec94b9afa0
[WebKit-https.git] / Source / WebInspectorUI / UserInterface / Views / VisualStyleCommaSeparatedKeywordEditor.js
1 /*
2  * Copyright (C) 2015 Apple Inc. All rights reserved.
3  *
4  * Redistribution and use in source and binary forms, with or without
5  * modification, are permitted provided that the following conditions
6  * are met:
7  * 1. Redistributions of source code must retain the above copyright
8  *    notice, this list of conditions and the following disclaimer.
9  * 2. Redistributions in binary form must reproduce the above copyright
10  *    notice, this list of conditions and the following disclaimer in the
11  *    documentation and/or other materials provided with the distribution.
12  *
13  * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
14  * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
15  * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
16  * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
17  * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
18  * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
19  * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
20  * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
21  * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
22  * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
23  * THE POSSIBILITY OF SUCH DAMAGE.
24  */
25
26 WebInspector.VisualStyleCommaSeparatedKeywordEditor = class VisualStyleCommaSeparatedKeywordEditor extends WebInspector.VisualStylePropertyEditor
27 {
28     constructor(propertyNames, text, insertNewItemsBeforeSelected, layoutReversed)
29     {
30         super(propertyNames, text, null, null, "comma-separated-keyword-editor", layoutReversed);
31
32         this._insertNewItemsBeforeSelected = insertNewItemsBeforeSelected || false;
33
34         let listElement = document.createElement("ol");
35         listElement.classList.add("visual-style-comma-separated-keyword-list");
36         this.contentElement.appendChild(listElement);
37
38         this._commaSeparatedKeywords = new WebInspector.TreeOutline(listElement);
39         this._commaSeparatedKeywords.onselect = this._treeElementSelected.bind(this);
40
41         let controlContainer = document.createElement("div");
42         controlContainer.classList.add("visual-style-comma-separated-keyword-controls");
43         this.contentElement.appendChild(controlContainer);
44
45         wrappedSVGDocument("Images/Plus.svg", "visual-style-add-comma-separated-keyword", WebInspector.UIString("Click to add a new item."), function(wrapper) {
46             wrapper.addEventListener("click", this._addEmptyCommaSeparatedKeyword.bind(this));
47             controlContainer.appendChild(wrapper);
48         }.bind(this));
49
50         wrappedSVGDocument("Images/Minus.svg", "visual-style-remove-comma-separated-keyword", WebInspector.UIString("Click to remove the selected item."), function(wrapper) {
51             wrapper.addEventListener("click", this._removeSelectedCommaSeparatedKeyword.bind(this));
52             controlContainer.appendChild(wrapper);
53         }.bind(this));
54     }
55
56     // Public
57
58     set selectedTreeElementValue(text)
59     {
60         let selectedTreeElement = this._commaSeparatedKeywords.selectedTreeElement;
61         if (!selectedTreeElement)
62             return;
63
64         selectedTreeElement.element.classList.toggle("no-value", !text || !text.length);
65         selectedTreeElement.mainTitle = text;
66         this._valueDidChange();
67     }
68
69     get value()
70     {
71         if (!this._commaSeparatedKeywords.hasChildren)
72             return;
73
74         let value = "";
75         for (let treeItem of this._commaSeparatedKeywords.children) {
76             if (this._treeElementIsEmpty(treeItem))
77                 continue;
78
79             if (value.length)
80                 value += ", ";
81
82             let text = treeItem.mainTitle;
83             if (typeof this._modifyCommaSeparatedKeyword === "function")
84                 text = this._modifyCommaSeparatedKeyword(text);
85
86             value += text;
87         }
88
89         return value;
90     }
91
92     set value(commaSeparatedValue)
93     {
94         if (commaSeparatedValue && commaSeparatedValue === this.value)
95             return;
96
97         this._commaSeparatedKeywords.removeChildren();
98         if (!commaSeparatedValue || !commaSeparatedValue.length) {
99             this.dispatchEventToListeners(WebInspector.VisualStyleCommaSeparatedKeywordEditor.Event.NoRemainingTreeItems);
100             return;
101         }
102
103         let values = commaSeparatedValue.split(/\s*,\s*(?![^\(]*\))/);
104         for (let value of values)
105             this._addCommaSeparatedKeyword(value);
106
107         this._commaSeparatedKeywords.children[0].select(true);
108     }
109
110     get synthesizedValue()
111     {
112         return this.value || null;
113     }
114
115     // Private
116
117     _treeElementSelected(item, selectedByUser)
118     {
119         this._removeEmptyCommaSeparatedKeywords();
120         this.dispatchEventToListeners(WebInspector.VisualStyleCommaSeparatedKeywordEditor.Event.TreeItemSelected, {text: item.mainTitle});
121     }
122
123     _treeElementIsEmpty(item)
124     {
125         return !item._mainTitle || !item._mainTitle.length;
126     }
127
128     _addEmptyCommaSeparatedKeyword()
129     {
130         let newTreeElement = this._addCommaSeparatedKeyword(null, this._commaSeparatedKeywords.selectedTreeElementIndex);
131         newTreeElement.subtitle = WebInspector.UIString("(modify the boxes below to add a value)");
132         newTreeElement.element.classList.add("no-value");
133         newTreeElement.select(true, true);
134         return newTreeElement;
135     }
136
137     _removeSelectedCommaSeparatedKeyword()
138     {
139         let selectedTreeElement = this._commaSeparatedKeywords.selectedTreeElement;
140         this._removeCommaSeparatedKeyword(selectedTreeElement);
141     }
142
143     _removeEmptyCommaSeparatedKeywords()
144     {
145         for (let treeElement of this._commaSeparatedKeywords.children) {
146             if (!this._treeElementIsEmpty(treeElement) || treeElement.selected)
147                 continue;
148
149             treeElement.deselect();
150             this._removeCommaSeparatedKeyword(treeElement);
151         }
152     }
153
154     _addCommaSeparatedKeyword(value, index)
155     {
156         let valueElement = this._createNewTreeElement(value);
157         let indexIsSet = !isNaN(index);
158         this._commaSeparatedKeywords.insertChild(valueElement, indexIsSet ? index + !this._insertNewItemsBeforeSelected : 0);
159         return valueElement;
160     }
161
162     _removeCommaSeparatedKeyword(treeElement)
163     {
164         if (!treeElement)
165             return;
166
167         this._commaSeparatedKeywords.removeChild(treeElement);
168         if (!this._commaSeparatedKeywords.children.length)
169             this.dispatchEventToListeners(WebInspector.VisualStyleCommaSeparatedKeywordEditor.Event.NoRemainingTreeItems);
170
171         this._valueDidChange();
172     }
173
174     _createNewTreeElement(value)
175     {
176         return new WebInspector.GeneralTreeElement(WebInspector.VisualStyleCommaSeparatedKeywordEditor.ListItemClassName, value);
177     }
178 };
179
180 WebInspector.VisualStyleCommaSeparatedKeywordEditor.ListItemClassName = "visual-style-comma-separated-keyword-item";
181
182 WebInspector.VisualStyleCommaSeparatedKeywordEditor.Event = {
183     TreeItemSelected: "visual-style-comma-separated-keyword-editor-tree-item-selected",
184     NoRemainingTreeItems: "visual-style-comma-separated-keyword-editor-no-remaining-tree-items"
185 }