37e22596ae3d64c4b5e3e15e0443b0e8b2544aaa
[WebKit-https.git] / Source / WebInspectorUI / UserInterface / Views / VisualStyleFontFamilyTreeElement.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.VisualStyleFontFamilyTreeElement = class VisualStyleFontFamilyTreeElement extends WebInspector.GeneralTreeElement
27 {
28     constructor(text)
29     {
30         super([WebInspector.VisualStyleCommaSeparatedKeywordEditor.ListItemClassName, "visual-style-font-family-list-item"], text);
31
32         this._keywordEditor = document.createElement("input");
33         this._keywordEditor.classList.add("visual-style-comma-separated-keyword-item-editor");
34         this._keywordEditor.placeholder = WebInspector.UIString("(modify the boxes below to add a value)");
35         this._keywordEditor.spellcheck = false;
36         this._keywordEditor.addEventListener("keydown", this._keywordEditorKeyDown.bind(this));
37         this._keywordEditor.addEventListener("keyup", this._keywordEditorKeyUp.bind(this));
38         this._keywordEditor.addEventListener("blur", this._keywordEditorBlurred.bind(this));
39     }
40
41     // Public
42
43     editorBounds(padding)
44     {
45         if (this.keywordEditorHidden)
46             return;
47
48         let bounds = WebInspector.Rect.rectFromClientRect(this._keywordEditor.getBoundingClientRect());
49         return bounds.pad(padding || 0);
50     }
51
52     updateMainTitle(text)
53     {
54         this.mainTitle = this._keywordEditor.value = text;
55         this._listItemNode.style.fontFamily = text + ", " + WebInspector.VisualStyleFontFamilyTreeElement.FontFamilyFallback;
56
57         let hasText = text && text.length;
58         this._listItemNode.classList.toggle("no-value", !hasText);
59         if (!hasText)
60             this.subtitle = this._keywordEditor.placeholder;
61
62         this.dispatchEventToListeners(WebInspector.VisualStyleFontFamilyTreeElement.Event.KeywordChanged);
63     }
64
65     showKeywordEditor()
66     {
67         if (!this.keywordEditorHidden)
68             return;
69
70         this.subtitle = "";
71         this._listItemNode.classList.remove("editor-hidden");
72         this._listItemNode.scrollIntoViewIfNeeded();
73
74         this._keywordEditor.value = this._mainTitle;
75         this._keywordEditor.select();
76     }
77
78     hideKeywordEditor()
79     {
80         if (this.keywordEditorHidden)
81             return;
82
83         this.updateMainTitle(this._keywordEditor.value);
84         this._listItemNode.classList.add("editor-hidden");
85     }
86
87     get keywordEditorHidden()
88     {
89         return this._listItemNode.classList.contains("editor-hidden");
90     }
91
92     // Protected
93
94     onattach()
95     {
96         super.onattach();
97
98         this._listItemNode.style.fontFamily = this._mainTitle;
99         this._listItemNode.classList.add("editor-hidden");
100         this._listItemNode.appendChild(this._keywordEditor);
101         this._listItemNode.addEventListener("click", this.showKeywordEditor.bind(this));
102     }
103
104     ondeselect()
105     {
106         this.hideKeywordEditor();
107     }
108
109     // Private
110
111     _keywordEditorKeyDown(event)
112     {
113         if (this.keywordEditorHidden)
114             return;
115
116         let keyCode = event.keyCode;
117         let enterKeyCode = WebInspector.KeyboardShortcut.Key.Enter.keyCode;
118         if (keyCode === enterKeyCode) {
119             this._listItemNode.classList.add("editor-hidden");
120             this.dispatchEventToListeners(WebInspector.VisualStyleFontFamilyTreeElement.Event.EditorKeyDown, {key: "Enter"});
121             return;
122         }
123
124         let escapeKeyCode = WebInspector.KeyboardShortcut.Key.Escape.keyCode;
125         if (keyCode === escapeKeyCode) {
126             this.dispatchEventToListeners(WebInspector.VisualStyleFontFamilyTreeElement.Event.EditorKeyDown, {key: "Escape"});
127             return;
128         }
129
130         let tabKeyCode = WebInspector.KeyboardShortcut.Key.Tab.keyCode;
131         if (keyCode === tabKeyCode) {
132             event.preventDefault();
133             this._dontFireKeyUp = true;
134             this.dispatchEventToListeners(WebInspector.VisualStyleFontFamilyTreeElement.Event.EditorKeyDown, {key: "Tab"});
135             return;
136         }
137
138         let key = event.keyIdentifier;
139         if (key === "Up" || key === "Down") {
140             event.preventDefault();
141             this._dontFireKeyUp = true;
142             this.dispatchEventToListeners(WebInspector.VisualStyleFontFamilyTreeElement.Event.EditorKeyDown, {key});
143             return;
144         }
145
146         this.dispatchEventToListeners(WebInspector.VisualStyleFontFamilyTreeElement.Event.EditorKeyDown);
147     }
148
149     _keywordEditorKeyUp()
150     {
151         if (this.keywordEditorHidden || this._dontFireKeyUp)
152             return;
153
154         this.updateMainTitle(this._keywordEditor.value);
155     }
156
157     _keywordEditorBlurred()
158     {
159         this.hideKeywordEditor();
160         this.dispatchEventToListeners(WebInspector.VisualStyleFontFamilyTreeElement.Event.EditorBlurred);
161     }
162 };
163
164 WebInspector.VisualStyleFontFamilyTreeElement.FontFamilyFallback = "-apple-system, sans-serif";
165
166 WebInspector.VisualStyleFontFamilyTreeElement.Event = {
167     KeywordChanged: "visual-style-font-family-tree-element-keyword-changed",
168     EditorKeyDown: "visual-style-font-family-tree-element-editor-key-down",
169     EditorBlurred: "visual-style-font-family-tree-element-editor-blurred"
170 };