Verzeichnisstruktur phpBB-3.2.0
- Veröffentlicht
- 06.01.2017
So funktioniert es
|
|
Auf das letzte Element klicken. Dies geht jeweils ein Schritt zurück |
Auf das Icon klicken, dies öffnet das Verzeichnis. Nochmal klicken schließt das Verzeichnis. |
|
|
(Beispiel Datei-Icons)
|
Auf das Icon klicken um den Quellcode anzuzeigen |
tooltip.js
001 /*
002 javascript for Bubble Tooltips by Alessandro Fulciniti
003 - http://pro.html.it - http://web-graphics.com
004 obtained from: http://web-graphics.com/mtarchive/001717.php
005
006 phpBB Development Team:
007 - modified to adhere to our coding guidelines
008 - integration into our design
009 - added ability to perform tooltips on select elements
010 - further adjustements
011 */
012
013 (function($) { // Avoid conflicts with other libraries
014
015 'use strict';
016
017 var tooltips = [];
018
019 /**
020 * Enable tooltip replacements for selects
021 * @param {string} id ID tag of select
022 * @param {string} headline Text that should appear on top of tooltip
023 * @param {string} [subId] Sub ID that should only be using tooltips (optional)
024 */
025 phpbb.enableTooltipsSelect = function (id, headline, subId) {
026 var $links, hold;
027
028 hold = $('<span />', {
029 id: '_tooltip_container',
030 css: {
031 position: 'absolute'
032 }
033 });
034
035 $('body').append(hold);
036
037 if (!id) {
038 $links = $('.roles-options li');
039 } else {
040 $links = $('.roles-options li', '#' + id);
041 }
042
043 $links.each(function () {
044 var $this = $(this);
045
046 if (subId) {
047 if ($this.parent().attr('id').substr(0, subId.length) === subId) {
048 phpbb.prepareTooltips($this, headline);
049 }
050 } else {
051 phpbb.prepareTooltips($this, headline);
052 }
053 });
054 };
055
056 /**
057 * Prepare elements to replace
058 *
059 * @param {jQuery} $element Element to prepare for tooltips
060 * @param {string} headText Text heading to display
061 */
062 phpbb.prepareTooltips = function ($element, headText) {
063 var $tooltip, text, $desc, $title;
064
065 text = $element.attr('data-title');
066
067 if (text === null || text.length === 0) {
068 return;
069 }
070
071 $title = $('<span />', {
072 class: 'top',
073 css: {
074 display: 'block'
075 }
076 })
077 .append(document.createTextNode(headText));
078
079 $desc = $('<span />', {
080 class: 'bottom',
081 html: text,
082 css: {
083 display: 'block'
084 }
085 });
086
087 $tooltip = $('<span />', {
088 class: 'tooltip',
089 css: {
090 display: 'block'
091 }
092 })
093 .append($title)
094 .append($desc);
095
096 tooltips[$element.attr('data-id')] = $tooltip;
097 $element.on('mouseover', phpbb.showTooltip);
098 $element.on('mouseout', phpbb.hideTooltip);
099 };
100
101 /**
102 * Show tooltip
103 *
104 * @param {object} $element Element passed by .on()
105 */
106 phpbb.showTooltip = function ($element) {
107 var $this = $($element.target);
108 $('#_tooltip_container').append(tooltips[$this.attr('data-id')]);
109 phpbb.positionTooltip($this);
110 };
111
112 /**
113 * Hide tooltip
114 */
115 phpbb.hideTooltip = function () {
116 var d = document.getElementById('_tooltip_container');
117 if (d.childNodes.length > 0) {
118 d.removeChild(d.firstChild);
119 }
120 };
121
122 /**
123 * Correct positioning of tooltip container
124 *
125 * @param {jQuery} $element Tooltip element that should be positioned
126 */
127 phpbb.positionTooltip = function ($element) {
128 var offset;
129
130 $element = $element.parent();
131 offset = $element.offset();
132
133 $('#_tooltip_container').css({
134 top: offset.top + 30,
135 left: offset.left - 205
136 });
137 };
138
139 /**
140 * Prepare roles drop down select
141 */
142 phpbb.prepareRolesDropdown = function () {
143 var $options = $('.roles-options li');
144
145 // Display span and hide select
146 $('.roles-options > span').css('display', 'block');
147 $('.roles-options > select').hide();
148 $('.roles-options > input[type=hidden]').each(function () {
149 var $this = $(this);
150
151 if ($this.attr('data-name') && !$this.attr('name')) {
152 $this.attr('name', $this.attr('data-name'));
153 }
154 });
155
156 // Prepare highlighting of select options and settings update
157 $options.each(function () {
158 var $this = $(this);
159 var $rolesOptions = $this.closest('.roles-options');
160 var $span = $rolesOptions.children('span');
161
162 // Correctly show selected option
163 if (typeof $this.attr('data-selected') !== 'undefined') {
164 $rolesOptions
165 .children('span')
166 .text($this.text())
167 .attr('data-default', $this.text())
168 .attr('data-default-val', $this.attr('data-id'));
169
170 // Save default text of drop down if there is no default set yet
171 if (typeof $span.attr('data-default') === 'undefined') {
172 $span.attr('data-default', $span.text());
173 }
174
175 // Prepare resetting drop down on form reset
176 $this.closest('form').on('reset', function () {
177 $span.text($span.attr('data-default'));
178 $rolesOptions.children('input[type=hidden]')
179 .val($span.attr('data-default-val'));
180 });
181 }
182
183 $this.on('mouseover', function () {
184 var $this = $(this);
185 $options.removeClass('roles-highlight');
186 $this.addClass('roles-highlight');
187 }).on('click', function () {
188 var $this = $(this);
189 var $rolesOptions = $this.closest('.roles-options');
190
191 // Update settings
192 set_role_settings($this.attr('data-id'), $this.attr('data-target-id'));
193 init_colours($this.attr('data-target-id').replace('advanced', ''));
194
195 // Set selected setting
196 $rolesOptions.children('span')
197 .text($this.text());
198 $rolesOptions.children('input[type=hidden]')
199 .val($this.attr('data-id'));
200
201 // Trigger hiding of selection options
202 $('body').trigger('click');
203 });
204 });
205 };
206
207 // Run onload functions for RolesDropdown and tooltips
208 $(function() {
209 // Enable tooltips
210 phpbb.enableTooltipsSelect('set-permissions', $('#set-permissions').attr('data-role-description'), 'role');
211
212 // Prepare dropdown
213 phpbb.prepareRolesDropdown();
214
215 // Reset role drop-down on modifying permissions in advanced tab
216 $('div.permissions-switch > a').on('click', function () {
217 $.each($('input[type=radio][name^="setting["]'), function () {
218 var $this = $(this);
219 $this.on('click', function () {
220 var $rolesOptions = $this.closest('fieldset.permissions').find('.roles-options'),
221 rolesSelect = $rolesOptions.find('select > option')[0];
222
223 // Set selected setting
224 $rolesOptions.children('span')
225 .text(rolesSelect.text);
226 $rolesOptions.children('input[type=hidden]')
227 .val(rolesSelect.value);
228 });
229 });
230 });
231 });
232
233 })(jQuery); // Avoid conflicts with other libraries
234