MiniToolbar

jdubs edited this page Oct 23, 2016 · 1 revision

Table of Contents

Overview

This widget places a toolbar for text formatting of single line text boxes. It is an alternative to the more functional toolbar widget. The styles are applied to the specs

Instructions

Create an HTML element such as a span or div in the spec form. Give the element an id such as "Toolbar". Then instantiate the mini toolbar in the advanced script tab using a code example below. Elements that configure options in the toolbar must be created. If any are missing that configuration will be missing from the toolbar.

HTML Example

<span style="display: block;">[[Fonts]][[Colors]][[FontSizes]]</span>
<div id="MiniToolbar"></div>
[[Company]]<br />
[[Message]]<br />
[[Title]]<br />

Advanced Scripting

get('MiniToolbar').minitoolbar({
  hideleftalign: false,
  hiderightalign: false,
  hidecenteralign: false,
  width: '600px',
  specs: [spec['Company'], spec['Message'], spec['Title']]
});

Options

  • hideleftalign: Hide the left align button.
  • hiderightalign: Hide the right align button.
  • hidecenteralign: Hide the center align button.
  • width: CSS style for defining width of the toobar.
  • specs: An array of the specs that will accept formatting from the toolbar.
  • debug: true or false. When true the control holding the value is displayed.

Extensions

Because the toolbar uses the specs to store the format settings the visible element is drawn on the page after all extensions have been added. To accommodate the extensions for the specs in the toolbar an id is assigned to all the elements displayed for formatting. All extensions are available to those elements. The id nomenclature is the following: display_ + spec name. Ex: display_FullName. If you wanted to use the Dim Label on a spec you would add this code after your declaration of the mini toolbar:

get('display_FullName').dimlabel({
    fadeColor: '#ccc',
    defaultText: 'Enter your Full Name here...'
});

Special Notes

The font, font size and color selection is configured through selection specs: Fonts, Colors, FontSizes. If one of these specs is not in the spec form that option will not appear in the toolbar. The values in each spec must correspond to values in the pageflex project. For example, if Colors contains "Red" a defined color in the pageflex project must also exist and be named "Red". It is important that font combinations exist. There are times when a font style is not available and the project will not render. For example, if you have "Arial" in your font list and the user selects "Bold" and "Underline" the font, Arial Bold Underline, must be available. FontSizes should be formatted with their measurment unit (ex: 12pt or 10em).

Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.