Merge branch 'release/2.2.0'

CHANGELOG.md

@@ -1,3 +1,9 @@
+# v2.2.0
+## 03/02/2017
+
+1. [](#new)
+    * Added new `accordian` shortcode
+
 # v2.1.0
 ## 02/25/2017
 

README.md

@@ -7,6 +7,7 @@ The **Shortcode UI** plugin provides several useful UI elements for Grav as _sho
 It currently provides:
 
 * Tabs
+* Accordian
 * CSS browser wrapper
 * Callout for images with hover-tooltips
 * Dual image comparison with drag handle
@@ -85,6 +86,38 @@ The `[ui-tab]` shortcode that defines each _tab_ has the following parameters:
 
 You can use whatever markdown you wish in the tab itself.  They are auto-adjusting and fully responsive.
 
+
+#### Accordian
+
+An example of the Accordian shortcode is as follows:
+
+```
+[ui-accordian independent=true open=all]
+[ui-accordian-item title="Section 1"]
+Bacon ipsum dolor amet beef burgdoggen shoulder, meatball prosciutto kevin brisket chicken turkey. Kevin rump pancetta short loin capicola brisket landjaeger fatback picanha pork belly ribeye. Strip steak chuck turducken kevin t-bone ribeye cupim capicola alcatra rump. Venison pork chop biltong cupim pig rump meatloaf sausage pork. Strip steak kevin tongue brisket ball tip, venison turducken flank frankfurter corned beef pancetta fatback drumstick ham. Drumstick pastrami leberkas meatball flank tongue turkey ground round pork belly doner frankfurter porchetta jowl.
+[/ui-accordian-item]
+[ui-accordian-item title="Section 2"]
+Short loin swine shankle flank picanha andouille burgdoggen landjaeger hamburger drumstick. Beef ham tail, tri-tip flank ham hock meatball picanha corned beef t-bone shank turkey ball tip shoulder. Flank corned beef chicken, meatloaf venison ball tip ham hock tail salami jowl short ribs pork belly drumstick. Meatball chicken hamburger beef filet mignon doner pork picanha pork chop fatback rump ham tri-tip ball tip landjaeger. Sausage leberkas shoulder tongue short loin shankle. Prosciutto tri-tip frankfurter shoulder drumstick capicola. Pork loin shank strip steak pork belly tongue cow.
+[/ui-accordian-item]
+[ui-accordian-item title="Section 3"]
+Bacon ipsum dolor amet beef burgdoggen shoulder, meatball prosciutto kevin brisket chicken turkey. Kevin rump pancetta short loin capicola brisket landjaeger fatback picanha pork belly ribeye. Strip steak chuck turducken kevin t-bone ribeye cupim capicola alcatra rump. Venison pork chop biltong cupim pig rump meatloaf sausage pork. Strip steak kevin tongue brisket ball tip, venison turducken flank frankfurter corned beef pancetta fatback drumstick ham. Drumstick pastrami leberkas meatball flank tongue turkey ground round pork belly doner frankfurter porchetta jowl.
+[/ui-accordian-item]
+[/ui-accordian]
+```
+
+##### Example
+
+![](assets/ui-accordian.png)
+
+The `[ui-accordian]` shortcode has some optional parameters:
+
+* `open` - accordian item # starting from `0` (e.g. `1` = 2nd item) | `none` = all closed | `all` = all open
+* `independent` - `true` | `false` (default) = determines if panels can be opened independently from one-another
+
+The `[ui-accordian-item]` shortcode that defines each _accordian-item_ has the following parameters:
+
+* `title` - The text to display for the actual accordian item
+
 #### Browser
 
 This shortcode wraps content (image, text, whatever) with a HTML/CSS Browser frame.
@@ -166,9 +199,10 @@ This shortcode displays an image in a polaroid frame which can be customized in
 [ui-polaroid angle="-3" margin="30px 50px 20px 0" position="left" title="How's this for embarrasing!"]![](my-image.jpg)[/ui-polaroid]
 ```
 
-* `angle` can be a positive or negative value that represents the degree of rotation
-* `margin` is the margin value applied to the bounding-box.  Use standard CSS values.
-* `postion` can be `left` or `right`
+* `angle` can be a positive or negative value that represents the degree of rotation (3 by default)
+* `margin` is the margin value applied to the bounding-box.  Use standard CSS values. (browser defaults)
+* `postion` can be `left` or `right` (right by default)
+* `gloss` overlay effect can be `true` or `false` - (true by default)
 * `title` is the text displayed below the image
 
 ##### Example

blueprints.yaml

@@ -1,5 +1,5 @@
 name: Shortcode UI
-version: 2.1.0
+version: 2.2.0
 description: "This plugin provides several UI shortcodes"
 icon: code
 author:

css/ui-accordian.css

@@ -0,0 +1,50 @@
+.accordian-wrapper {
+  margin: 30px 0;
+  text-align: left; }
+  .accordian-wrapper label {
+    position: relative;
+    z-index: 20;
+    display: block;
+    cursor: pointer;
+    color: #777;
+    font-size: 110%;
+    background: #f9f9f9;
+    margin: 0;
+    padding: 3px 15px;
+    border: 1px solid #eee;
+    border-bottom: 1px solid transparent; }
+    .accordian-wrapper label:hover {
+      background: #eee;
+      color: #444; }
+  .accordian-wrapper label:hover:after, .accordian-wrapper input:checked + label:hover:after {
+    opacity: 0.3;
+    content: '';
+    position: absolute;
+    width: 30px;
+    height: 20px;
+    right: 15px;
+    top: 7px;
+    background: transparent url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDQ4IDQ4IiB3aWR0aD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE0LjgzIDE2LjQybDkuMTcgOS4xNyA5LjE3LTkuMTcgMi44MyAyLjgzLTEyIDEyLTEyLTEyeiIvPjxwYXRoIGQ9Ik0wLS43NWg0OHY0OGgtNDh6IiBmaWxsPSJub25lIi8+PC9zdmc+) no-repeat center center; }
+  .accordian-wrapper input:checked + label:hover:after {
+    -ms-transform: rotate(180deg);
+    -webkit-transform: rotate(180deg);
+    transform: rotate(180deg); }
+  .accordian-wrapper input {
+    display: none; }
+  .accordian-wrapper article {
+    background: rgba(255, 255, 255, 0.5);
+    overflow: hidden;
+    max-height: 0px;
+    position: relative;
+    z-index: 10;
+    transition: max-height 0.3s ease-in-out;
+    border: 1px solid #eee;
+    border-top: 0;
+    border-bottom: 0;
+    padding: 0 15px; }
+  .accordian-wrapper input:checked ~ article {
+    max-height: 500px; }
+  .accordian-wrapper input:checked + label {
+    border-bottom: 1px solid #eee; }
+  .accordian-wrapper > div:last-child label, .accordian-wrapper > div:last-child input:checked ~ article {
+    border-bottom: 1px solid #eee; }

css/ui-polaroid.css

@@ -11,17 +11,6 @@
   box-shadow: 2px -2px 20px 0px rgba(0, 0, 0, 0.1);
   border: 1px solid #eee;
   -webkit-backface-visibility: hidden; }
-  .polaroid:nth-child(1) {
-    left: 25%;
-    transform: rotate(10deg); }
-  .polaroid:nth-child(2) {
-    left: 40%;
-    top: 20%;
-    transform: rotate(-15deg); }
-  .polaroid:nth-child(3) {
-    left: 55%;
-    top: 10%;
-    transform: rotate(5deg); }
   .polaroid p {
     position: absolute;
     bottom: 5px;

scss/ui-accordian.scss

@@ -0,0 +1,72 @@
+.accordian-wrapper {
+  margin: 30px 0;
+  text-align: left;
+
+  label {
+    position: relative;
+    z-index: 20;
+    display: block;
+    cursor: pointer;
+    color: #777;
+    font-size: 110%;
+    background: #f9f9f9;
+    margin: 0;
+    padding: 3px 15px;
+    border: 1px solid #eee;
+    border-bottom: 1px solid transparent;
+
+    &:hover {
+      background: #eee;
+      color: #444;
+    }
+  }
+
+  label:hover:after, input:checked + label:hover:after {
+    opacity: 0.3;
+    content: '';
+    position: absolute;
+    width: 30px;
+    height: 20px;
+    right: 15px;
+    top: 7px;
+    background: transparent url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDQ4IDQ4IiB3aWR0aD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE0LjgzIDE2LjQybDkuMTcgOS4xNyA5LjE3LTkuMTcgMi44MyAyLjgzLTEyIDEyLTEyLTEyeiIvPjxwYXRoIGQ9Ik0wLS43NWg0OHY0OGgtNDh6IiBmaWxsPSJub25lIi8+PC9zdmc+) no-repeat center center;
+  }
+
+  input:checked + label:hover:after {
+    -ms-transform: rotate(180deg);
+    -webkit-transform: rotate(180deg);
+    transform: rotate(180deg);
+  }
+
+  input {
+    display: none;
+  }
+
+  article {
+    background: rgba(255, 255, 255, 0.5);
+    overflow: hidden;
+    max-height: 0px;
+    position: relative;
+    z-index: 10;
+    transition: max-height 0.3s ease-in-out;
+    border: 1px solid #eee;
+    border-top: 0;
+    border-bottom: 0;
+    padding: 0 15px;
+  }
+
+  input:checked ~ article{
+    max-height: 500px;
+  }
+
+  input:checked + label {
+    border-bottom: 1px solid #eee;
+  }
+
+  > div:last-child {
+    label, input:checked ~ article {
+      border-bottom: 1px solid #eee;
+    }
+  }
+}
+

scss/ui-polaroid.scss

@@ -16,22 +16,6 @@
     box-shadow: 2px -2px 20px 0px rgba(0,0,0,0.1);
     border: 1px solid #eee;
     -webkit-backface-visibility: hidden;
-    &:nth-child(1) {
-        left: 25%;
-        transform: rotate(10deg);
-    }
-
-    &:nth-child(2) {
-        left: 40%;
-        top: 20%;
-        transform: rotate(-15deg);
-    }
-
-    &:nth-child(3) {
-        left: 55%;
-        top: 10%;
-        transform: rotate(5deg);
-    }
 
     p {
         position: absolute;

shortcodes/AccordianShortcode.php

@@ -0,0 +1,38 @@
+<?php
+
+namespace Grav\Plugin\Shortcodes;
+
+use Thunder\Shortcode\Shortcode\ShortcodeInterface;
+
+
+class AccordianShortcode extends Shortcode
+{
+    public function init()
+    {
+        $this->shortcode->getHandlers()->add('ui-accordian', function(ShortcodeInterface $sc) {
+
+            // Add assets
+            $this->shortcode->addAssets('css', 'plugin://shortcode-ui/css/ui-accordian.css');
+
+            $hash = $this->shortcode->getId($sc);
+
+            $independent = filter_var($sc->getParameter('independent', false), FILTER_VALIDATE_BOOLEAN);
+
+            $output = $this->twig->processTemplate('partials/ui-accordian.html.twig', [
+                'hash' => $hash,
+                'open' => $sc->getParameter('open'),
+                'type' => $independent ? 'checkbox' : 'radio',
+                'accordian_items' => $this->shortcode->getStates($hash),
+            ]);
+
+            return $output;
+        });
+
+        $this->shortcode->getHandlers()->add('ui-accordian-item', function(ShortcodeInterface $sc) {
+            // Add accordian to accordian state using parent accordian id
+            $hash = $this->shortcode->getId($sc->getParent());
+            $this->shortcode->setStates($hash, $sc);
+            return;
+        });
+    }
+}

templates/partials/ui-accordian.html.twig

@@ -0,0 +1,10 @@
+<div class="accordian-wrapper">
+    {% for key,item in accordian_items %}
+        {% set checked = (open != 'none' and loop.index0 == open or (type == 'checkbox' and open == 'all')) %}
+        <div>
+            <input id="{{ hash ~ key }}" name="{{ hash }}" type="{{ type }}" {{ checked  ? 'checked="checked"' : ''}} />
+            <label for="{{ hash ~ key }}">{{ item.getParameter('title') }}</label>
+            <article>{{ item.getContent()|raw }}</article>
+        </div>
+    {% endfor %}
+</div>