Merge pull request #5 from MicaelRodrigues/master

Improved sizing options
kalfheim · Jun 4, 2016 · c266a60 · c266a60
2 parents e8f23e2 + 913c1f0
commit c266a60
Show file tree

Hide file tree

Showing 24 changed files with 148 additions and 63 deletions.
diff --git a/README.md b/README.md
@@ -30,6 +30,9 @@ This plugin ships with a settings page. Go to `Settings` and you will see a menu
 
 By default every component will be enabled. This is in most cases unnecessary. Instead, it is recommended to only enable the components you will be needing. To do so, set the `Mode` to either `Use all except the following Embeds:` or `Use only the following Embeds:` -- then specify a comma separated list of component names in the text box under.
 
+You can also specify the allowed CSS units (in addition to _auto_ and _%_) to define `Width/Height` properties on the applicable embeds.
+This is particularly useful if you want to add some '_responsiveness_' to non-responsive embed.
+
 ## Supported Providers
 
 - [CodePen](#codepen)
@@ -56,7 +59,7 @@ Property              | Description
 --------------------- | ---------------------
 **Pen**               | The Pen ID or the full URL copied from the browser address bar. Example: `https://codepen.io/stessyco/pen/noDCi`
 **Default Tab**       | Select which tab shows up by default. **Options:** `Result` `HTML` `JS` `CSS`
-**Widget Height**     | Height of the widget specified in pixels. **Default:** 268
+**Widget Height**     | Height of the widget specified in elegible CSS length value. **Default:** 268
 
 ### Flickr
 
@@ -65,8 +68,8 @@ Embed any Flickr URL. This includes links to photos, albums and user profiles.
 Property              | Description
 --------------------- | ---------------------
 **URL**               | The full Flickr.com URL.
-**Widget Width**      | Width of the widget specified in pixels. **Default:** 640
-**Widget Height**     | Height of the widget specified in pixels. **Default:** 426
+**Widget Width**      | Width of the widget specified in elegible CSS length value. **Default:** 640
+**Widget Height**     | Height of the widget specified in elegible CSS length value. **Default:** 426
 **Responsiveness**    | [Click here for details.](#responsiveness) **Default:** False
 
 ### GitHub Gist
@@ -81,8 +84,8 @@ Property              | Description
 --------------------- | ---------------------
 **Place**             | The place you want to display on the Map. Accepts any Google Maps search query. Eg: `Oslo, Norway`
 **Map Type**          | Type of map to display. **Options:** `Roadmap` `Satellite`
-**Widget Width**      | Width of the widget specified in pixels. **Default:** 600
-**Widget Height**     | Height of the widget specified in pixels. **Default:** 450
+**Widget Width**      | Width of the widget specified in elegible CSS length value. **Default:** 600
+**Widget Height**     | Height of the widget specified in elegible CSS length value. **Default:** 450
 
 > **Important note:** The Google Maps component requires a API key. Get your key from [Google Developers](https://developers.google.com/maps/documentation/embed/guide#api_key) and register it in the settings page.
 
@@ -117,7 +120,7 @@ Property              | Description
 **jsFiddle**          | The ID or full URL of the fiddle you wish to display. Eg: `https://jsfiddle.net/id/`
 **Tabs**              | Remove or rearrange tabs. **Default:** `js,resources,html,css,result`
 **Skin**              | Which skin should be used. **Options**: `Light` `Presentation`
-**Height**            | Height of the widget specified in pixels. **Default:** 300
+**Height**            | Height of the widget specified in elegible CSS length value. **Default:** 300
 
 ### Kickstarter
 
@@ -138,7 +141,7 @@ Property              | Description
 --------------------- | ---------------------
 **URL**               | Full SoundCloud URL copied from the browser address bar.
 **Auto Play**         | Play begin playback when the widget loads. **Default:** False
-**Widget Height**     | Height of the widget specified in pixels. **Default**: 166
+**Widget Height**     | Height of the widget specified in elegible CSS length value. **Default**: 166
 
 > **Note:** When embedding a playlist or user profile, you must increase the `Widget Height` to display the playlist.
 
@@ -151,6 +154,8 @@ Embed a Spotify Play Button.
 Property              | Description
 --------------------- | ---------------------
 **Track**             | The Spotify URI. Right click on a track -> `Copy Spotify URI`. Also accepts the Spotify HTTP URL.
+**Widget Width**      | Width of the widget specified in elegible CSS length value. **Default**: 300
+**Widget Height**     | Height of the widget specified in elegible CSS length value. **Default**: 380
 
 ### Twitter
 

diff --git a/components/CodePen.php b/components/CodePen.php
@@ -2,6 +2,8 @@
 namespace Krisawzm\Embed\Components;
 
 use Cms\Classes\ComponentBase;
+use Krisawzm\Embed\Models\Settings;
+use Lang;
 
 class CodePen extends ComponentBase
 {
@@ -21,14 +23,15 @@ public function componentDetails()
      */
     public function defineProperties()
     {
+        $css_units = Settings::get('valid_css_units', 'px');
         return [
             'id' => [
                 'title'             => 'krisawzm.embed::codepen.properties.id.title',
                 'description'       => 'krisawzm.embed::codepen.properties.id.description',
                 'default'           => 'noDCi',
                 'type'              => 'string',
                 'validationPattern' => '^.*$',
-                'validationMessage' => 'krisawzm.embed::codepen.properties.id.validationMessage',
+                'validationMessage' => Lang::get('krisawzm.embed::codepen.properties.id.validationMessage'),
             ],
 
             'defaultTab' => [
@@ -44,8 +47,8 @@ public function defineProperties()
                 'description'       => 'krisawzm.embed::common.properties.height.description',
                 'default'           => '268',
                 'type'              => 'string',
-                'validationPattern' => '^[0-9]+$',
-                'validationMessage' => 'krisawzm.embed::common.properties.height.validationMessage',
+                'validationPattern' => '^(auto|0)$|^\d+(\.\d+)?(%|'.$css_units.')?$',
+                'validationMessage' => Lang::get('krisawzm.embed::common.properties.height.validationMessage'),
             ],
         ];
     }

diff --git a/components/Flickr.php b/components/Flickr.php
@@ -2,6 +2,8 @@
 namespace Krisawzm\Embed\Components;
 
 use Cms\Classes\ComponentBase;
+use Krisawzm\Embed\Models\Settings;
+use Lang;
 
 class Flickr extends ComponentBase
 {
@@ -21,32 +23,33 @@ public function componentDetails()
      */
     public function defineProperties()
     {
+        $css_units = Settings::get('valid_css_units', 'px');
         return [
             'url' => [
                 'title'             => 'krisawzm.embed::flickr.properties.url.title',
                 'description'       => 'krisawzm.embed::flickr.properties.url.description',
                 'default'           => 'https://www.flickr.com/photos/tobeelynn/3605080317/',
                 'type'              => 'string',
                 'validationPattern' => '^.*$',
-                'validationMessage' => 'krisawzm.embed::flickr.properties.url.validationMessage',
+                'validationMessage' => Lang::get('krisawzm.embed::flickr.properties.url.validationMessage'),
             ],
 
             'width' => [
                 'title'             => 'krisawzm.embed::common.properties.width.title',
                 'description'       => 'krisawzm.embed::common.properties.width.description',
                 'default'           => '640',
                 'type'              => 'string',
-                'validationPattern' => '^[0-9]+$',
-                'validationMessage' => 'Wkrisawzm.embed::common.properties.width.validationMessage',
+                'validationPattern' => '^(auto|0)$|^\d+(\.\d+)?(%|'.$css_units.')?$',
+                'validationMessage' => Lang::get('krisawzm.embed::common.properties.width.validationMessage'),
             ],
 
             'height' => [
                 'title'             => 'krisawzm.embed::common.properties.height.title',
                 'description'       => 'krisawzm.embed::common.properties.height.description',
                 'default'           => '426',
                 'type'              => 'string',
-                'validationPattern' => '^[0-9]+$',
-                'validationMessage' => 'krisawzm.embed::common.properties.height.validationMessage',
+                'validationPattern' => '^(auto|0)$|^\d+(\.\d+)?(%|'.$css_units.')?$',
+                'validationMessage' => Lang::get('krisawzm.embed::common.properties.height.validationMessage'),
             ],
 
             'responsive' => [

diff --git a/components/GitHub.php b/components/GitHub.php
@@ -2,6 +2,7 @@
 namespace Krisawzm\Embed\Components;
 
 use Cms\Classes\ComponentBase;
+use Lang;
 
 class GitHub extends ComponentBase
 {
@@ -28,7 +29,7 @@ public function defineProperties()
                 'default'           => 'krisawzm/0db0766c46a465bb40e8',
                 'type'              => 'string',
                 'validationPattern' => '^.*$',
-                'validationMessage' => 'krisawzm.embed::github.properties.id.validationMessage',
+                'validationMessage' => Lang::get('krisawzm.embed::github.properties.id.validationMessage'),
             ],
         ];
     }

diff --git a/components/GoogleMaps.php b/components/GoogleMaps.php
@@ -3,6 +3,7 @@
 
 use Cms\Classes\ComponentBase;
 use Krisawzm\Embed\Models\Settings;
+use Lang;
 
 class GoogleMaps extends ComponentBase
 {
@@ -22,14 +23,16 @@ public function componentDetails()
      */
     public function defineProperties()
     {
+        $css_units = Settings::get('valid_css_units', 'px');
+
         return [
             'q' => [
                 'title'             => 'krisawzm.embed::googlemaps.properties.q.title',
                 'description'       => 'krisawzm.embed::googlemaps.properties.q.description',
                 'default'           => 'Oslo, Norway',
                 'type'              => 'string',
                 'validationPattern' => '^.*$',
-                'validationMessage' => 'krisawzm.embed::googlemaps.properties.q.validationMessage',
+                'validationMessage' => Lang::get('krisawzm.embed::googlemaps.properties.q.validationMessage'),
             ],
 
             'mapType' => [
@@ -45,17 +48,17 @@ public function defineProperties()
                 'description'       => 'krisawzm.embed::common.properties.width.description',
                 'default'           => '600',
                 'type'              => 'string',
-                'validationPattern' => '^[0-9]+$',
-                'validationMessage' => 'krisawzm.embed::common.properties.width.validationMessage',
+                'validationPattern' => '^(auto|0)$|^\d+(\.\d+)?(%|'.$css_units.')?$',
+                'validationMessage' => Lang::get('krisawzm.embed::common.properties.width.validationMessage'),
             ],
 
             'height' => [
                 'title'             => 'krisawzm.embed::common.properties.height.title',
                 'description'       => 'krisawzm.embed::common.properties.height.description',
                 'default'           => '450',
                 'type'              => 'string',
-                'validationPattern' => '^[0-9]+$',
-                'validationMessage' => 'krisawzm.embed::common.properties.height.validationMessage',
+                'validationPattern' => '^(auto|0)$|^\d+(\.\d+)?(%|'.$css_units.')?$',
+                'validationMessage' => Lang::get('krisawzm.embed::common.properties.height.validationMessage'),
             ],
 
             'responsive' => [

diff --git a/components/GooglePlus.php b/components/GooglePlus.php
@@ -2,6 +2,7 @@
 namespace Krisawzm\Embed\Components;
 
 use Cms\Classes\ComponentBase;
+use Lang;
 
 class GooglePlus extends ComponentBase
 {
@@ -28,7 +29,7 @@ public function defineProperties()
                 'default'           => 'https://',
                 'type'              => 'string',
                 'validationPattern' => '^.*$',
-                'validationMessage' => 'krisawzm.embed::googleplus.properties.link.validationMessage',
+                'validationMessage' => Lang::get('krisawzm.embed::googleplus.properties.link.validationMessage'),
             ],
         ];
     }

diff --git a/components/Imgur.php b/components/Imgur.php
@@ -2,6 +2,7 @@
 namespace Krisawzm\Embed\Components;
 
 use Cms\Classes\ComponentBase;
+use Lang;
 
 class Imgur extends ComponentBase
 {
@@ -28,7 +29,7 @@ public function defineProperties()
                 'default'           => 'NLitg',
                 'type'              => 'string',
                 'validationPattern' => '^.*$',
-                'validationMessage' => 'krisawzm.embed::imgur.properties.id.validationMessage',
+                'validationMessage' => Lang::get('krisawzm.embed::imgur.properties.id.validationMessage'),
             ],
 
             'hideDetails' => [

diff --git a/components/Instagram.php b/components/Instagram.php
@@ -2,6 +2,8 @@
 namespace Krisawzm\Embed\Components;
 
 use Cms\Classes\ComponentBase;
+use Krisawzm\Embed\Models\Settings;
+use Lang;
 
 class Instagram extends ComponentBase
 {
@@ -21,23 +23,25 @@ public function componentDetails()
      */
     public function defineProperties()
     {
+        $css_units = Settings::get('valid_css_units', 'px');
+
         return [
             'id' => [
                 'title'             => 'krisawzm.embed::instagram.properties.id.title',
                 'description'       => 'krisawzm.embed::instagram.properties.id.description',
                 'default'           => 'tWdDeNImrp',
                 'type'              => 'string',
                 'validationPattern' => '^.*$',
-                'validationMessage' => 'krisawzm.embed::instagram.properties.id.validationMessage',
+                'validationMessage' => Lang::get('krisawzm.embed::instagram.properties.id.validationMessage'),
             ],
 
             'width' => [
                 'title'             => 'krisawzm.embed::common.properties.width.title',
                 'description'       => 'krisawzm.embed::common.properties.width.description',
                 'default'           => '350',
                 'type'              => 'string',
-                'validationPattern' => '^[0-9]+$',
-                'validationMessage' => 'krisawzm.embed::common.properties.width.validationMessage',
+                'validationPattern' => '^(auto|0)$|^\d+(\.\d+)?(%|'.$css_units.')?$',
+                'validationMessage' => Lang::get('krisawzm.embed::common.properties.width.validationMessage'),
             ],
 
             'caption' => [

diff --git a/components/JsFiddle.php b/components/JsFiddle.php
@@ -2,6 +2,8 @@
 namespace Krisawzm\Embed\Components;
 
 use Cms\Classes\ComponentBase;
+use Krisawzm\Embed\Models\Settings;
+use Lang;
 
 class JsFiddle extends ComponentBase
 {
@@ -21,14 +23,15 @@ public function componentDetails()
      */
     public function defineProperties()
     {
+        $css_units = Settings::get('valid_css_units', 'px');
         return [
             'id' => [
                 'title'             => 'krisawzm.embed::jsfiddle.properties.id.title',
                 'description'       => 'krisawzm.embed::jsfiddle.properties.id.description',
                 'default'           => 'dwqujux4',
                 'type'              => 'string',
                 'validationPattern' => '^.*$',
-                'validationMessage' => 'krisawzm.embed::jsfiddle.properties.id.validationMessage',
+                'validationMessage' => Lang::get('krisawzm.embed::jsfiddle.properties.id.validationMessage'),
             ],
 
             'tabs' => [
@@ -37,7 +40,7 @@ public function defineProperties()
                 'default'           => 'js,resources,html,css,result',
                 'type'              => 'string',
                 'validationPattern' => '^.*$',
-                'validationMessage' => 'krisawzm.embed::jsfiddle.properties.tabs.validationMessage',
+                'validationMessage' => Lang::get('krisawzm.embed::jsfiddle.properties.tabs.validationMessage'),
             ],
 
             'skin' => [
@@ -53,8 +56,8 @@ public function defineProperties()
                 'description'       => 'krisawzm.embed::common.properties.height.description',
                 'default'           => '300',
                 'type'              => 'string',
-                'validationPattern' => '^[0-9]+$',
-                'validationMessage' => 'krisawzm.embed::common.properties.height.validationMessage',
+                'validationPattern' => '^(auto|0)$|^\d+(\.\d+)?(%|'.$css_units.')?$',
+                'validationMessage' => Lang::get('krisawzm.embed::common.properties.height.validationMessage'),
             ],
         ];
     }

diff --git a/components/Kickstarter.php b/components/Kickstarter.php
@@ -2,6 +2,8 @@
 namespace Krisawzm\Embed\Components;
 
 use Cms\Classes\ComponentBase;
+use Krisawzm\Embed\Models\Settings;
+use Lang;
 
 class Kickstarter extends ComponentBase
 {
@@ -21,14 +23,16 @@ public function componentDetails()
      */
     public function defineProperties()
     {
+        $css_units = Settings::get('valid_css_units', 'px');
+
         return [
             'url' => [
                 'title'             => 'krisawzm.embed::kickstarter.properties.url.title',
                 'description'       => 'krisawzm.embed::kickstarter.properties.url.description',
                 'default'           => 'https://',
                 'type'              => 'string',
                 'validationPattern' => '^https?:\/\/(www\.)?kickstarter\.com\/?.+$',
-                'validationMessage' => 'krisawzm.embed::kickstarter.properties.url.validationMessage',
+                'validationMessage' => Lang::get('krisawzm.embed::kickstarter.properties.url.validationMessage'),
             ],
 
             'type' => [
@@ -44,17 +48,17 @@ public function defineProperties()
                 'description'       => 'krisawzm.embed::kickstarter.properties.width.description',
                 'default'           => '360',
                 'type'              => 'string',
-                'validationPattern' => '^[0-9]+$',
-                'validationMessage' => 'krisawzm.embed::common.properties.width.validationMessage',
+                'validationPattern' => '^(auto|0)$|^\d+(\.\d+)?(%|'.$css_units.')?$',
+                'validationMessage' => Lang::get('krisawzm.embed::common.properties.width.validationMessage'),
             ],
 
             'height' => [
                 'title'             => 'krisawzm.embed::common.properties.height.title',
                 'description'       => 'krisawzm.embed::kickstarter.properties.height.description',
                 'default'           => '480',
                 'type'              => 'string',
-                'validationPattern' => '^[0-9]+$',
-                'validationMessage' => 'krisawzm.embed::common.properties.height.validationMessage',
+                'validationPattern' => '^(auto|0)$|^\d+(\.\d+)?(%|'.$css_units.')?$',
+                'validationMessage' => Lang::get('krisawzm.embed::common.properties.height.validationMessage'),
             ],
         ];
     }