Add a second image polyfill script (see #7369)

Author: leofeyer

assets/respimage/0.9.6/respimage.js

@@ -31,6 +31,7 @@
 define('HIGHLIGHTER', '3.0.83');
 define('HTML5SHIV', '3.7.0');
 define('PICTUREFILL', '2.1.0');
+define('RESPIMAGE', '0.9.6');
 define('SWIPE', '2.0');
 define('JQUERY', '1.11.0');
 define('JQUERY_UI', '1.10.4');

assets/respimage/0.9.6/respimage.min.js

@@ -4,6 +4,9 @@ Contao Open Source CMS changelog
 Version 3.4.0-beta1 (2014-10-03)
 --------------------------------
 
+### Improved
+Add a second image polyfill script (see #7369).
+
 ### Fixed
 Handle disabled modules in the module loader.
 

system/config/constants.php

@@ -452,6 +452,7 @@
 	'HIGHLIGHTER'  => '3.0.83',
 	'HTML5SHIV'    => '3.7.0',
 	'PICTUREFILL'  => '2.1.0',
+	'RESPIMAGE'    => '0.9.6',
 	'SWIPE'        => '2.0',
 	'JQUERY'       => '1.11.0',
 	'JQUERY_UI'    => '1.10.4',

system/docs/CHANGELOG.md

@@ -99,7 +99,7 @@
 	'palettes' => array
 	(
 		'__selector__'                => array('rows', 'cols', 'addJQuery', 'addMooTools', 'static'),
-		'default'                     => '{title_legend},name;{header_legend},rows;{column_legend},cols;{sections_legend:hide},sections,sPosition;{webfonts_legend:hide},webfonts;{style_legend},framework,stylesheet,external,loadingOrder;{feed_legend:hide},newsfeeds,calendarfeeds;{modules_legend},modules;{expert_legend:hide},template,doctype,viewport,titleTag,cssClass,onload,head;{jquery_legend},addJQuery;{mootools_legend},addMooTools;{script_legend:hide},addPicturefill,analytics,script;{static_legend},static'
+		'default'                     => '{title_legend},name;{header_legend},rows;{column_legend},cols;{sections_legend:hide},sections,sPosition;{webfonts_legend:hide},webfonts;{style_legend},framework,stylesheet,external,loadingOrder;{picturefill_legend:hide},picturefill;{feed_legend:hide},newsfeeds,calendarfeeds;{modules_legend},modules;{expert_legend:hide},template,doctype,viewport,titleTag,cssClass,onload,head;{jquery_legend},addJQuery;{mootools_legend},addMooTools;{script_legend:hide},analytics,script;{static_legend},static'
 	),
 
 	// Subpalettes
@@ -333,12 +333,14 @@
 			'eval'                    => array('decodeEntities'=>true, 'maxlength'=>255, 'tl_class'=>'w50'),
 			'sql'                     => "varchar(255) NOT NULL default ''"
 		),
-		'addPicturefill' => array
+		'picturefill' => array
 		(
-			'label'                   => &$GLOBALS['TL_LANG']['tl_layout']['addPicturefill'],
+			'label'                   => &$GLOBALS['TL_LANG']['tl_layout']['picturefill'],
 			'exclude'                 => true,
-			'inputType'               => 'checkbox',
-			'sql'                     => "char(1) NOT NULL default ''"
+			'inputType'               => 'select',
+			'options'                 => array('picturefill.js', 'respimage.js'),
+			'eval'                    => array('includeBlankOption'=>true),
+			'sql'                     => "varchar(16) NOT NULL default ''"
 		),
 		'viewport' => array
 		(

system/modules/core/config/config.php

@@ -284,11 +284,11 @@
       <trans-unit id="tl_layout.mootools.1">
         <source>Here you can select one or more MooTools templates.</source>
       </trans-unit>
-      <trans-unit id="tl_layout.addPicturefill.0">
-        <source>Include picturefill.js</source>
+      <trans-unit id="tl_layout.picturefill.0">
+        <source>Image polyfill</source>
       </trans-unit>
-      <trans-unit id="tl_layout.addPicturefill.1">
-        <source>Include the picturefill.js script (responsive images).</source>
+      <trans-unit id="tl_layout.picturefill.1">
+        <source>Here you can select a responsive images polyfill.</source>
       </trans-unit>
       <trans-unit id="tl_layout.analytics.0">
         <source>Analytics templates</source>
@@ -338,6 +338,9 @@
       <trans-unit id="tl_layout.style_legend">
         <source>Style sheets</source>
       </trans-unit>
+      <trans-unit id="tl_layout.picturefill_legend">
+        <source>Responsive images</source>
+      </trans-unit>
       <trans-unit id="tl_layout.feed_legend">
         <source>RSS/Atom feeds</source>
       </trans-unit>

system/modules/core/dca/tl_layout.php

@@ -428,9 +428,13 @@ protected function createTemplate($objPage, $objLayout)
 		}
 
 		// Picturefill
-		if ($objLayout->addPicturefill)
+		if ($objLayout->picturefill == 'respimage.js')
 		{
-			$GLOBALS['TL_JAVASCRIPT'][] = 'assets/picturefill/' . $GLOBALS['TL_ASSETS']['PICTUREFILL'] . '/picturefill.min.js|static';
+			$GLOBALS['TL_JAVASCRIPT'][] = 'assets/respimage/' . $GLOBALS['TL_ASSETS']['RESPIMAGE'] . '/respimage.min.js|static|async';
+		}
+		elseif ($objLayout->picturefill == 'picturefill.js')
+		{
+			$GLOBALS['TL_JAVASCRIPT'][] = 'assets/picturefill/' . $GLOBALS['TL_ASSETS']['PICTUREFILL'] . '/picturefill.min.js|static|async';
 		}
 
 		// Check whether TL_APPEND_JS exists (see #4890)

system/modules/core/languages/en/tl_layout.xlf

@@ -16,8 +16,10 @@
 
 <?php if ($this->sources || $this->img['src'] !== $this->img['srcset']): ?>
   <script>
-    window.picturefill && window.picturefill({
-      elements: [document.images[document.images.length - 1]]
-    });
+    (function(p) {
+      p && p({
+        elements: [document.images[document.images.length - 1]]
+      });
+    })(window.picturefill || window.respimage);
   </script>
 <?php endif; ?>

system/modules/core/pages/PageRegular.php

@@ -17,9 +17,11 @@
 <?php if ($this->sources || $this->img['src'] !== $this->img['srcset']): ?>
   <script type="text/javascript">
     /* <![CDATA[ */
-    window.picturefill && window.picturefill({
-      elements: [document.images[document.images.length - 1]]
-    });
+    (function(p) {
+      p && p({
+        elements: [document.images[document.images.length - 1]]
+      });
+    })(window.picturefill || window.respimage);
     /* ]]> */
   </script>
 <?php endif; ?>