[FEATURE] Responsive website preview 68/23168/2
authorFelix Kopp <felix-source@phorax.com>
Sat, 17 Aug 2013 23:19:54 +0000 (01:19 +0200)
committerChristian Kuhn <lolli@schwarzbu.ch>
Sun, 18 Aug 2013 21:47:51 +0000 (23:47 +0200)
Bring responsive adaption for preview frame in EXT: viewpage
based on common device widths.

Change-Id: I8e1df6243436d5b76b17ae6364f63c2a93da07c1
Resolves: #51148
Releases: 6.2
Reviewed-on: https://review.typo3.org/23168
Reviewed-by: Philipp Gampe
Tested-by: Philipp Gampe
Tested-by: Stefan Neufeind
Reviewed-by: Christian Kuhn
Tested-by: Christian Kuhn
typo3/sysext/viewpage/Classes/Controller/ViewModuleController.php
typo3/sysext/viewpage/Resources/Private/Language/locallang.xlf [new file with mode: 0644]
typo3/sysext/viewpage/Resources/Private/Layouts/DocHeader.html
typo3/sysext/viewpage/Resources/Public/JavaScript/common.js [new file with mode: 0644]

index d79736a..f6f75e4 100644 (file)
@@ -33,13 +33,24 @@ namespace TYPO3\CMS\Viewpage\Controller;
  */
 class ViewModuleController extends \TYPO3\CMS\Extbase\Mvc\Controller\ActionController {
 
+       public function __construct() {
+               parent::__construct();
+
+               $GLOBALS['LANG']->includeLLFile('EXT:viewpage/Resources/Private/Language/locallang.xlf');
+       }
+
        /**
         * Show selected page from pagetree in iframe
         *
         * @return void
         */
        public function showAction() {
-               $this->view->assign('url', $this->getTargetUrl());
+               $this->view->assignMultiple(
+                       array(
+                               'widths' => $this->getPreviewFrameWidths(),
+                               'url' => $this->getTargetUrl()
+                       )
+               );
        }
 
        /**
@@ -122,7 +133,27 @@ class ViewModuleController extends \TYPO3\CMS\Extbase\Mvc\Controller\ActionContr
                return $domain;
        }
 
-}
+       /**
+        * Get available widths for preview frame
+        *
+        * @return array
+        */
+       protected function getPreviewFrameWidths() {
+               return array(
+                       '1280' => '1280px ' . $GLOBALS['LANG']->getLL('computer'),
+                       '1024' => '1024px ' . $GLOBALS['LANG']->getLL('tablet'),
+                       '960' => '960px ' . $GLOBALS['LANG']->getLL('mobile'),
+                       '800' => '800px ' . $GLOBALS['LANG']->getLL('computer'),
+                       '768' => '768px ' . $GLOBALS['LANG']->getLL('tablet'),
+                       '600' => '600px ' . $GLOBALS['LANG']->getLL('tablet'),
+                       '640' => '640px ' . $GLOBALS['LANG']->getLL('mobile'),
+                       '480' => '480px ' . $GLOBALS['LANG']->getLL('mobile'),
+                       '400' => '400px ' . $GLOBALS['LANG']->getLL('mobile'),
+                       '360' => '360px ' . $GLOBALS['LANG']->getLL('mobile'),
+                       '300' => '300px ' . $GLOBALS['LANG']->getLL('mobile')
+               );
+       }
 
+}
 
 ?>
\ No newline at end of file
diff --git a/typo3/sysext/viewpage/Resources/Private/Language/locallang.xlf b/typo3/sysext/viewpage/Resources/Private/Language/locallang.xlf
new file mode 100644 (file)
index 0000000..b79df04
--- /dev/null
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<xliff version="1.0">
+       <file source-language="en" datatype="plaintext" original="messages" date="2011-10-17T20:22:37Z" product-name="viewpage">
+               <header/>
+               <body>
+                       <trans-unit id="width" xml:space="preserve">
+                               <source>Width</source>
+                       </trans-unit>
+                       <trans-unit id="tablet" xml:space="preserve">
+                               <source>Tablet</source>
+                       </trans-unit>
+                       <trans-unit id="mobile" xml:space="preserve">
+                               <source>Mobile</source>
+                       </trans-unit>
+                       <trans-unit id="computer" xml:space="preserve">
+                               <source>Computer</source>
+                       </trans-unit>
+               </body>
+       </file>
+</xliff>
index e743c31..5eab5a5 100644 (file)
@@ -1,13 +1,18 @@
-<f:be.container loadExtJs="1">
-       <style type="text/css">
-               .typo3-inner-docbody {
-                       height: 100%;
-               }
-       </style>
-
+<f:be.container
+       loadJQuery="TRUE"
+       includeJsFiles="{
+               0:'{f:uri.resource(path:\'JavaScript/common.js\')}'
+       }"
+>
        <div class="typo3-fullDoc">
                <div id="typo3-docheader">
                        <div class="typo3-docheader-functions">
+                               <form>
+                                       <label for="width">
+                                               <f:translate key="width" />
+                                       </label>
+                                       <f:form.select options="{widths}" id="width" name="width" />
+                               </form>
                        </div>
                        <div class="typo3-docheader-buttons">
                                <div class="left">
diff --git a/typo3/sysext/viewpage/Resources/Public/JavaScript/common.js b/typo3/sysext/viewpage/Resources/Public/JavaScript/common.js
new file mode 100644 (file)
index 0000000..b3f6e63
--- /dev/null
@@ -0,0 +1,12 @@
+/**
+ * Add event to width selector
+ */
+jQuery(document).ready(function($) {
+       jQuery('#width').on('change', function() {
+               var widthInPixels = jQuery('#width :selected').val();
+
+               jQuery('#tx_viewpage_iframe').animate({
+                       'width': widthInPixels
+               });
+       });
+});
\ No newline at end of file