WIP: bootstrap popovers

README.md

@@ -3,17 +3,57 @@ SilverStripe Inline Help Module
 
 Maintainer Contacts
 -------------------
-*  Andrew Short (<andrew@silverstripe.com.au>)
+*  Tom Brewer-Vinga (<tom@silverstripe.com.au>)
 
 Requirements
 ------------
-* SilverStripe 2.4+
+* SilverStripe 3.2+
 
 Documentation
 -------------
 
+Changelog
+-------------
+
+**2.0**
+
+ - Add Bootstrap Popover support
+ - Remove JQueryUI support (will be re-implemented later)
+ - Split InlineHelpTopic into core dataobject and extensions to support different javascript libraries
+
+**1.0**
+
+- Updated to SilverStripe 3.2
+	- Earlier versions of SilverStripe 3 have not been tested
+
+Known Bugs
+----------
+
+- The displayed fields in the admin section under the tab "Attach To" display incorrectly with the selected radio button when the item is dynamically loaded
+
 Installation Instructions
 -------------------------
 
 1. Place this directory in the root of your SilverStripe installation.
-2. Visit yoursite.com/dev/build to rebuild the database.
+
+2. If cloned or using the zip file, change the directory to just `inlinehelp`
+
+3. Add the following lines of code to your Page init function
+```
+if($this->dataRecord) {
+	$this->dataRecord->extend('onPageInit', $this);
+} else {
+	singleton('SiteTree')->extend('onPageInit', $this);
+}
+```
+4. Add the below snippet your projects yml configuration to enable the bootstrap popover boxes
+```
+SiteTree:
+  extensions:
+    - InlineHelpExtension
+InlineHelpTopic:
+  extensions:
+    - InlineHelpTopicBootstrap
+```
+
+4. Visit yoursite.com/dev/build to rebuild the database.

_config.php

@@ -3,22 +3,22 @@
  * @package silverstripe-inlinehelp
  */
 
-Object::add_extension('SiteTree', 'InlineHelpExtension');
+define('INLINEHELP_DIR', basename(dirname(__FILE__)));
 
 /**
  * Set up a simplified HTML editor config for use in help text.
  */
