Merge pull request #9 from meanbee/allow-custom-template

Allow developers to customise the link template in their themes
meanbee · Apr 16, 2018 · e701e8f · e701e8f
2 parents 470dcce + d7c2aa2
commit e701e8f
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 19 deletions.
diff --git a/README.md b/README.md
@@ -20,19 +20,33 @@ docker-compose up -d
 
 
 ## Usage
+
+To add assets to the block, provide the `assets` argument:
+
 ```
 <referenceBlock name="head.csspreload">
     <arguments>
         <argument name="assets" xsi:type="array">
             <item name="unique_name" xsi:type="array">
                 <item name="path" xsi:type="string">css/filename.css</item>
-                    <item name="attributes" xsi:type="array">
-                        <item name="name" xsi:type="string">attribute</item>
-                        <item name="value" xsi:type="string">value</item>
-                    </item>
+                <item name="attributes" xsi:type="array">
+                    <item name="name" xsi:type="string">attribute</item>
+                    <item name="value" xsi:type="string">value</item>
                 </item>
             </item>
         </argument>
     </arguments>
 </referenceBlock>
 ```
+
+To modify the template of the generated `<link />` tags, provide a `link_template` argument, e.g.:
+
+```
+<referenceBlock name="head.csspreload">
+    <arguments>
+        <argument name="link_template" xsi:type="string"><![CDATA[<link rel="preload" as="style" href=":path:" onload="this.rel='stylesheet'" :attributes: />]]></argument>
+    </arguments>
+</referenceBlock>
+```
+
+There are two variables that will be substituted: `:path:`, which will be replaced by the asset path, and `:attributes:` that will contain your `attributes` of your `assets` as HTML attributes.
diff --git a/src/Block/Head/Preload.php b/src/Block/Head/Preload.php
@@ -2,18 +2,22 @@
 
 namespace Meanbee\CSSPreload\Block\Head;
 
+/**
+ * @method array getAssets()
+ * @method bool hasLinkTemplate()
+ * @method void setLinkTemplate(string $template)
+ * @method string getLinkTemplate()
+ */
 class Preload extends \Magento\Framework\View\Element\AbstractBlock
 {
-    protected $_template;
+    const PATTERN_ATTRS = ':attributes:';
+    const PATTERN_URL   = ':path:';
 
     public function __construct(
         \Magento\Framework\View\Element\Context $context,
-        string $template,
         array $data = []
     ) {
         parent::__construct($context, $data);
-
-        $this->_template = $template;
     }
 
     /**
@@ -26,16 +30,33 @@ protected function _toHtml() {
         $assets = $this->getAssets();
 
         if (empty($assets)) {
-            return;
+            return "\n<!-- CSS Preload: No assets provided -->\n";
+        }
+
+        if (!$this->hasLinkTemplate()) {
+            return "\n<!-- CSS Preload: No template defined -->\n";
         }
 
         foreach ($assets as $asset) {
             $attributesHtml = sprintf('%s="%s"', $asset['attributes']['name'], $asset['attributes']['value']);
             $assetUrl = $this->_assetRepo->getUrl($asset['path']);
-            $html .= sprintf($this->_template, $assetUrl, $attributesHtml);
+            $html .= $this->renderLinkTemplate($assetUrl, $attributesHtml);
         }
 
         return $html;
     }
 
+    /**
+     * @param string $assetUrl
+     * @param string $additionalAttributes
+     * @return string
+     */
+    private function renderLinkTemplate($assetUrl, $additionalAttributes)
+    {
+        return str_replace(
+            [self::PATTERN_URL, self::PATTERN_ATTRS],
+            [$assetUrl, $additionalAttributes],
+            $this->getLinkTemplate()
+        );
+    }
 }
diff --git a/src/etc/frontend/di.xml b/src/etc/frontend/di.xml
diff --git a/src/view/frontend/layout/default.xml b/src/view/frontend/layout/default.xml
@@ -2,7 +2,11 @@
 <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
     <body>
         <referenceBlock name="head.additional">
-            <block class="Meanbee\CSSPreload\Block\Head\Preload" name="head.csspreload" />
+            <block class="Meanbee\CSSPreload\Block\Head\Preload" name="head.csspreload">
+                <arguments>
+                    <argument name="link_template" xsi:type="string"><![CDATA[<link rel="preload" as="style" href=":path:" onload="this.rel='stylesheet'" :attributes: />]]></argument>
+                </arguments>
+            </block>
         </referenceBlock>
     </body>
 </page>