An image edit view with action plugins, based on JForm (#122)

* Use JForm to render the action plugins

* Only determine the with and height when it is a file

* Updates

* Add demo crop plugin

* Introduce an event bus to activate and deactivate a plugin n the js side

* Not needed

* Valid HTML

* Localizing the plugins

* Move to plugin layouts

* New lines

* Add rotate plugin

* Add rotate plugin

* Remove not needed code

administrator/components/com_media/libraries/media/plugin/mediaaction.php

@@ -0,0 +1,66 @@
+<?php
+/**
+ * @package     Joomla.Administrator
+ * @subpackage  com_media
+ *
+ * @copyright   Copyright (C) 2005 - 2017 Open Source Matters, Inc. All rights reserved.
+ * @license     GNU General Public License version 2 or later; see LICENSE.txt
+ */
+
+defined('_JEXEC') or die;
+
+
+/**
+ * Media Manager Base Plugin for the media actions
+ *
+ * @since  __DEPLOY_VERSION__
+ */
+class MediaActionPlugin extends JPlugin
+{
+	/**
+	 * Load the language file on instantiation.
+	 *
+	 * @var    boolean
+	 *
+	 * @since  __DEPLOY_VERSION__
+	 */
+	protected $autoloadLanguage = true;
+
+	/**
+	 * The form event. Load additional parameters when available into the field form.
+	 * Only when the type of the form is of interest.
+	 *
+	 * @param   JForm     $form  The form
+	 * @param   stdClass  $data  The data
+	 *
+	 * @return  void
+	 *
+	 * @since   __DEPLOY_VERSION__
+	 */
+	public function onContentPrepareForm(JForm $form, $data)
+	{
+		// Check if it is the right form
+		if ($form->getName() != 'com_media.file')
+		{
+			return;
+		}
+
+		// Get the layout file to add the JS code
+		$layout = JPluginHelper::getLayoutPath('media-action', $this->_name, $this->_name);
+
+		// If there is a layout, include it
+		if ($layout)
+		{
+			include $layout;
+		}
+
+		// The file with the params for the edit view
+		$paramsFile = JPATH_PLUGINS . '/media-action/' . $this->_name . '/form/' . $this->_name . '.xml';
+
+		// When the file exists, load it into the form
+		if (file_exists($paramsFile))
+		{
+			$form->loadFile($paramsFile);
+		}
+	}
+}

administrator/components/com_media/models/file.php

@@ -0,0 +1,45 @@
+<?php
+/**
+ * @package     Joomla.Administrator
+ * @subpackage  com_media
+ *
+ * @copyright   Copyright (C) 2005 - 2017 Open Source Matters, Inc. All rights reserved.
+ * @license     GNU General Public License version 2 or later; see LICENSE.txt
+ */
+
+defined('_JEXEC') or die;
+
+use Joomla\Cms\Model\Form;
+
+/**
+ * File Model
+ *
+ * @since  __DEPLOY_VERSION__
+ */
+class MediaModelFile extends Form
+{
+	/**
+	 * Method to get the record form.
+	 *
+	 * @param   array    $data      Data for the form.
+	 * @param   boolean  $loadData  True if the form is to load its own data (default case), false if not.
+	 *
+	 * @return  JForm|boolean  A JForm object on success, false on failure
+	 *
+	 * @since   1.6
+	 */
+	public function getForm($data = array(), $loadData = true)
+	{
+		JPluginHelper::importPlugin('media-action');
+
+		// Get the form.
+		$form = $this->loadForm('com_media.file', 'file', array('control' => 'jform', 'load_data' => $loadData));
+
+		if (empty($form))
+		{
+			return false;
+		}
+
+		return $form;
+	}
+}

administrator/components/com_media/models/forms/file.xml

@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="utf-8"?>
+<form>
+</form>

administrator/components/com_media/resources/scripts/components/browser/items/image.vue

@@ -2,7 +2,8 @@
     <div class="media-browser-image">
         <div class="media-browser-item-preview">
             <div class="image-brackground">
-                <div class="image-cropped" :style="{ backgroundImage: 'url(' + itemUrl + ')' }"></div>
+                <div class="image-cropped" :style="{ backgroundImage: 'url(' + itemUrl + ')' }"
+                 v-on:dblclick="openEditView()"></div>
             </div>
         </div>
         <div class="media-browser-item-info">
@@ -23,6 +24,12 @@
                 const fileBaseUrl = Joomla.getOptions('com_media').fileBaseUrl || '/images';
 
                 return fileBaseUrl + this.item.path;
+            },
+            openEditView() {
+                // TODO should we use relative urls here?
+                const fileBaseUrl = Joomla.getOptions('com_media').editViewUrl + '&path=';
+
+                window.location.href = fileBaseUrl + this.item.path;
             }
         }
     }

