display-settings.html — WPFront Scroll Top trunk

wpfront-scroll-top / includes / settings / html / display-settings.html

wpfront-scroll-top / includes / settings / html Last commit date

display-settings.html

150 lines

1	<table class="form-table" role="presentation">
2	<tbody>
3	<tr>
4	<th scope="row">{{ labels.enabled }}</th>
5	<td>
6	<input type="checkbox" id="enabled" v-model="data.enabled" />
7	<help-icon :help-text="help.enabled"></help-icon>
8	</td>
9	</tr>
10	<tr>
11	<th scope="row">{{ labels.javascript_async }}</th>
12	<td>
13	<input type="checkbox" id="javascript_async" v-model="data.javascript_async" />
14	<help-icon :help-text="help.javascript_async"></help-icon>
15	</td>
16	</tr>
17	<tr>
18	<th scope="row">{{ labels.scroll_offset }}</th>
19	<td>
20	<input type="text" class="small-text pixels" id="scroll_offset" v-model="data.scroll_offset" />px
21	<help-icon :help-text="help.scroll_offset"></help-icon>
22	</td>
23	</tr>
24	<tr>
25	<th scope="row">{{ labels.button_size }}</th>
26	<td>
27	<input type="text" class="small-text pixels" id="button_width" v-model="data.button_width" />px
28	X
29	<input type="text" class="small-text pixels" id="button_height" v-model="data.button_height" />px
30	<help-icon :help-text="help.button_size"></help-icon>
31	</td>
32	</tr>
33	<tr>
34	<th scope="row">{{ labels.button_opacity }}</th>
35	<td>
36	<input type="text" class="small-text seconds" id="button_opacity" v-model="data.button_opacity" />%
37	<help-icon :help-text="help.button_opacity"></help-icon>
38	</td>
39	</tr>
40	<tr>
41	<th scope="row">{{ labels.button_fade_duration }}</th>
42	<td>
43	<input type="text" class="small-text seconds" id="button_fade_duration" v-model="data.button_fade_duration" />ms
44	<help-icon :help-text="help.button_fade_duration"></help-icon>
45	</td>
46	</tr>
47	<tr>
48	<th scope="row">{{ labels.scroll_duration }}</th>
49	<td>
50	<input type="text" class="small-text seconds" id="scroll_duration" v-model="data.scroll_duration" />ms
51	<help-icon :help-text="help.scroll_duration"></help-icon>
52	</td>
53	</tr>
54	<tr>
55	<th scope="row">{{ labels.auto_hide }}</th>
56	<td>
57	<input type="checkbox" id="auto_hide" v-model="data.auto_hide" />
58	<help-icon :help-text="help.auto_hide"></help-icon>
59	</td>
60	</tr>
61	<tr>
62	<th scope="row">{{ labels.auto_hide_after }}</th>
63	<td>
64	<input type="text" class="small-text seconds" id="auto_hide_after" v-model="data.auto_hide_after" />sec
65	<help-icon :help-text="help.auto_hide_after"></help-icon>
66	</td>
67	</tr>
68	<tr>
69	<th scope="row">{{labels.hide_small_window}}</th>
70	<td>
71	<input type="checkbox" id="hide_small_window" v-model="data.hide_small_window" />
72	<help-icon :help-text="help.hide_small_window"></help-icon>
73	</td>
74	</tr>
75	<tr>
76	<th scope="row">{{labels.small_window_width}}</th>
77	<td>
78	<input type="text" class="small-text pixels" id="small_window_width" v-model="data.small_window_width" />px
79	<help-icon :help-text="help.small_window_width"></help-icon>
80	</td>
81	</tr>
82	<tr>
83	<th scope="row">{{labels.hide_wpadmin}}</th>
84	<td>
85	<input type="checkbox" id="hide_wpadmin" v-model="data.hide_wpadmin" />
86	<help-icon :help-text="help.hide_wpadmin"></help-icon>
87	</td>
88	</tr>
89	<tr>
90	<th scope="row">{{labels.hide_iframe}}</th>
91	<td>
92	<input type="checkbox" id="hide_iframe" v-model="data.hide_iframe" />
93	<help-icon :help-text="help.hide_iframe"></help-icon>
94	</td>
95	</tr>
96	<tr>
97	<th scope="row">{{labels.button_style}}</th>
98	<td>
99	<div v-for="(display, value) in button_style_options">
100	<label>
101	<input type="radio" :value="value" :id="'button_style_' + value" v-model="data.button_style" />{{ display }}
102	<help-icon :help-text="help['button_style_options_' + value]"></help-icon>
103	</label>
104	</div>
105	</td>
106	</tr>
107	<tr>
108	<th scope="row">{{ labels.button_action }}</th>
109	<td>
110	<div v-for="(display, value) in button_action_options">
111	<label>
112	<input type="radio" name="button_action_options" :value="value" :id="'button_action_' + value" v-model="data.button_action" />
113	{{ display }}
114	<help-icon :help-text="help['button_action_options' + '_' + value]"></help-icon>
115	</label>
116	</div>
117	</td>
118	</tr>
119	<tr v-if="data.button_action === 'element'">
120	<th scope="row">{{ labels.button_action_element_selector }}</th>
121	<td>
122	<input type="text" class="regular-text" id="button_action_element_selector" v-model="data.button_action_element_selector" />
123	<help-icon :help-text="help.button_action_element_selector"></help-icon>
124	<br />
125	<a target="_blank" rel="noopener" href="https://wpfront.com/wordpress-plugins/scroll-top-plugin/scroll-top-plugin-faq/">{{ labels.button_action_element_how_to_link }}</a>
126	</td>
127	</tr>
128	<tr v-if="data.button_action === 'element'">
129	<th scope="row">{{ labels.button_action_container_selector }}</th>
130	<td>
131	<input type="text" class="regular-text" id="button_action_container_selector" v-model="data.button_action_container_selector" />
132	<help-icon :help-text="help.button_action_container_selector"></help-icon>
133	</td>
134	</tr>
135	<tr v-if="data.button_action === 'element'">
136	<th scope="row">{{ labels.button_action_element_offset }}</th>
137	<td>
138	<input type="text" class="small-text pixels" id="button_action_element_offset" v-model="data.button_action_element_offset" />px
139	<help-icon :help-text="help.button_action_element_offset"></help-icon>
140	</td>
141	</tr>
142	<tr v-if="data.button_action === 'url'">
143	<th scope="row">{{ labels.button_action_page_url }}</th>
144	<td>
145	<input type="text" class="regular-text" id="button_action_page_url" v-model="data.button_action_page_url" />
146	<help-icon :help-text="help.button_action_page_url"></help-icon>
147	</td>
148	</tr>
149	</tbody>
150	</table>