feat(layout): implement a different UI for embeds

hypeJunction · May 15, 2019 · dd1855f · dd1855f
1 parent e30e0d5
commit dd1855f
Show file tree

Hide file tree

Showing 16 changed files with 404 additions and 87 deletions.
diff --git a/classes/hypeJunction/Embed/Menus.php b/classes/hypeJunction/Embed/Menus.php
@@ -11,84  11,112 @@ class Menus {
 
 	/**
 	 * Setup embed menu
-	 * 
 	 *
 	 * @param string         $hook   "register"
 	 * @param string         $type   "menu:embed"
 	 * @param ElggMenuItem[] $return Menu
 	 * @param array          $params Hook params
 	 *
 	 * @return ElggMenuItem[]
 	 */
 	public static function setupEmbedMenu($hook, $type, $return, $params) {
 
-		$return[] = ElggMenuItem::factory(array(
-					'name' => 'posts',
-					'text' => elgg_echo('embed:posts'),
-					'priority' => 300,
-					'data' => array(
-						'view' => 'embed/tab/posts',
-					),
-		));
-
-		if (elgg_is_active_plugin('hypeScraper')) {
-			$return[] = ElggMenuItem::factory(array(
-						'name' => 'player',
-						'text' => elgg_echo('embed:player'),
-						'priority' => 500,
-						'data' => array(
-							'view' => 'embed/tab/player',
-						),
-			));
 		if (self::isTabEnabled('posts')) {
 			$return[] = ElggMenuItem::factory([
 				'name' => 'posts',
 				'text' => elgg_echo('embed:posts'),
 				'priority' => 300,
 				'data' => [
 					'view' => 'embed/tab/posts',
 				],
 			]);
 		}
 
 		if (elgg_is_active_plugin('hypeScraper') && self::isTabEnabled('player')) {
 			$return[] = ElggMenuItem::factory([
 				'name' => 'player',
 				'text' => elgg_echo('embed:player'),
 				'priority' => 500,
 				'data' => [
 					'view' => 'embed/tab/player',
 				],
 			]);
 		}
 
 		if (elgg_is_admin_logged_in()) {
 			if (self::isTabEnabled('assets')) {
 				$return[] = ElggMenuItem::factory([
 					'name' => 'assets',
 					'text' => elgg_echo('embed:assets'),
 					'priority' => 900,
 					'data' => [
 						'view' => 'embed/tab/assets',
 					],
 				]);
 			}
 
 			if (self::isTabEnabled('buttons')) {
 				$return[] = ElggMenuItem::factory([
 					'name' => 'buttons',
 					'text' => elgg_echo('embed:buttons'),
 					'priority' => 950,
 					'data' => [
 						'view' => 'embed/tab/buttons',
 					],
 				]);
 			}
 
 			if (self::isTabEnabled('code')) {
 				$return[] = ElggMenuItem::factory([
 					'name' => 'code',
 					'text' => elgg_echo('embed:code'),
 					'priority' => 950,
 					'data' => [
 						'view' => 'embed/tab/code',
 					],
 				]);
 			}
 		}
 
-		$page_owner = elgg_get_page_owner_entity();
 		$id = elgg_extract('textarea_id', $params);
 
 		foreach ($return as &$item) {
 			if (!$item instanceof \ElggMenuItem) {
 				continue;
 			}
 
 			if ($item->getName() == 'file') {
 				$item->setData('type', null);
 				$item->setData('subtype', null);
 				$item->setData('view', 'embed/tab/file');
 			}
 
-			$href = elgg_http_add_url_query_elements($item->getHref(), [
-				'container_guid' => $page_owner->guid,
-			]);
 			if ($id) {
 				$item->rel = "embed-lightbox-{$id}";
 				$item->setLinkClass("embed-control embed-control-{$id}");
 			}
 
-			$item->setHref($href);
-		}
 			$item->addDeps(['elgg/embed', 'embed/toolbar']);
 
-		if (elgg_is_admin_logged_in()) {
-			$return[] = ElggMenuItem::factory(array(
-						'name' => 'assets',
-						'text' => elgg_echo('embed:assets'),
-						'priority' => 900,
-						'data' => array(
-							'view' => 'embed/tab/assets',
-						),
-			));
-
-			$return[] = ElggMenuItem::factory(array(
-				'name' => 'buttons',
-				'text' => elgg_echo('embed:buttons'),
-				'priority' => 950,
-				'data' => array(
-					'view' => 'embed/tab/buttons',
-				),
-			));
-
-			$return[] = ElggMenuItem::factory(array(
-				'name' => 'code',
-				'text' => elgg_echo('embed:code'),
-				'priority' => 950,
-				'data' => array(
-					'view' => 'embed/tab/code',
-				),
-			));
 			$url = "embed/tab/{$item->getName()}";
 
 			$page_owner = elgg_get_page_owner_entity();
 
 			if ($page_owner instanceof \ElggGroup && $page_owner->isMember()) {
 				$url = elgg_http_add_url_query_elements($url, [
 					'container_guid' => $page_owner->guid,
 				]);
 			}
 
 			$item->setHref('javascript:');
 			$item->{'data-href'} = elgg_normalize_url($url);
 		}
 
 		return $return;
 	}
 
 	protected static function isTabEnabled($name) {
 		return elgg_get_plugin_setting("tabs:$name", 'hypeEmbed', true);
 	}
 
 }
diff --git a/languages/en.php b/languages/en.php
@@ -33,6  33,7 @@
 
 	'embed:settings:river_preview' => 'Add player view to river item view',
 	'embed:settings:summary_preview' => 'Add player view to item\'s summary view',
 	'embed:settings:tabs' => 'Enable Tab: %s',
 
 	'embed:tab:file:empty' => 'No files have been uploaded yet',
 	'embed:tab:posts:empty' => 'No items have been posted yet',

diff --git a/start.php b/start.php
@@ -15,8  15,9 @@
 use hypeJunction\Embed\Views;
 
 elgg_register_event_handler('init', 'system', function() {
 	elgg_unregister_plugin_hook_handler('register', 'menu:longtext', 'embed_longtext_menu');
 
-	elgg_register_plugin_hook_handler('register', 'menu:embed', [Menus::class, 'setupEmbedMenu']);
 	elgg_register_plugin_hook_handler('register', 'menu:embed', [Menus::class, 'setupEmbedMenu'], 800);
 	elgg_register_plugin_hook_handler('filter_options', 'object', [Lists::class, 'addFileSimpletypeOptions']);
 
 	elgg_register_ajax_view('embed/safe/entity');
@@ -39,6  40,9 @@
 
 	elgg_register_plugin_hook_handler('route', 'embed', [Router::class, 'routeEmbed']);
 
 	elgg_extend_view('input/longtext', 'embed/toolbar');
 	elgg_extend_view('elgg.css', 'embed/toolbar.css');
 
 	// Legacy ckeditor_addons
 	elgg_register_page_handler('ckeditor', [Router::class, 'handleCKEditor']);
 	elgg_register_action('upgrade/embed/ckeditor_file', __DIR__ . '/actions/upgrade/embed/ckeditor_file.php');

diff --git a/views/default/embed/layout.php b/views/default/embed/layout.php
@@ -0,0  1,40 @@
 <?php
 /**
  * Layout of embed panel loaded in lightbox
  */
 
 // So we get a selected a tab
 elgg_view_menu('embed', [
 	'sort_by' => 'priority'
 ]);
 
 $selected = elgg_get_config('embed_tab');
 
 if ($selected->getData('view')) {
 	$tab = elgg_view($selected->getData('view'), $vars);
 } else {
 	$tab = elgg_list_entities(
 		embed_get_list_options($selected->getData('options')),
 		'elgg_get_entities',
 		'embed_list_items'
 	);
 
 	if (!$tab) {
 		$tab = elgg_echo('embed:no_section_content');
 	}
 }
 
 $tab .= elgg_view('graphics/ajax_loader', [
 	'class' => 'embed-throbber',
 ]);
 
 $container_info = elgg_view('input/hidden', [
 	'name' => 'embed_container_guid',
 	'value' => elgg_get_page_owner_guid(),
 ]);
 
 ?>
 <div class="embed-wrapper">
 	<?= $tab ?>
 	<?= $container_info ?>
 </div>
diff --git a/views/default/embed/lists/item.js b/views/default/embed/lists/item.js
@@ -2,7  2,6 @@ define(function (require) {
 
 	var elgg = require('elgg');
 	var embed = require('elgg/embed');
-	var lightbox = require('elgg/lightbox');
 
 	var Ajax = require('elgg/Ajax');
 	var ajax = new Ajax();
@@ -41,11  40,14 @@ define(function (require) {
 				value: value,
 				event: e
 			}, result);
 
 			if (result || result === '') {
 				textArea.val(result);
 			}
-
-			lightbox.close();
 		}).always(() => {
 			require(['elgg/popup'], function(popup) {
 				popup.close();
 			});
 		});
 
 	});

diff --git a/views/default/embed/lists/item.php b/views/default/embed/lists/item.php
@@ -21,38  21,41 @@
 }
 
 $subtitle = elgg_format_element('span', [
-	'class' => 'embed-type-badge elgg-badge mrs',
-		], elgg_echo("item:object:{$entity->getSubtype()}"));
 	'class' => 'embed-type-badge',
 ], elgg_echo("item:object:{$entity->getSubtype()}"));
 
 $subtitle .= elgg_view('page/elements/by_line', $vars);
 
 $items[] = [
 	'name' => 'embed',
-	'class' => 'embed-insert-async',
 	'text' => elgg_echo('embed:embed'),
 	'href' => 'javascript:',
 	'data-guid' => $entity->guid,
 	'data-view' => 'embed/safe/entity',
 	'link_class' => 'elgg-button embed-insert-async',
 ];
 
 $menu = elgg_view_menu('embed:entity', [
 	'items' => $items,
 	'entity' => $entity,
 	'sort_by' => 'priority',
 	'class' => 'elgg-menu-hz',
-		]);
-
-echo elgg_view('object/elements/summary', array(
-	'entity' => $entity,
-	'title' => $title,
-	'subtitle' => $subtitle,
-	'content' => elgg_get_excerpt($entity->description) . $menu,
-	'metadata' => false,
-	'tags' => $tags,
-	'icon' => $icon,
-));
 ]);
 ?>
