Skip to content

Commit

Permalink
feat(walledgarden): convert walled garden JS to AMD
Browse files Browse the repository at this point in the history
Converts walled garden JS to AMD, deprecates loaded JS library.
Cleans up inline JS
  • Loading branch information
hypeJunction committed Aug 8, 2016
1 parent b2a3de2 commit 890b4a7
Show file tree
Hide file tree
Showing 7 changed files with 128 additions and 86 deletions.
3 changes: 3 additions & 0 deletions docs/guides/upgrading.rst
Expand Up @@ -22,10 +22,13 @@ Deprecated APIs
* ``elgg_error_page_handler()``: No longer used as a handler for `'forward',<error_code>` hooks
* ``get_uploaded_file()`` is deprecated: Use new file uploads API instead
* ``pagesetup, system`` event: Use the menu or page shell hooks instead.
* ``elgg.walled_garden`` JavaScript is deprecated: Use ``elgg/walled_garden`` AMD module instead.

Deprecated Views
----------------

* ``wallled_garden.js`` is deprecated: Use ``elgg/walled_garden`` module instead.

New API for page and action handling
------------------------------------

Expand Down
7 changes: 7 additions & 0 deletions engine/lib/elgglib.php
Expand Up @@ -1921,6 +1921,9 @@ function _elgg_walled_garden_init() {
global $CONFIG;

elgg_register_css('elgg.walled_garden', elgg_get_simplecache_url('walled_garden.css'));

// Deprecated, but registered for BC
// @todo: remove in 3.x
elgg_register_js('elgg.walled_garden', elgg_get_simplecache_url('walled_garden.js'));

elgg_register_page_handler('walled_garden', '_elgg_walled_garden_ajax_handler');
Expand All @@ -1929,6 +1932,10 @@ function _elgg_walled_garden_init() {
if (isset($CONFIG->site) && $CONFIG->site instanceof \ElggSite) {
$CONFIG->site->checkWalledGarden();
}

// For BC, we are extending the views to make sure that sites that customized walled garden get the updates
// @todo: in 3.0, move this into the layout view
elgg_extend_view('page/layouts/walled_garden', 'page/layouts/walled_garden/cancel_button');
}

/**
Expand Down
92 changes: 92 additions & 0 deletions views/default/elgg/walled_garden.js
@@ -0,0 +1,92 @@
/**
* @module elgg/walled_garden
*/
define(function (require) {

var elgg = require('elgg');
var $ = require('jquery');
var Ajax = require('elgg/Ajax');
var ajax = new Ajax();

var walled_garden = {
/**
* Bind walled garden events
* @returns {void}
*/
init: function () {

// Remove lightbox/popup bindings, if any
$('.forgot_link,.registration_link').removeClass('elgg-lightbox');
$('.forgot_link[rel="popup"],.registration_link[rel="popup"]').prop('rel', false);

$(document).on('click', '.forgot_link', walled_garden.load('lost_password'));
$(document).on('click', '.registration_link', walled_garden.load('register'));

$(document).on('click', 'input.elgg-button-cancel', function (event) {
var $wgs = $('.elgg-walledgarden-single');
if ($wgs.is(':visible')) {
$('.elgg-walledgarden-double').fadeToggle();
$wgs.fadeToggle();
$wgs.remove();
}
event.preventDefault();
});

// only run this function once
walled_garden.init = elgg.nullFunction;
},
/**
* Creates a closure for loading walled garden content through ajax
*
* @param {String} view Name of the walled garden view
* @return {Object}
*/
load: function (view) {
return function (event) {
var id = '#elgg-walledgarden-' + view;
id = id.replace('_', '-');

ajax.path('walled_garden/' + view).done(function (data, statusText, jqXHR) {
if (jqXHR.AjaxData.status === -1) {
return;
}

var $wg = $('.elgg-body-walledgarden');
$wg.append(data);

$(id).find('input.elgg-button-submit').after($('#elgg-walled-garden-cancel').html());

if (view === 'register' && $wg.hasClass('hidden')) {
// this was a failed registration, display the register form ASAP
$('#elgg-walledgarden-login').toggle(false);
$(id).toggle();
$wg.removeClass('hidden');
} else {
$('#elgg-walledgarden-login').fadeToggle();
$(id).fadeToggle();
}
});

event.preventDefault();
};
}
}

require(['elgg/ready'], function () {
elgg.register_hook_handler('init', 'system', walled_garden.init);
});

// BC implementation
// @todo: remove in 3.0
elgg.provide('elgg.walled_garden');
elgg.walled_garden.init = function () {
elgg.deprecated_notice('elgg.walled_garden.init has been deprecated. Use elgg/walled_garden#init AMD method instead', '2.3');
return walled_garden.init.apply(this, arguments);
};
elgg.walled_garden.load = function () {
elgg.deprecated_notice('elgg.walled_garden.load has been deprecated. Use elgg/walled_garden#load AMD method instead', '2.3');
return walled_garden.init.apply(this, arguments);
};

return walled_garden;
});
11 changes: 11 additions & 0 deletions views/default/page/layouts/walled_garden/cancel_button.php
@@ -0,0 +1,11 @@
<?php

$cancel_button = elgg_view('input/button', array(
'value' => elgg_echo('cancel'),
'class' => 'elgg-button-cancel mlm',
));

echo elgg_format_element('div', [
'id' => 'elgg-walled-garden-cancel',
'class' => 'hidden',
], $cancel_button);
22 changes: 4 additions & 18 deletions views/default/page/walled_garden.php
Expand Up @@ -9,21 +9,9 @@
* @uses $vars['sysmessages'] A 2d array of various message registers, passed from system_messages()
*/

$is_sticky_register = elgg_is_sticky_form('register');
$wg_body_class = 'elgg-body-walledgarden';
$inline_js = '';
if ($is_sticky_register) {
$wg_body_class .= ' hidden';
ob_start(); ?>
<script>
require(['elgg'], function (elgg) {
elgg.register_hook_handler('init', 'system', function() {
$('.registration_link').trigger('click');
});
});
</script>
<?php
$inline_js = ob_get_clean();
if (elgg_is_sticky_form('register')) {
// An error occurred while submitting the registration form in a lightbox
forward('register');
}

// render content before head so that JavaScript and CSS can be loaded. See #4032
Expand All @@ -35,7 +23,7 @@
<div class="elgg-page-messages">
<?php echo $messages ?>
</div>
<div class="<?php echo $wg_body_class; ?>">
<div class="elgg-body-walledgarden">
<?php echo $content ?>
</div>
</div>
Expand All @@ -44,8 +32,6 @@

$body .= elgg_view('page/elements/foot');

$body .= $inline_js;

$head = elgg_view('page/elements/head', $vars['head']);

echo elgg_view("page/elements/html", array("head" => $head, "body" => $body));
8 changes: 7 additions & 1 deletion views/default/resources/walled_garden.php
@@ -1,6 +1,12 @@
<?php
elgg_load_css('elgg.walled_garden');
elgg_load_js('elgg.walled_garden');

if (_elgg_view_may_be_altered('walled_garden.js', 'walled_garden.js.php')) {
elgg_deprecated_notice('elgg.walled_garden JS library is deprecated. Use elgg/walled_garden AMD module instead', '2.3');
elgg_load_js('elgg.walled_garden');
} else {
elgg_require_js('elgg/walled_garden');
}

$content = elgg_view('core/walled_garden/login');

Expand Down
71 changes: 4 additions & 67 deletions views/default/walled_garden.js.php
Expand Up @@ -3,72 +3,9 @@
* Walled garden JavaScript
*
* @since 1.8
* @deprecated 2.3
*/

$cancel_button = elgg_view('input/button', array(
'value' => elgg_echo('cancel'),
'class' => 'elgg-button-cancel mlm',
));
$cancel_button = json_encode($cancel_button);

if (0) { ?><script><?php }
elgg_deprecated_notice('walled_garden.js view has been deprecated. Use elgg/walled_garden AMD module instead', '2.3');
?>

elgg.provide('elgg.walled_garden');

elgg.walled_garden.init = function () {
// make sure it is loaded before using it in the click events
require(['elgg/spinner']);
$('.forgot_link').click(elgg.walled_garden.load('lost_password'));
$('.registration_link').click(elgg.walled_garden.load('register'));

$(document).on('click', 'input.elgg-button-cancel', function(event) {
var $wgs = $('.elgg-walledgarden-single');
if ($wgs.is(':visible')) {
$('.elgg-walledgarden-double').fadeToggle();
$wgs.fadeToggle();
$wgs.remove();
}
event.preventDefault();
});
};

/**
* Creates a closure for loading walled garden content through ajax
*
* @param {String} view Name of the walled garden view
* @return {Object}
*/
elgg.walled_garden.load = function(view) {
return function(event) {
require(['elgg/spinner'], function(spinner) {
var id = '#elgg-walledgarden-' + view;
id = id.replace('_', '-');
// @todo display some visual element that indicates that loading of content is running
elgg.get('walled_garden/' + view, {
beforeSend: spinner.start,
complete: spinner.stop,
success: function(data) {
var $wg = $('.elgg-body-walledgarden');
$wg.append(data);
$(id).find('input.elgg-button-submit').after(<?php echo $cancel_button; ?>);

if (view == 'register' && $wg.hasClass('hidden')) {
// this was a failed registration, display the register form ASAP
$('#elgg-walledgarden-login').toggle(false);
$(id).toggle();
$wg.removeClass('hidden');
} else {
$('#elgg-walledgarden-login').fadeToggle();
$(id).fadeToggle();
}
}
});

});

event.preventDefault();
};
};

elgg.register_hook_handler('init', 'system', elgg.walled_garden.init);
//<script>
require(['elgg/walled_garden']);

0 comments on commit 890b4a7

Please sign in to comment.