hypejunction/ui_popup

Popup AMD module for Elgg

1.1.0 2016-04-06 21:03 UTC

Requires

• php: >=5.5
• composer/installers: 1.*

GPL-2.0

• Ismayil Khayredinov

• ui
• plugin
• popup
• elgg

README

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'
				});
			});
		}
	});
});