Elgg  Version 2.2
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 (not a link inside one), make it disappear
12  $(document).on('click', '.elgg-system-messages li', function(e) {
13  if (!$(e.target).is('a')) {
14  $(this).stop().fadeOut('fast');
15  }
16  });
17 
18  $('.elgg-system-messages li').animate({opacity: 0.9}, 6000);
19  $('.elgg-system-messages li.elgg-state-success').fadeOut('slow');
20 
21  $(document).on('click', '[rel=toggle]', elgg.ui.toggles);
22 
23  require(['elgg/popup'], function(popup) {
24  popup.bind($('[rel="popup"]'));
25  });
26 
27  $(document).on('click', '.elgg-menu-page .elgg-menu-parent', elgg.ui.toggleMenu);
28 
29  $(document).on('click', '*[data-confirm], .elgg-requires-confirmation', elgg.ui.requiresConfirmation);
30  if ($('.elgg-requires-confirmation').length > 0) {
31  elgg.deprecated_notice('Use of .elgg-requires-confirmation is deprecated by data-confirm', '1.10');
32  }
33 
34  $('.elgg-autofocus').focus();
35  if ($('.elgg-autofocus').length > 0) {
36  elgg.deprecated_notice('Use of .elgg-autofocus is deprecated by html5 autofocus', 1.9);
37  }
38 
39  elgg.ui.initAccessInputs();
40 
41  // Allow element to be highlighted using CSS if its id is found from the URL
42  var elementId = elgg.getSelectorFromUrlFragment(document.URL);
43  $(elementId).addClass('elgg-state-highlight');
44 
45  elgg.ui.initDatePicker();
46 
47  elgg.ui.registerTogglableMenuItems('add-friend', 'remove-friend');
48 };
49 
63 elgg.ui.toggles = function(event) {
64  event.preventDefault();
65  var $this = $(this),
66  selector = $this.data().toggleSelector;
67 
68  if (!selector) {
69  // @todo we can switch to elgg.getSelectorFromUrlFragment() in 1.x if
70  // we also extend it to support href=".some-class"
71  selector = $this.attr('href');
72  }
73 
74  var $elements = $(selector);
75 
76  $this.toggleClass('elgg-state-active');
77 
78  $elements.each(function(index, elem) {
79  var $elem = $(elem);
80  if ($elem.data().toggleSlide != false) {
81  $elem.slideToggle('medium');
82  } else {
83  $elem.toggle();
84  }
85  });
86 
87  $this.trigger('elgg_ui_toggle', [{
88  $toggled_elements: $elements
89  }]);
90 };
91 
110 elgg.ui.popupOpen = function(event) {
111 
112  elgg.deprecated_notice('elgg.ui.popupOpen() has been deprecated and should not be called directly. Use elgg/popup AMD module instead', '2.2');
113 
114  event.preventDefault();
115  event.stopPropagation();
116 
117  var $elem = $(this);
118  require(['elgg/popup'], function(popup) {
119  popup.open($elem);
120  });
121 };
122 
127 elgg.ui.popupClose = function(event) {
128 
129  elgg.deprecated_notice('elgg.ui.popupClose() has been deprecated and should not be called directly. Use elgg/popup AMD module instead', '2.2');
130 
131  require(['elgg/popup'], function(popup) {
132  popup.close();
133  });
134 };
135 
142 elgg.ui.toggleMenu = function(event) {
143  $(this).siblings().slideToggle('medium');
144  $(this).toggleClass('elgg-menu-closed elgg-menu-opened');
145  event.preventDefault();
146 };
147 
154 elgg.ui.initHoverMenu = function(parent) {
155 
161  function loadMenu(mac) {
162  var $all_placeholders = $(".elgg-menu-hover[rel='" + mac + "']");
163 
164  // find the <ul> that contains data for this menu
165  var $ul = $all_placeholders.filter('[data-elgg-menu-data]');
166 
167  if (!$ul.length) {
168  return;
169  }
170 
171  elgg.get('ajax/view/navigation/menu/user_hover/contents', {
172  data: $ul.data('elggMenuData'),
173  success: function(data) {
174  if (data) {
175  // replace all existing placeholders with new menu
176  $all_placeholders.removeClass('elgg-ajax-loader')
177  .html($(data).children());
178  }
179  }
180  });
181  }
182 
183  if (!parent) {
184  parent = document;
185  }
186 
187  // avatar image menu link
188  $(parent).on('mouseover', ".elgg-avatar", function() {
189  $(this).children(".elgg-icon-hover-menu").show();
190  })
191  .on('mouseout', '.elgg-avatar', function() {
192  $(this).children(".elgg-icon-hover-menu").hide();
193  });
194 
195 
196  // avatar contextual menu
197  $(document).on('click', ".elgg-avatar > .elgg-icon-hover-menu", function(e) {
198 
199  var $icon = $(this);
200 
201  var $placeholder = $icon.parent().find(".elgg-menu-hover.elgg-ajax-loader");
202 
203  if ($placeholder.length) {
204  loadMenu($placeholder.attr("rel"));
205  }
206 
207  // check if we've attached the menu to this element already
208  var $hovermenu = $icon.data('hovermenu') || null;
209 
210  if (!$hovermenu) {
211  $hovermenu = $icon.parent().find(".elgg-menu-hover");
212  $icon.data('hovermenu', $hovermenu);
213  }
214 
215  require(['elgg/popup'], function(popup) {
216  if ($hovermenu.is(':visible')) {
217  // close hovermenu if arrow is clicked & menu already open
218  popup.close($hovermenu);
219  } else {
220  popup.open($icon, $hovermenu, {
221  'my': 'left top',
222  'at': 'right-15px bottom',
223  'of': $icon.closest(".elgg-avatar"),
224  'collision': 'fit fit'
225  });
226  }
227  });
228  });
229 
230 };
231 
238 elgg.ui.requiresConfirmation = function(e) {
239  var confirmText = $(this).data('confirm') || elgg.echo('question:areyousure');
240  if (!confirm(confirmText)) {
241  return false;
242  }
243 };
244 
255 elgg.ui.loginHandler = function(hook, type, params, options) {
256  if (params.target.attr('id') == 'login-dropdown-box') {
257  options.my = 'right top';
258  options.at = 'right bottom';
259  return options;
260  }
261  return null;
262 };
263 
276 elgg.ui.initDatePicker = function () {
277  var selector = '.elgg-input-date:not([data-datepicker-opts])';
278  if (!$(selector).length) {
279  return;
280  }
281  elgg.deprecated_notice('elgg.ui.initDatePicker() has been deprecated. Use input/date AMD module instead', '2.1');
282  require(['input/date'], function (datepicker) {
283  datepicker.init(selector);
284  });
285 };
286 
294 elgg.ui.registerTogglableMenuItems = function(menuItemNameA, menuItemNameB) {
295 
296  // Handles clicking the first button.
297  $(document).off('click.togglable', '.elgg-menu-item-' + menuItemNameA + ' a')
298  .on('click.togglable', '.elgg-menu-item-' + menuItemNameA + ' a', function() {
299  var $menu = $(this).closest('.elgg-menu');
300 
301  // Be optimistic about success
302  elgg.ui.toggleMenuItems($menu, menuItemNameB, menuItemNameA);
303 
304  // Send the ajax request
305  elgg.action($(this).attr('href'), {
306  success: function(json) {
307  if (json.system_messages.error.length) {
308  // Something went wrong, so undo the optimistic changes
309  elgg.ui.toggleMenuItems($menu, menuItemNameA, menuItemNameB);
310  }
311  },
312  error: function() {
313  // Something went wrong, so undo the optimistic changes
314  elgg.ui.toggleMenuItems($menu, menuItemNameA, menuItemNameB);
315  }
316  });
317 
318  // Don't want to actually click the link
319  return false;
320  });
321 
322  // Handles clicking the second button
323  $(document).off('click.togglable', '.elgg-menu-item-' + menuItemNameB + ' a')
324  .on('click.togglable', '.elgg-menu-item-' + menuItemNameB + ' a', function() {
325  var $menu = $(this).closest('.elgg-menu');
326 
327  // Be optimistic about success
328  elgg.ui.toggleMenuItems($menu, menuItemNameA, menuItemNameB);
329 
330  // Send the ajax request
331  elgg.action($(this).attr('href'), {
332  success: function(json) {
333  if (json.system_messages.error.length) {
334  // Something went wrong, so undo the optimistic changes
335  elgg.ui.toggleMenuItems($menu, menuItemNameB, menuItemNameA);
336  }
337  },
338  error: function() {
339  // Something went wrong, so undo the optimistic changes
340  elgg.ui.toggleMenuItems($menu, menuItemNameB, menuItemNameA);
341  }
342  });
343 
344  // Don't want to actually click the link
345  return false;
346  });
347 };
348 
349 elgg.ui.toggleMenuItems = function($menu, nameOfItemToShow, nameOfItemToHide) {
350  $menu.find('.elgg-menu-item-' + nameOfItemToShow).removeClass('hidden').find('a').focus();
351  $menu.find('.elgg-menu-item-' + nameOfItemToHide).addClass('hidden');
352 };
353 
363 elgg.ui.initAccessInputs = function () {
364  $('.elgg-input-access').each(function () {
365  function updateMembersonlyNote() {
366  var val = $select.val();
367  if (val != acl && val !== 0) {
368  // .show() failed in Chrome. Maybe a float/jQuery bug
369  $note.css('visibility', 'visible');
370  } else {
371  $note.css('visibility', 'hidden');
372  }
373  }
374  var $select = $(this),
375  acl = $select.data('group-acl'),
376  $note = $('.elgg-input-access-membersonly', this.parentNode),
377  commentCount = $select.data('comment-count'),
378  originalValue = $select.data('original-value');
379  if ($note) {
380  updateMembersonlyNote();
381  $select.change(updateMembersonlyNote);
382  }
383 
384  if (commentCount) {
385  $select.change(function(e) {
386  if ($(this).val() != originalValue) {
387  if (!confirm(elgg.echo('access:comments:change', [commentCount]))) {
388  $(this).val(originalValue);
389  }
390  }
391  });
392  }
393  });
394 };
395 
396 elgg.register_hook_handler('init', 'system', elgg.ui.init);
397 elgg.register_hook_handler('getOptions', 'ui.popup', elgg.ui.loginHandler);
elgg
Definition: install.js:23
z index
Definition: admin.css.php:358
elgg message elgg state error
Definition: admin.css.php:247
if($selector) $select
Definition: filter.php:36
if(!$owner) $icon
Definition: default.php:16
list style type
Definition: admin.css.php:777
and that you know you can do these things To protect your we need to make restrictions that forbid anyone to deny you these rights or to ask you to surrender the rights These restrictions translate to certain responsibilities for you if you distribute copies of the or if you modify it For if you distribute copies of such a whether gratis or for a you must give the recipients all the rights that you have You must make sure that receive or can get the source code And you must show them these terms so they know their rights We protect your rights with two distribute and or modify the software for each author s protection and we want to make certain that everyone understands that there is no warranty for this free software If the software is modified by someone else and passed on
Definition: GPL-LICENSE.txt:43
elgg module popup
Definition: admin.css.php:355
ui datepicker
Definition: admin.css.php:608
elgg require
Throw an error if the required package isn&#39;t present.
Definition: elgglib.js:164
GNU GENERAL PUBLIC LICENSE June Free Software Inc Franklin Fifth MA USA Everyone is permitted to copy and distribute verbatim copies of this license document
Definition: GPL-LICENSE.txt:4
elgg message elgg state success
Definition: admin.css.php:252
$menu
Definition: default.php:19