-HtmlEditorConfig::get('simple')->setOptions(array(
+HtmlEditorConfig::get('helpsimple')->setOptions(array(
 	'friendly_name'	    => 'Simple',
 	'language'          => i18n::get_tinymce_lang(),
 	'document_base_url' => Director::absoluteBaseURL(),
 	'mode'              => 'specific_textareas',
 	'valid_elements'    => '*[*]'
 ));
-HtmlEditorConfig::get('simple')->setButtonsForLine(1, array(
+HtmlEditorConfig::get('helpsimple')->setButtonsForLine(1, array(
 	'bold', 'italic', 'underline', 'strikethrough', 'separator', 'undo',
 	'redo', 'separator', 'formatselect', 'cleanup', 'separator',
 	'bullist', 'numlist'
 ));
-HtmlEditorConfig::get('simple')->setButtonsForLine(2);
-HtmlEditorConfig::get('simple')->setButtonsForLine(3);
+HtmlEditorConfig::get('helpsimple')->setButtonsForLine(2);
+HtmlEditorConfig::get('helpsimple')->setButtonsForLine(3);

code/InlineHelpAdmin.php

@@ -16,7 +16,8 @@ class InlineHelpAdmin extends ModelAdmin {
 
 	public function init() {
 		parent::init();
-		HtmlEditorConfig::set_active('simple');
+		// Commented out due to a bug with Editor init
+		//HtmlEditorConfig::set_active('helpsimple');
 	}
 
 }

code/InlineHelpExtension.php

@@ -4,25 +4,23 @@
  *
  * @package silverstripe-inlinehelp
  */
-class InlineHelpExtension extends DataObjectDecorator {
+class InlineHelpExtension extends DataExtension {
 
-	/**
-	 * @return array
-	 */
-	public function extraStatics() {
-		return array('belongs_many_many' => array(
-			'HelpTopics' => 'InlineHelpTopic'
-		));
-	}
+	private static $belongs_many_many = array(
+		'HelpTopics' => 'InlineHelpTopic'
+	);
 
 	/**
 	 * Includes the required JS libraries and inline help definitions.
 	 */
-	public function contentcontrollerInit() {
-		$template = 'InlineHelp';
-		$include  = $this->owner->renderWith($template);
+	public function onPageInit() {
+		if($this->owner->HelpItems) {
+			$include  = $this->owner->renderWith('InlineHelp');
+			if ($include) Requirements::customScript($include);
+			Requirements::javascript(INLINEHELP_DIR . '/javascript/inlinehelp.bootstrap.popover.js');
+			Requirements::css(INLINEHELP_DIR . '/css/inlinehelpbootstrap.css');
+		}
 
-		if ($include) Requirements::customScript($include);
 	}
 
 	/**
@@ -31,12 +29,10 @@ public function contentcontrollerInit() {
 	 * @return InlineHelpTopic[]
 	 */
 	public function getHelpItems() {
-		$items = new DataObjectSet();
+		$items = new ArrayList();
 
-		$items->merge(DataObject::get('InlineHelpTopic',
-			'"AttachType" = \'All\''));
-		$items->merge(DataObject::get(
-			'InlineHelpTopic',
+		$items->merge(InlineHelpTopic::get()->where('"AttachType" = \'All\''));
+		$items->merge(InlineHelpTopic::get()->where(
 			sprintf(
 				'"AttachType" = \'Type\' AND "AttachPageType" = \'%s\'',
 				$this->owner->class
@@ -48,7 +44,8 @@ public function getHelpItems() {
 		array_shift($stack);
 
 		if ($stack) {
-			$items->merge(DataObject::get('InlineHelpTopic', sprintf(
+			$items->merge(InlineHelpTopic::get()->where(
+				sprintf(
 				'"AttachType" = \'Children\' AND "ParentFilterID" IN(%s)',
 				implode(', ',
 					array_map(create_function('$self', 'return $self->ID;'),

code/InlineHelpTopic.php

@@ -7,23 +7,21 @@
  */
 class InlineHelpTopic extends DataObject {
 
+	private static $attachment_method_map = array(
+		'appendTo' => 'Append to',
+		'prependTo' => 'Prepend to',
+		'insertBefore' => 'Insert before',
+		'insertAfter' => 'Insert after'
+	);
+
 	public static $db = array(
 		'Title'          => 'Varchar(100)',
 		'DisplayType'    => 'Enum("Tooltip, Link", "Tooltip")',
 		'Text'           => 'HTMLText',
 		'Link'           => 'Varchar(100)',
 		'AttachType'     => 'Enum("All, Pages, Children, Type", "Pages")',
 		'AttachPageType' => 'Varchar(100)',
-		'DOMPattern'     => 'Varchar(100)',
-		'ShowTooltip'    => 'Enum("Hover, Click", "Hover")',
-		'TooltipWidth'   => 'Varchar(6)',
-		'TooltipHeight'  => 'Varchar(6)',
-		'IconHTML'       => 'HTMLVarchar(255)',
-		'IconMy'         => 'Varchar(15)',
-		'IconAt'         => 'Varchar(15)',
-		'IconOffset'     => 'Varchar(10)',
-		'TooltipMy'      => 'Varchar(15)',
-		'TooltipAt'      => 'Varchar(15)'
+		'DOMPattern'     => 'Varchar(100)'
 	);
 
 	public static $has_one = array(
@@ -65,7 +63,7 @@ public function getAttachedTo() {
 			case 'All':
 				return 'All pages';
 			case 'Pages':
-				return 'Specific pages: ' . implode(', ', $this->Pages()->map());
+				return 'Specific pages: ' . implode(', ', $this->Pages()->toArray());
 			case 'Children':
 				return 'Children of ' . $this->ParentFilter()->Title;
 			case 'Type':
@@ -80,15 +78,15 @@ public function getCMSFields() {
 		Requirements::javascript(THIRDPARTY_DIR . '/jquery/jquery.js');
 		Requirements::javascript('inlinehelp/javascript/InlineHelpAdmin.js');
 
-		return new FieldSet(new TabSet('Root',
+		$fields = new FieldList(new TabSet('Root',
 			new Tab('Main',
 				new HeaderField('HelpHeader', 'Help Topic'),
 				new TextField('Title', 'Title'),
 				new OptionSetField('DisplayType', 'Display type', array(
 					'Tooltip' => 'Display help text and/or link in tooltip',
 					'Link'    => 'Click the icon to go to the help link'
 				)),
-				new HtmlEditorField('Text', 'Short help text', 8),
+				new HtmlEditorField('Text', 'Short help text'),
 				new TextField('Link', 'Help link')
 			),
 			new Tab('Subject',
@@ -97,7 +95,8 @@ public function getCMSFields() {
 				new LiteralField('DOMPatternNote', '<p>This is a jQuery (CSS)
 				selector which specifies which elements to attach this help
 				topic to. The same topic can be attached to multiple elements.
-				</p>')
+				</p>'),
+				new DropdownField('DOMMethod', 'DOM attachment method', self::$attachment_method_map)
 			),
 			new Tab('AttachTo',
 				new HeaderField('AttachToHeader', 'Attach Help To'),
@@ -112,41 +111,12 @@ public function getCMSFields() {
 				new DropdownField('AttachPageType', 'Page type', ArrayLib::valuekey(
 					ClassInfo::subclassesFor('Page')
 				))
-			),
-			new Tab('Advanced',
-				new HeaderField('AdvancedHeader', 'Advanced Inline Help Options'),
-				new DropdownField('ShowTooltip', 'Show tooltip on', array(
-					'Hover' => 'On mouse hover',
-					'Click' => 'On mouse click'
-				)),
-				new TextField('IconHTML', 'Icon HTML code'),
-				new FieldGroup('Help icon position (relative to subject)',
-					new TextField('IconMy', 'my'),
-					new TextField('IconAt', 'at')
-				),
-				new FieldGroup('Help icon offset (relative to position)',
-					new TextField('IconOffset', ''),
-					new LiteralField('IconOffsetNote',
-						'format "horizontal vertical" (e.g. "15 -5")')
-				),
-				new FieldGroup('Tooltip position (relative to icon)',
-					new TextField('TooltipMy', 'my'),
-					new TextField('TooltipAt', 'at')
-				),
-				new LiteralField('HelpPositionNote', '<p>These allow you to
-				specify the position of the elements relative to each other.
-				Each position is in the format "horizontal vertical", where
-				horizontal can be one of left, center or right (default
-				center), and vertical can be top, center or bottom (default
-				center)</p>'),
-				new FieldGroup('Tooltip size',
-					new TextField('TooltipWidth', ''),
-					new LiteralField('SizeSeparator', 'x'),
-					new TextField('TooltipHeight', ''),
-					new LiteralField('DefaultSizeNote', '(default: 300 x "auto")')
-				)
 			)
 		));
+
+		$this->extend('updateCMSFields', $fields);
+
+		return $fields;
 	}
 
 }

code/InlineHelpTopicBootstrap.php

@@ -0,0 +1,38 @@
+<?php
+
+/**
+ * InlineHelpTopicBootstrap
+ *
+ * @author Stephen McMahon <stephen@silverstripe.com.au>
+ */
+class InlineHelpTopicBootstrap extends DataExtension {
+
+	private static $db = array(
+		'container' => 'Varchar',
+		'html' => 'Boolean(0)',
+		'placement' => 'Enum("top, right, bottom, left", "right")',
+		'trigger'    => 'Enum("hover focus, click", "click")'
+		/* TODO(Steve) need a way to set custom templates for pop ups */
+		//'template' => 'Varchar',
+	);
+
+	public function updateCMSFields(FieldList $fields) {
+		$fields->addFieldToTab('Root',
+			new Tab('Advanced',
+				new HeaderField('AdvancedHeader', 'Advanced Inline Help Options'),
+				new DropdownField('trigger', 'Show tooltip on', array(
+					'click' => 'On mouse click',
+					'hover focus' => 'On mouse hover'
+				)),
+				new LiteralField('HelpPositionNote', '<p>Set the default pop over placement. For example, if placement
+					is "left", the popover will display to the left when possible, otherwise it	will display right.</p>'),
+				new DropdownField('placement', 'Place tooltip to the', array(
+					'right' => 'Right',
+					'left' => 'Left',
+					'top' => 'Top',
+					'bottom' => 'Bottom'
+				))
+			)
+		);
+	}
+}

composer.json

@@ -0,0 +1,23 @@
+{
+	"name": "silverstripe-australia/inlinehelp",
+	"description": "",
+	"type": "silverstripe-module",
+	"keywords": ["silverstripe", "inline", "help"],
+	"license": "BSD-3-Clause",
+	"authors": [
+		{
+			"name": "Tom Brewer-Vinga",
+			"email": "tom@silverstripe.com.au"
+		}
+	],
+	"require":
+	{
+		"silverstripe/cms": "3.*",
+		"silverstripe/framework": "3.*",
+		"composer/installers": "*"
+	},
+	"extra": {
+		"installer-name": "inlinehelp"
+	},
+	"minimum-stability": "dev"
+}

css/inlinehelpbootstrap.css

@@ -0,0 +1,11 @@
+.btn-inlinehelp {
+	padding: 0.2em 0.3em 0;
+	border: none;
+	margin: 0.3em;
+	border-radius: 50%;
+}
+
+.btn-inlinehelp .glyphicon {
+	color: #0a7cb9;
+    font-size: 100%;
+}