Use JText to translate strings

administrator/components/com_media/resources/scripts/components/modals/create-folder-modal.vue

@@ -1,17 +1,17 @@
 <template>
     <media-modal v-if="$store.state.showCreateFolderModal" :size="'sm'" @close="close()">
-        <h3 slot="header" class="modal-title">Create a new folder</h3>
+        <h3 slot="header" class="modal-title">{{ translate('COM_MEDIA_CREATE_NEW_FOLDER') }}</h3>
         <div slot="body">
             <form class="form">
                 <div class="form-group">
-                    <label for="folder">Folder</label>
+                    <label for="folder">{{ translate('COM_MEDIA_FOLDER') }}</label>
                     <input type="text" id="folder" class="form-control" placeholder="Folder" v-model="folder">
                 </div>
             </form>
         </div>
         <div slot="footer">
-            <button class="btn btn-link" @click="close()">Cancel</button>
-            <button class="btn btn-success" @click="save()">Save</button>
+            <button class="btn btn-link" @click="close()">{{ translate('JCANCEL') }}</button>
+            <button class="btn btn-success" @click="save()">{{ translate('JAPPLY') }}</button>
         </div>
     </media-modal>
 </template>

administrator/components/com_media/resources/scripts/components/toolbar/toolbar.vue

@@ -3,17 +3,17 @@
         <div class="media-toolbar-create">
             <div class="btn-group">
                 <button class="btn btn-sm btn-success">
-                    <span class="icon-apply icon-white"></span> New
+                    <span class="icon-apply icon-white"></span> {{ translate('COM_MEDIA_NEW') }}
                 </button>
                 <button type="button" class="btn btn-sm btn-success dropdown-toggle dropdown-toggle-split"
                         data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
                 <ul class="dropdown-menu">
                     <li class="dropdown-item">
-                        <a href="#" @click.prevent="showCreateFolderModal()">Create Folder</a>
+                        <a href="#" @click.prevent="showCreateFolderModal()">{{ translate('COM_MEDIA_CREATE_FOLDER') }}</a>
                     </li>
                     <li class="divider"></li>
-                    <li class="dropdown-item"><a href="#">Upload File</a></li>
-                    <li class="dropdown-item"><a href="#">Upload Folder</a></li>
+                    <li class="dropdown-item"><a href="#">{{ translate('COM_MEDIA_UPLOAD_FILE') }}</a></li>
+                    <li class="dropdown-item"><a href="#">{{ translate('COM_MEDIA_UPLOAD_FOLDER') }}</a></li>
                 </ul>
             </div>
         </div>

administrator/components/com_media/resources/scripts/mediamanager.js

@@ -8,7 +8,11 @@ import Browser from "./components/browser/browser.vue";
 import BrowserItem from "./components/browser/items/item";
 import MediaModal from "./components/modals/modal.vue";
 import CreateFolderModal from "./components/modals/create-folder-modal.vue";
-import store from './store/store'
+import Translate from "./plugins/translate";
+import store from './store/store';
+
+// Add the plugins
+Vue.use(Translate);
 
 // Register the vue components
 Vue.component('media-tree', Tree);

administrator/components/com_media/resources/scripts/plugins/translate.js

@@ -0,0 +1,17 @@
+/**
+ * Translate plugin
+ */
+
+let Translate = {};
+
+Translate.install = function (Vue, options) {
+	Vue.mixin({
+		methods: {
+			translate: function (key) {
+				 return Joomla.JText._(key, key);
+			}
+		}
+	})
+}
+
+export default Translate;

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

@@ -25,12 +25,11 @@
 $doc->addScriptOptions('com_media', $config);
 
 // Populate the language
-// TODO use JText for all language strings used by the js application
+$this->loadTemplate('texts');
 
 // Add javascripts
 JHtml::_('script', 'media/com_media/js/mediamanager.js');
 
-
 // Add stylesheets
 JHtml::_('stylesheet', 'media/com_media/css/mediamanager.css');
 ?>

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

@@ -0,0 +1,18 @@
+<?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;
+
+JText::script('COM_MEDIA_CREATE_FOLDER', true);
+JText::script('COM_MEDIA_CREATE_NEW_FOLDER', true);
+JText::script('COM_MEDIA_FOLDER', true);
+JText::script('COM_MEDIA_NEW', true);
+JText::script('COM_MEDIA_UPLOAD_FILE', true);
+JText::script('COM_MEDIA_UPLOAD_FOLDER', true);
+JText::script('JCANCEL', true);
+JText::script('JAPPLY', true);

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

@@ -8,12 +8,14 @@
  */
 defined('_JEXEC') or die;
 
+use Joomla\Cms\View\View;
+
 /**
  * Media List View
  *
  * @since  __DEPLOY_VERSION__
  */
-class MediaViewMedia extends JViewLegacy
+class MediaViewMedia extends View
 {
 	/**
 	 * Execute and display a template script.

administrator/language/en-GB/en-GB.com_media.ini

@@ -71,6 +71,7 @@ COM_MEDIA_INSERT="Insert"
 COM_MEDIA_INVALID_REQUEST="Invalid Request"
 COM_MEDIA_MEDIA="Media"
 COM_MEDIA_NAME="Image Name"
+COM_MEDIA_NEW="New"
 COM_MEDIA_NO_IMAGES_FOUND="No Images Found"
 COM_MEDIA_NOT_SET="Not Set"
 COM_MEDIA_PIXEL_DIMENSIONS="Dimensions (px)"
@@ -80,6 +81,7 @@ COM_MEDIA_THUMBNAIL_VIEW="Thumbnail View"
 COM_MEDIA_TITLE="Image Title"
 COM_MEDIA_UPLOAD_COMPLETE="Upload Complete: %s"
 COM_MEDIA_UPLOAD_FILE="Upload file"
+COM_MEDIA_UPLOAD_FOLDER="Upload folder"
 COM_MEDIA_UPLOAD_SUCCESSFUL="Upload Successful"
 COM_MEDIA_UPLOAD="Upload"
 COM_MEDIA_UP="Up"