Class: mooreadall

ajs.tools. mooreadall

Provides a "read all" link which may call other pages, callback functions, open a layer or show the whole content in the same element

new mooreadall(options)

Tool designed to cut html string preserving the html structure, without breaking tags.

Parameters:
Name Type Argument Description
options Object <optional>
 A class options object
Properties
Name Type Argument Default Description
words Number <optional>
 60 The number of words after which the text is cut off.
remove_tags String | Array <optional>
 new Array() Tag elements to be removed. Possible values are:
  • "all": all tags are removed
  • ["tag1", "tag2"]: only the listed tags are removed
display_style String <optional>
 'block' I don't like at all to see a whole content reduce itself after a while, I prefer to see a cut content growing up from an empty element.
So mooReadAll hide the element whose content is cut and show it again when computation finishes. The best would be to hide directly the element and have mooReadAll to show it. With this option is possible to decide which style property to use: the display or the visibility one. Possible values are:
  • "none": the hide/show actions are skipped
  • "visible": the visibility style is used ('hidden' and 'visible')
  • "every display style": the element is hidden setting "display: none" and the shown setting display to the value passed ('block', 'inline', 'table', 'list-item', ...)
truncate_characters String <optional>
 '...' Characters displayed after text truncation
action_label String <optional>
 'read all' Text of the link which displays the whole content
action String <optional>
 'layer' The action to perform when clicking the action_label link. Possible values are:
  • "inplace": the whole content is rendered inside the same element, a back button appears so that the content may be expanded/compressed infinite times
  • "link": the action_label links to another page (an anchor tag)
  • "callback": a callback function to call when clicking the action_label link. The first parameter passed to callback is the element, then a custom parameter and finally the context of the mooreadall object is passed also
  • "layer": the whole content is displayed in a layer over the document (lightbox style). It's possible to activate some controls: drag, resize, text-resize
return_label String <optional>
 'back' Used by the action "inplace" type. Is the link label which appears after expanding the whole content in order to compress it again
layer_id String <optional>
 '' Used by the action "layer" type. if you need to customize every layer, this id is assigned to the id attribute of the layer.
layer_width Number <optional>
 800 Used by the action "layer" type: The width of the layer. Its height may be set by css.
layer_draggable Number <optional>
 fase Used by the action "layer" type. Whether to make the layer draggable or not.
layer_resizable Number <optional>
 fase Used by the action "layer" type. Whether to make the layer resizable or not.
layer_text_resizable Number <optional>
 fase Used by the action "layer" type. Whether to make the layer text resizable or not.
link_href String <optional>
 fase Used by the action "link" type. The url to link the action_label to.
link_target String <optional>
 '_blank' Used by the action "link" type. The target attribute of the anchor tag.
callback Function <optional>
 null Used by the action "callback" type. The callback function to call when clicking the action_label link.
callback_param Mixed <optional>
 null Used by the action "callback" type. A custom parameter to pass to the callback function.
Source:
Example
	var mr = new ajs.tools.mooreadall({
		action: 'inplace'
	});
	mr.add('.expand');

Methods

Returns the anchor/span "read all" link, depending on the action option.

Parameters:
Name Type Description
element Element The dom element which contains the text to truncate
html String The whole content
cut_html String The truncated content
prop Object The definitive option object
Source:
Returns:
The action controller
Type
String

add(elements, opts)

Applies the text truncation to the given elements with the given options

Parameters:
Name Type Description
elements Mixed The elements whose content has to be truncated. Possible values are:
  • A css selector
  • An array of dom elements
  • A dom element
opts Object The options to use when performing the cut action, see the constructor for the available options
Source:
Returns:
void

apply(element, opts)

Applies the text truncation to the given element with the given options

Parameters:
Name Type Description
element Element The dom element
opts Object The options to use when performing the cut action
Source:
Returns:
void

closeLayer()

Closes the layer.

Source:
Returns:
void

cut(html, prop) → {String}

Performs the cut of the html content preserving the html structure and good formatting

Parameters:
Name Type Description
html String The whole html content to cut. Global or local options are used (number of words, remove_tags)
prop Object The definitive option object
Source:
Returns:
The truncated html text
Type
String

<protected> disableObjects()

Disables document objects.

Source:
Returns:
void

<protected> enableObjects()

Enables document objects.

Source:
Returns:
void

<protected> hideElement(element, prop)

Hides the element which contains the text to truncate basing upon the display_style option

Parameters:
Name Type Description
element Element The dom element
prop Object The definitive option object
Source:
Returns:
void

<protected> layerBody(html)

Sets the layer content.

Parameters:
Name Type Description
html String The html content
Source:
Returns:
void

<protected> layerTitle(element)

Creates the layer title taking the data-title element attribute.

Parameters:
Name Type Description
element Element The dom element which contains the text to truncate
Source:
Returns:
void

<protected> makeDraggable()

Makes the layer draggable.

Source:
Returns:
void

<protected> makeResizable()

Makes the layer resizable.

Source:
Returns:
void

<protected> makeTextResizable()

Makes the layer text resizable.

Source:
Returns:
void

renderLayer(element, html, prop)

Renders the layer.

Parameters:
Name Type Description
element Element The dom element which contains the text to truncate
html String The whole content
prop Object The definitive option object
Source:
Returns:
void

<protected> renderOverlay(element, html, prop)

Renders an overlay (lightbox style).

Parameters:
Name Type Description
element Element The dom element which contains the text to truncate
html String The whole content
prop Object The definitive option object
Source:
Returns:
void

<protected> sameDomain(win) → {Boolean}

Checks if a window object is of the same domain as the main one.

Parameters:
Name Type Description
win Element The window object
Source:
Returns:
Whether or not the given window has the same domain
Type
Boolean

<protected> setProperties() → {Object}

Creates the object used to apply the tool, merging global options and local options (passed to the add or apply methods)

Source:
Returns:
The final options object
Type
Object

<protected> showElement(element, prop)

Shows the element which contains the text to truncate basing upon the display_style option

Parameters:
Name Type Description
element Element The dom element
prop Object The definitive option object
Source:
Returns:
void

showInLayer(element, html, prop)

Shows the entire html text in a layer (lightbox style).

Parameters:
Name Type Description
element Element The dom element which contains the text to truncate
html String The whole content
prop Object The definitive option object
Source:
Returns:
void