Elgg  Version 1.11
ui.js
Go to the documentation of this file.
1 elgg.provide('elgg.ui');
2 
3 elgg.ui.init = function () {
4  // @todo we need better documentation for this hack
5  // iOS Hover Event Class Fix
6  $('.elgg-page').attr("onclick", "return true");
7 
8  // add user hover menus
9  elgg.ui.initHoverMenu();
10 
11  //if the user clicks a system message, make it disappear
12  $('.elgg-system-messages li').live('click', function() {
13  $(this).stop().fadeOut('fast');
14  });
15 
16  $('.elgg-system-messages li').animate({opacity: 0.9}, 6000);
17  $('.elgg-system-messages li.elgg-state-success').fadeOut('slow');
18 
19  $('[rel=toggle]').live('click', elgg.ui.toggles);
20 
21  $('[rel=popup]').live('click', elgg.ui.popupOpen);
22 
23  $('.elgg-menu-page .elgg-menu-parent').live('click', elgg.ui.toggleMenu);
24 
25  $('*[data-confirm], .elgg-requires-confirmation').live('click', elgg.ui.requiresConfirmation);
26  if ($('.elgg-requires-confirmation').length > 0) {
27  elgg.deprecated_notice('Use of .elgg-requires-confirmation is deprecated by data-confirm', '1.10');
28  }
29 
30  $('.elgg-autofocus').focus();
31  if ($('.elgg-autofocus').length > 0) {
32  elgg.deprecated_notice('Use of .elgg-autofocus is deprecated by html5 autofocus', 1.9);
33  }
34 
35  elgg.ui.initAccessInputs();
36 
37  // Allow element to be highlighted using CSS if its id is found from the URL
38  var elementId = elgg.getSelectorFromUrlFragment(document.URL);
39  $(elementId).addClass('elgg-state-highlight');
40 };
41 
55 elgg.ui.toggles = function(event) {
56  event.preventDefault();
57  var $this = $(this),
58  target = $this.data().toggleSelector;
59 
60  if (!target) {
61  // @todo we can switch to elgg.getSelectorFromUrlFragment() in 1.x if
62  // we also extend it to support href=".some-class"
63  target = $this.attr('href');
64  }
65 
66  $this.toggleClass('elgg-state-active');
67 
68  $(target).each(function(index, elem) {
69  var $elem = $(elem);
70  if ($elem.data().toggleSlide != false) {
71  $elem.slideToggle('medium');
72  } else {
73  $elem.toggle();
74  }
75  });
76 };
77 
96 elgg.ui.popupOpen = function(event) {
97  event.preventDefault();
98  event.stopPropagation();
99 
100  var target = elgg.getSelectorFromUrlFragment($(this).toggleClass('elgg-state-active').attr('href'));
101  var $target = $(target);
102 
103  // emit a hook to allow plugins to position and control popups
104  var params = {
105  targetSelector: target,
106  target: $target,
107  source: $(this)
108  };
109 
110  var options = {
111  my: 'center top',
112  at: 'center bottom',
113  of: $(this),
114  collision: 'fit fit'
115  };
116 
117  options = elgg.trigger_hook('getOptions', 'ui.popup', params, options);
118 
119  // allow plugins to cancel event
120  if (!options) {
121  return;
122  }
123 
124  // hide if already open
125  if ($target.is(':visible')) {
126  $target.fadeOut();
127  $('body').die('click', elgg.ui.popupClose);
128  return;
129  }
130 
131  $target.appendTo('body')
132  .fadeIn()
133  .position(options);
134 
135  $('body')
136  .die('click', elgg.ui.popupClose)
137  .live('click', elgg.ui.popupClose);
138 };
139 
143 elgg.ui.popupClose = function(event) {
144  $eventTarget = $(event.target);
145  var inTarget = false;
146  var $popups = $('[rel=popup]');
147 
148  // if the click event target isn't in a popup target, fade all of them out.
149  $popups.each(function(i, e) {
150  var target = elgg.getSelectorFromUrlFragment($(e).attr('href')) + ':visible';
151  var $target = $(target);
152 
153  if (!$target.is(':visible')) {
154  return;
155  }
156 
157  // didn't click inside the target
158  if ($eventTarget.closest(target).length > 0) {
159  inTarget = true;
160  return false;
161  }
162  });
163 
164  if (!inTarget) {
165  $popups.each(function(i, e) {
166  var $e = $(e);
167  var $target = $(elgg.getSelectorFromUrlFragment($e.attr('href')) + ':visible');
168  if ($target.length > 0) {
169  $target.fadeOut();
170  $e.removeClass('elgg-state-active');
171  }
172  });
173 
174  $('body').die('click', elgg.ui.popClose);
175  }
176 };
177 
184 elgg.ui.toggleMenu = function(event) {
185  $(this).siblings().slideToggle('medium');
186  $(this).toggleClass('elgg-menu-closed elgg-menu-opened');
187  event.preventDefault();
188 };
189 
196 elgg.ui.initHoverMenu = function(parent) {
197 
203  function loadMenu(mac) {
204  var $all_placeholders = $(".elgg-menu-hover[rel='" + mac + "']");
205 
206  // find the <ul> that contains data for this menu
207  var $ul = $all_placeholders.filter('[data-elgg-menu-data]');
208 
209  if (!$ul.length) {
210  return;
211  }
212 
213  elgg.get('ajax/view/navigation/menu/user_hover/contents', {
214  data: $ul.data('elggMenuData'),
215  success: function(data) {
216  if (data) {
217  // replace all existing placeholders with new menu
218  $all_placeholders.removeClass('elgg-ajax-loader')
219  .html($(data).children());
220  }
221  }
222  });
223  }
224 
225  if (!parent) {
226  parent = document;
227  }
228 
229  // avatar image menu link
230  $(parent).find(".elgg-avatar").live('mouseover', function() {
231  $(this).children(".elgg-icon-hover-menu").show();
232  })
233  .live('mouseout', function() {
234  $(this).children(".elgg-icon-hover-menu").hide();
235  });
236 
237 
238  // avatar contextual menu
239  $(".elgg-avatar > .elgg-icon-hover-menu").live('click', function(e) {
240  var $placeholder = $(this).parent().find(".elgg-menu-hover.elgg-ajax-loader");
241 
242  if ($placeholder.length) {
243  loadMenu($placeholder.attr("rel"));
244  }
245 
246  // check if we've attached the menu to this element already
247  var $hovermenu = $(this).data('hovermenu') || null;
248 
249  if (!$hovermenu) {
250  $hovermenu = $(this).parent().find(".elgg-menu-hover");
251  $(this).data('hovermenu', $hovermenu);
252  }
253 
254  // close hovermenu if arrow is clicked & menu already open
255  if ($hovermenu.css('display') == "block") {
256  $hovermenu.fadeOut();
257  } else {
258  $avatar = $(this).closest(".elgg-avatar");
259 
260  // @todo Use jQuery-ui position library instead -- much simpler
261  var offset = $avatar.offset();
262  var top = $avatar.height() + offset.top + 'px';
263  var left = $avatar.width() - 15 + offset.left + 'px';
264 
265  $hovermenu.appendTo('body')
266  .css('position', 'absolute')
267  .css("top", top)
268  .css("left", left)
269  .fadeIn('normal');
270  }
271 
272  // hide any other open hover menus
273  $(".elgg-menu-hover:visible").not($hovermenu).fadeOut();
274  });
275 
276  // hide avatar menu when user clicks elsewhere
277  $(document).click(function(event) {
278  if ($(event.target).parents(".elgg-avatar").length === 0) {
279  $(".elgg-menu-hover").fadeOut();
280  }
281  });
282 };
283 
290 elgg.ui.requiresConfirmation = function(e) {
291  var confirmText = $(this).data('confirm') || elgg.echo('question:areyousure');
292  if (!confirm(confirmText)) {
293  e.preventDefault();
294  }
295 };
296 
307 elgg.ui.loginHandler = function(hook, type, params, options) {
308  if (params.target.attr('id') == 'login-dropdown-box') {
309  options.my = 'right top';
310  options.at = 'right bottom';
311  return options;
312  }
313  return null;
314 };
315 
328 elgg.ui.initDatePicker = function() {
329  function loadDatePicker() {
330  $('.elgg-input-date').datepicker({
331  // ISO-8601
332  dateFormat: 'yy-mm-dd',
333  onSelect: function(dateText) {
334  if ($(this).is('.elgg-input-timestamp')) {
335  // convert to unix timestamp
336  var dateParts = dateText.split("-");
337  var timestamp = Date.UTC(dateParts[0], dateParts[1] - 1, dateParts[2]);
338  timestamp = timestamp / 1000;
339 
340  var id = $(this).attr('id');
341  $('input[name="' + id + '"]').val(timestamp);
342  }
343  },
344  nextText: '&#xBB;',
345  prevText: '&#xAB;',
346  changeMonth: true,
347  changeYear: true
348  });
349  }
350 
351  if (!$('.elgg-input-date').length) {
352  return;
353  }
354 
355  if (elgg.get_language() == 'en') {
356  loadDatePicker();
357  } else {
358  // load language first
359  elgg.get({
360  url: elgg.config.wwwroot + 'vendors/jquery/i18n/jquery.ui.datepicker-'+ elgg.get_language() +'.js',
361  dataType: "script",
362  cache: true,
363  success: loadDatePicker,
364  error: loadDatePicker // english language is already loaded.
365  });
366  }
367 };
368 
376 elgg.ui.registerTogglableMenuItems = function(menuItemNameA, menuItemNameB) {
377  // Handles clicking the first button.
378  $('.elgg-menu-item-' + menuItemNameA + ' a').live('click', function() {
379  var $menu = $(this).closest('.elgg-menu');
380 
381  // Be optimistic about success
382  elgg.ui.toggleMenuItems($menu, menuItemNameB, menuItemNameA);
383 
384  // Send the ajax request
385  elgg.action($(this).attr('href'), {
386  success: function(json) {
387  if (json.system_messages.error.length) {
388  // Something went wrong, so undo the optimistic changes
389  elgg.ui.toggleMenuItems($menu, menuItemNameA, menuItemNameB);
390  }
391  },
392  error: function() {
393  // Something went wrong, so undo the optimistic changes
394  elgg.ui.toggleMenuItems($menu, menuItemNameA, menuItemNameB);
395  }
396  });
397 
398  // Don't want to actually click the link
399  return false;
400  });
401 
402  // Handles clicking the second button
403  $('.elgg-menu-item-' + menuItemNameB + ' a').live('click', function() {
404  var $menu = $(this).closest('.elgg-menu');
405 
406  // Be optimistic about success
407  elgg.ui.toggleMenuItems($menu, menuItemNameA, menuItemNameB);
408 
409  // Send the ajax request
410  elgg.action($(this).attr('href'), {
411  success: function(json) {
412  if (json.system_messages.error.length) {
413  // Something went wrong, so undo the optimistic changes
414  elgg.ui.toggleMenuItems($menu, menuItemNameB, menuItemNameA);
415  }
416  },
417  error: function() {
418  // Something went wrong, so undo the optimistic changes
419  elgg.ui.toggleMenuItems($menu, menuItemNameB, menuItemNameA);
420  }
421  });
422 
423  // Don't want to actually click the link
424  return false;
425  });
426 };
427 
428 elgg.ui.toggleMenuItems = function($menu, nameOfItemToShow, nameOfItemToHide) {
429  $menu.find('.elgg-menu-item-' + nameOfItemToShow).removeClass('hidden').find('a').focus();
430  $menu.find('.elgg-menu-item-' + nameOfItemToHide).addClass('hidden');
431 };
432 
442 elgg.ui.initAccessInputs = function () {
443  $('.elgg-input-access').each(function () {
444  function updateMembersonlyNote() {
445  var val = $select.val();
446  if (val != acl && val !== 0) {
447  // .show() failed in Chrome. Maybe a float/jQuery bug
448  $note.css('visibility', 'visible');
449  } else {
450  $note.css('visibility', 'hidden');
451  }
452  }
453  var $select = $(this),
454  acl = $select.data('group-acl'),
455  $note = $('.elgg-input-access-membersonly', this.parentNode),
456  commentCount = $select.data('comment-count'),
457  originalValue = $select.data('original-value');
458  if ($note) {
459  updateMembersonlyNote();
460  $select.change(updateMembersonlyNote);
461  }
462 
463  if (commentCount) {
464  $select.change(function(e) {
465  if ($(this).val() != originalValue) {
466  if (!confirm(elgg.echo('access:comments:change', [commentCount]))) {
467  $(this).val(originalValue);
468  }
469  }
470  });
471  }
472  });
473 };
474 
475 elgg.register_hook_handler('init', 'system', elgg.ui.init);
476 elgg.register_hook_handler('init', 'system', elgg.ui.initDatePicker);
477 elgg.register_hook_handler('getOptions', 'ui.popup', elgg.ui.loginHandler);
478 elgg.ui.registerTogglableMenuItems('add-friend', 'remove-friend');
elgg message elgg state success
Definition: admin.php:252
elgg
Definition: install.js:23
i
Definition: admin.php:47
$e
Definition: metadata.php:12
z index
Definition: admin.php:354
border top
Definition: admin.php:386
elgg message elgg state error
Definition: admin.php:247
GNU GENERAL PUBLIC LICENSE June Free Software Franklin Fifth MA USA Everyone is permitted to copy and distribute verbatim copies of this license document
Definition: LICENSE.txt:4
function elgg combo checkbox click(function(){if($(this).is(':checked')){$(this).prev().attr('disabled', true);$(this).prev().val('');}else{$(this).prev().attr('disabled', false);}})
if(!$site) if(!($site instanceof ElggSite)) $site url
$menu
Definition: default.php:19
$target
Definition: responses.php:19
list style type
Definition: admin.php:748
ui datepicker
Definition: admin.php:593
margin left
Definition: admin.php:290