hypejunction/ui_popup

Popup AMD module for Elgg

Installs: 70

Dependents: 0

Suggesters: 0

Security: 0

Stars: 0

Watchers: 2

Forks: 1

Open Issues: 0

Language:JavaScript

Type:elgg-plugin

1.1.0 2016-04-06 21:03 UTC

This package is auto-updated.

Last update: 2024-02-29 03:23:25 UTC


README

Elgg 2.0

Features

  • Coverts popups into an AMD module
  • Allows to programmically open and close popups
  • Allows passing popup position via data- parameters of the trigger

Usage

Bind by href attribute

This behaviour is identical to adding rel="popup" to your anchor element.

echo elgg_view('output/url', array(
	'class' => 'popup-trigger',
	'href' => '#popup',
));
define(function(require) {
	var $ = require('jquery');
	var popup = require('elgg/popup');
	popup.bind($('.popup-trigger'));
});

Custom elements

echo elgg_format_element('button', [
	'class' => 'elgg-button elgg-button-popup',
	'data-my' => 'center top',
	'data-at' => 'center bottom+10px',
], 'Open Popup');
echo elgg_format_element('div', [
	'class' => 'elgg-module elgg-module-popup hidden',
], 'My popup');
define(function(require) {
	var $ = require('jquery');
	$(document).on('click', '.elgg-button-popup', function(e) {
		e.preventDefault();
		var $trigger = $(this);
		var $target = $(this).next('.elgg-module-popup');
		if ($target.length) {
			require(['elgg/popup'], function(popup) {
				popup.open($trigger, $target, {
					'collision': 'fit none'
				});
			});
		}
	});
});