Added ToggleComponent

README.md

@@ -169,6 +169,7 @@ SilverWare ships with the following components ready for use:
 - [`TagCloudComponent`](#tagcloudcomponent)
 - [`TileComponent`](#tilecomponent)
 - [`TitleComponent`](#titlecomponent)
+- [`ToggleComponent`](#togglecomponent)
 
 ### AreaComponent
 
@@ -269,6 +270,12 @@ If you need to hide the page title in the template (so that two titles are not s
 select the "Hide title of page" option in your `PageComponent`. This adds the class
 `page-title-hidden` which can be used in your site styles.
 
+### ToggleComponent
+
+Allows you to embed a block of rich-text content, edited using `HTMLEditorField`, with
+the visibility of the content toggleable via clicking on the header of the component.
+Can be started open or closed.
+
 ## Issues
 
 Please use the [GitHub issue tracker][issues] for bug reports and feature requests.

client/src/bundles/bundle.js

@@ -18,3 +18,4 @@ require('forms/ToggleGroup.js');
 
 require('components/ScrollToTopButton.js');
 require('components/TagCloudComponent.js');
+require('components/ToggleComponent.js');

client/src/components/ToggleComponent.js

@@ -0,0 +1,35 @@
+/* Toggle Component
+===================================================================================================================== */
+
+import $ from 'jquery';
+
+$(function() {
+
+  // Handle Toggle Components:
+
+  $('.togglecomponent').each(function() {
+
+    var $self   = $(this);
+    var $header = $self.find('header');
+
+    // Detect Start Open Status:
+
+    if ($self.data('start-open')) {
+      $header.addClass('opened');
+    }
+
+    // Handle Header Click:
+
+    $header.on('click', function() {
+      $(this).toggleClass('opened');
+    });
+
+    // Handle Header Link Click:
+
+    $header.find('a').on('click', function(e) {
+      e.stopPropagation();
+    });
+
+  });
+
+});

client/src/styles/bundle.scss

@@ -29,6 +29,7 @@
 @import "components/ScrollToTopButton";
 @import "components/TableComponent";
 @import "components/TileComponent";
+@import "components/ToggleComponent";
 
 // Import Extension Styles:
 

client/src/styles/components/ToggleComponent.scss

@@ -0,0 +1,59 @@
+/* Toggle Component Styles
+===================================================================================================================== */
+
+.togglecomponent {
+
+  margin: 0 0 $spacer;
+  border: $border-width solid $border-color;
+
+  > header {
+
+    cursor: pointer;
+    padding: $spacer;
+    transition: $transition-base;
+
+    > * {
+
+      margin: 0;
+      font-size: inherit;
+
+      &:before {
+        opacity: 0.75;
+        content: "\f0fe";
+        display: inline-block;
+        padding-right: $spacer-half;
+        font-family: 'FontAwesome';
+      }
+
+    }
+
+    &.opened {
+
+      > *:before {
+        content: "\f146";
+      }
+
+    }
+
+    &.opened + div.content {
+      display: block;
+    }
+
+    @include hover-focus {
+      background-color: rgba(0, 0, 0, 0.1);
+    }
+
+  }
+
+  > div.content {
+
+    display: none;
+    padding: $spacer;
+
+    border-top-width: $border-width;
+    border-top-style: dotted;
+    border-top-color: inherit;
+
+  }
+
+}

src/Components/ToggleComponent.php

@@ -0,0 +1,126 @@
+<?php
+
+/**
+ * This file is part of SilverWare.
+ *
+ * PHP version >=5.6.0
+ *
+ * For full copyright and license information, please view the
+ * LICENSE.md file that was distributed with this source code.
+ *
+ * @package SilverWare\Components
+ * @author Colin Tucker <colin@praxis.net.au>
+ * @copyright 2018 Praxis Interactive
+ * @license https://opensource.org/licenses/BSD-3-Clause BSD-3-Clause
+ * @link https://github.com/praxisnetau/silverware
+ */
+
+namespace SilverWare\Components;
+
+use SilverStripe\Forms\CheckboxField;
+use SilverWare\Forms\FieldSection;
+
+/**
+ * An extension of the content component class for a toggle component.
+ *
+ * @package SilverWare\Components
+ * @author Colin Tucker <colin@praxis.net.au>
+ * @copyright 2018 Praxis Interactive
+ * @license https://opensource.org/licenses/BSD-3-Clause BSD-3-Clause
+ * @link https://github.com/praxisnetau/silverware
+ */
+class ToggleComponent extends ContentComponent
+{
+    /**
+     * Human-readable singular name.
+     *
+     * @var string
+     * @config
+     */
+    private static $singular_name = 'Toggle Component';
+
+    /**
+     * Human-readable plural name.
+     *
+     * @var string
+     * @config
+     */
+    private static $plural_name = 'Toggle Components';
+
+    /**
+     * Description of this object.
+     *
+     * @var string
+     * @config
+     */
+    private static $description = 'A component to show a toggleable block of content';
+
+    /**
+     * Icon file for this object.
+     *
+     * @var string
+     * @config
+     */
+    private static $icon = 'silverware/silverware: admin/client/dist/images/icons/ToggleComponent.png';
+
+    /**
+     * Defines the table name to use for this object.
+     *
+     * @var string
+     * @config
+     */
+    private static $table_name = 'SilverWare_ToggleComponent';
+
+    /**
+     * Maps field names to field types for this object.
+     *
+     * @var array
+     * @config
+     */
+    private static $db = [
+        'StartOpen' => 'Boolean'
+    ];
+
+    /**
+     * Defines the default values for the fields of this object.
+     *
+     * @var array
+     * @config
+     */
+    private static $defaults = [
+        'StartOpen' => 0
+    ];
+
+    /**
+     * Answers an array of HTML tag attributes for the object.
+     *
+     * @return array
+     */
+    public function getAttributes()
+    {
+        $attributes = array_merge(
+            parent::getAttributes(),
+            [
+                'data-start-open' => $this->dbObject('StartOpen')->NiceAsBoolean()
+            ]
+        );
+
+        return $attributes;
+    }
+
+    /**
+     * Event method called before the receiver is written to the database.
+     *
+     * @return void
+     */
+    public function onBeforeWrite()
+    {
+        // Call Parent Event:
+
+        parent::onBeforeWrite();
+
+        // Enforce Visible Title:
+
+        $this->HideTitle = 0;
+    }
+}