-<script>
-	require(['embed/lists/item']);
-</script>
 
 <div class="embed-list-item">
     <div class="embed-list-item__icon">
 		<?= $icon ?>
     </div>
     <div class="embed-list-item__body">
         <div class="embed-list-item__title">
 			<?= $title ?>
         </div>
         <div class="embed-list-item__subtitle">
 			<?= $subtitle ?>
         </div>
     </div>
     <div class="embed-list-item__menu">
 		<?= $menu ?>
     </div>
 </div>
diff --git a/views/default/embed/tab/buttons.js b/views/default/embed/tab/buttons.js
@@ -1,11  1,7 @@
 define(function (require) {
-
 	var elgg = require('elgg');
 	var embed = require('elgg/embed');
-	var lightbox = require('elgg/lightbox');
-
 	var Ajax = require('elgg/Ajax');
-	var ajax = new Ajax();
 
 	$(document).on('submit', '.elgg-form-embed-buttons', function (e) {
 		e.preventDefault();
@@ -44,8  40,10 @@ define(function (require) {
 			if (result || result === '') {
 				textArea.val(result);
 			}
-
-			lightbox.close();
 		}).always(() => {
 			require(['elgg/popup'], function (popup) {
 				popup.close();
 			});
 		});
 
 	});

diff --git a/views/default/embed/tab/code.js b/views/default/embed/tab/code.js
@@ -1,8  1,6 @@
 define(function (require) {
-
 	var elgg = require('elgg');
 	var embed = require('elgg/embed');
-	var lightbox = require('elgg/lightbox');
 
 	var Ajax = require('elgg/Ajax');
 	var ajax = new Ajax();
@@ -44,8  42,10 @@ define(function (require) {
 			if (result || result === '') {
 				textArea.val(result);
 			}
-
-			lightbox.close();
 		}).always(() => {
 			require(['elgg/popup'], function (popup) {
 				popup.close();
 			});
 		});
 
 	});

diff --git a/views/default/embed/tab/file.php b/views/default/embed/tab/file.php
@@ -38,6  38,7 @@
 
 echo elgg_view('lists/objects', [
 	'list_id' => 'embed-file',
 	'list_class' => 'embed-list is-borderless',
 	'options' => $options,
 	'show_filter' => true,
 	'show_sort' => true,

diff --git a/views/default/embed/tab/player.js b/views/default/embed/tab/player.js
@@ -2,7  2,6 @@ define(function (require) {
 
 	var elgg = require('elgg');
 	var embed = require('elgg/embed');
-	var lightbox = require('elgg/lightbox');
 
 	var Ajax = require('elgg/Ajax');
 	var ajax = new Ajax();
@@ -44,8  43,10 @@ define(function (require) {
 			if (result || result === '') {
 				textArea.val(result);
 			}
-
-			lightbox.close();
 		}).always(() => {
 			require(['elgg/popup'], function (popup) {
 				popup.close();
 			});
 		});
 
 	});