administrator/components/com_media/views/file/tmpl/default.php

@@ -0,0 +1,41 @@
+<?php
+/**
+ * @package     Joomla.Administrator
+ * @subpackage  com_media
+ *
+ * @copyright   Copyright (C) 2005 - 2016 Open Source Matters, Inc. All rights reserved.
+ * @license     GNU General Public License version 2 or later; see LICENSE.txt
+ */
+
+defined('_JEXEC') or die;
+
+// Add javascripts
+JHtml::_('jquery.framework');
+JHtml::_('behavior.formvalidator');
+
+JHtml::_('script', 'media/com_media/js/EventBus.js', true, false);
+JHtml::_('script', 'media/com_media/js/edit.js');
+
+/**
+ * @var JForm $form
+ */
+$form = $this->form;
+?>
+<form action="#" method="post" name="adminForm" id="media-form" class="form-validate">
+<?php
+$fieldSets = $form->getFieldsets();
+
+if ($fieldSets)
+{
+	echo JHtml::_('bootstrap.startTabSet', 'myTab', array('active' => 'attrib-' . reset($fieldSets)->name));
+
+	echo JLayoutHelper::render('joomla.edit.params', $this);
+
+	echo JHtml::_('bootstrap.endTabSet');
+}
+?>
+</form>
+
+<span class="image-container">
+    <img id="media-edit-file" src="<?php echo $this->fullFilePath ?>"/>
+</span>

administrator/components/com_media/views/file/view.html.php

@@ -0,0 +1,72 @@
+<?php
+/**
+ * @package     Joomla.Administrator
+ * @subpackage  com_media
+ *
+ * @copyright   Copyright (C) 2005 - 2016 Open Source Matters, Inc. All rights reserved.
+ * @license     GNU General Public License version 2 or later; see LICENSE.txt
+ */
+
+defined('_JEXEC') or die;
+
+jimport('joomla.filesystem.file');
+
+/**
+ * View to edit an file.
+ *
+ * @todo Prototype!
+ *
+ * @since  __DEPLOY_VERSION__
+ */
+class MediaViewFile extends JViewLegacy
+{
+
+	/**
+	 * Execute and display a template script.
+	 *
+	 * @param   string  $tpl  The name of the template file to parse; automatically searches through the template paths.
+	 *
+	 * @return  mixed  A string if successful, otherwise an Error object.
+	 *
+	 * @since   __DEPLOY_VERSION__
+	 */
+	public function display($tpl = null)
+	{
+		$input = JFactory::getApplication()->input;
+
+		$this->form = $this->get('Form');
+
+		// The component params
+		$this->params = JComponentHelper::getParams('com_media');
+
+		$this->file         = $input->getString('path', null);
+		$this->fullFilePath = JUri::root() . $this->params->get('file_path', 'images') . '/' . $input->getString('path', null);
+
+		if (!$this->file && JFile::exists($this->fullFilePath))
+		{
+			// @todo error handling controller redirect files
+			throw new Exception('Image file does not exist');
+		}
+
+		$this->addToolbar();
+
+		return parent::display($tpl);
+	}
+
+	/**
+	 * Add the toolbar buttons
+	 *
+	 * @return  void
+	 *
+	 * @since   _DEPLOY_VERSION
+	 */
+	protected function addToolbar()
+	{
+		JToolbarHelper::title(JText::_('COM_MEDIA_EDIT'), 'images mediamanager');
+
+		// @todo buttons
+		JToolbarHelper::apply('file.apply');
+		JToolbarHelper::save('file.save');
+		JToolbarHelper::cancel('file.cancel');
+	}
+}

administrator/components/com_media/views/media/tmpl/default.php

@@ -21,6 +21,7 @@
 	'csrfToken'               => JSession::getFormToken(),
 	'filePath'                => $params->get('file_path', 'images'),
 	'fileBaseUrl'             => JUri::root() . $params->get('file_path', 'images'),
+	'editViewUrl'             => JUri::root() . 'administrator/index.php?option=com_media&view=file',
 	'allowedUploadExtensions' => $params->get('upload_extensions', ''),
 	'maxUploadSizeMb'         => $params->get('upload_maxsize', 10),
 );

administrator/language/en-GB/en-GB.plg_media-action_crop.ini

@@ -0,0 +1,12 @@
+; Joomla! Project
+; Copyright (C) 2005 - 2017 Open Source Matters. All rights reserved.
+; License GNU General Public License version 2 or later; see LICENSE.txt, see LICENSE.php
+; Note : All ini files need to be saved as UTF-8
+
+PLG_MEDIA-ACTION_CROP="Media Action - Crop"
+PLG_MEDIA-ACTION_CROP_LABEL="Crop"
+PLG_MEDIA-ACTION_CROP_PARAM_X="X"
+PLG_MEDIA-ACTION_CROP_PARAM_Y="Y"
+PLG_MEDIA-ACTION_CROP_PARAM_WIDTH="Width"
+PLG_MEDIA-ACTION_CROP_PARAM_HEIGHT="Height"
+PLG_MEDIA-ACTION_CROP_XML_DESCRIPTION="Adds crop functionality for images."

administrator/language/en-GB/en-GB.plg_media-action_crop.sys.ini

@@ -0,0 +1,7 @@
+; Joomla! Project
+; Copyright (C) 2005 - 2016 Open Source Matters. All rights reserved.
+; License GNU General Public License version 2 or later; see LICENSE.txt, see LICENSE.php
+; Note : All ini files need to be saved as UTF-8
+
+PLG_MEDIA-ACTION_CROP="Media Action - Crop"
+PLG_MEDIA-ACTION_CROP_XML_DESCRIPTION="Crop functionality for images."

administrator/language/en-GB/en-GB.plg_media-action_resize.ini

@@ -0,0 +1,10 @@
+; Joomla! Project
+; Copyright (C) 2005 - 2016 Open Source Matters. All rights reserved.
+; License GNU General Public License version 2 or later; see LICENSE.txt, see LICENSE.php
+; Note : All ini files need to be saved as UTF-8
+
+PLG_MEDIA-ACTION_RESIZE="Media Action - Resize"
+PLG_MEDIA-ACTION_RESIZE_LABEL="Resize"
+PLG_MEDIA-ACTION_RESIZE_PARAM_WIDTH="Width"
+PLG_MEDIA-ACTION_RESIZE_PARAM_HEIGHT="Height"
+PLG_MEDIA-ACTION_RESIZE_XML_DESCRIPTION="Resize functionality for images."

administrator/language/en-GB/en-GB.plg_media-action_resize.sys.ini

@@ -0,0 +1,7 @@
+; Joomla! Project
+; Copyright (C) 2005 - 2016 Open Source Matters. All rights reserved.
+; License GNU General Public License version 2 or later; see LICENSE.txt, see LICENSE.php
+; Note : All ini files need to be saved as UTF-8
+
+PLG_MEDIA-ACTION_RESIZE="Media Action - Resize"
+PLG_MEDIA-ACTION_RESIZE_XML_DESCRIPTION="Resize functionality for images."

administrator/language/en-GB/en-GB.plg_media-action_rotate.ini

@@ -0,0 +1,11 @@
+; Joomla! Project
+; Copyright (C) 2005 - 2017 Open Source Matters. All rights reserved.
+; License GNU General Public License version 2 or later; see LICENSE.txt, see LICENSE.php
+; Note : All ini files need to be saved as UTF-8
+
+PLG_MEDIA-ACTION_ROTATE="Media Action - Rotate"
+PLG_MEDIA-ACTION_ROTATE_LABEL="Rotate"
+PLG_MEDIA-ACTION_ROTATE_PARAM_DIRECTION="Direction"
+PLG_MEDIA-ACTION_ROTATE_PARAM_DIRECTION_RIGHT="Right"
+PLG_MEDIA-ACTION_ROTATE_PARAM_DIRECTION_LEFT="Left"
+PLG_MEDIA-ACTION_ROTATE_XML_DESCRIPTION="Adds rotate functionality for images."

administrator/language/en-GB/en-GB.plg_media-action_rotate.sys.ini

@@ -0,0 +1,7 @@
+; Joomla! Project
+; Copyright (C) 2005 - 2016 Open Source Matters. All rights reserved.
+; License GNU General Public License version 2 or later; see LICENSE.txt, see LICENSE.php
+; Note : All ini files need to be saved as UTF-8
+
+PLG_MEDIA-ACTION_ROTATE="Media Action - Rotate"
+PLG_MEDIA-ACTION_ROTATE_XML_DESCRIPTION="Adds rotate functionality for images."

libraries/cms/plugin/helper.php

@@ -225,7 +225,7 @@ protected static function import($plugin, $autocreate = true, DispatcherInterfac
 						$dispatcher = JFactory::getApplication()->getDispatcher();
 					}
 
-					$className = 'Plg' . $plugin->type . $plugin->name;
+					$className = 'Plg' . str_replace('-', '', $plugin->type) . $plugin->name;
 
 					if (class_exists($className))
 					{