Skip to content
This repository has been archived by the owner on Jul 19, 2021. It is now read-only.

Add parameters to RTE wrapper methods #284

Merged
merged 5 commits into from
Sep 18, 2017
Merged

Add parameters to RTE wrapper methods #284

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
65974cf
refactor: add parameters to rte wrapping methods
Sep 15, 2017
a0c574b
refactor: add parameters to rte wrapping methods
Sep 15, 2017
9718335
docs: update responsive tables/videos js sample
Sep 15, 2017
7b9ddaa
docs: add a table to explain parameters for responsive tables and videos
Sep 18, 2017
6ca1eba
docs: fix a typo in the Responsive tables/iframes section
Sep 18, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 22 additions & 6 deletions docs/js-examples/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,14 +52,30 @@ $('#CloseModal').on('click', function() {

Tables and video embeds do not natively scale well on smaller screens. Slate adds a wrapper class to tables and video embeds that are loaded in from a rich text editor.

| Parameters | Type | Description |
| :------------------- | :------------ | :------------ |
| `$tables` | jQuery object | `<table>` elements to be made responsive |
| `tableWrapperClass` | string | CSS class to apply on the `<div>` that will wrap each targetted `<table>` element |
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

targeted instead of targetted

| `$iframes` | jQuery object | `<iframe>` elements to be made responsive |
| `iframeWrapperClass` | string | CSS class to apply on the `<div>` that will wrap each targetted `<iframe>` element |
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

targeted instead of targetted


```
// Wrap RTE tables
$('.rte table').wrap('<div class="rte__table-wrapper"></div>');
// Wrap RTE tables to make them scrollable
var tableSelectors = '.rte table';

slate.rte.wrapTable({
$tables: $(tableSelectors),
tableWrapperClass: 'rte__table-wrapper',
});

// Wrap RTE videos to make them responsive
var videoSelectors =
'.rte iframe[src*="youtube.com/embed"],' +
'.rte iframe[src*="player.vimeo"]';

// Wrap RTE videos
var $iframeVideo = $('.rte iframe[src*="youtube.com/embed"], .rte iframe[src*="player.vimeo"]');
$iframeVideo.each(function() {
$(this).wrap('<div class="rte__video-wrapper"></div>');
slate.rte.wrapIframe({
$iframes: $(videoSelectors),
iframeWrapperClass: 'rte__video-wrapper'
});
```

Expand Down
34 changes: 21 additions & 13 deletions packages/slate-theme/src/scripts/slate/rte.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,35 @@
/**
* Rich Text Editor
* -----------------------------------------------------------------------------
* Wrap videos in div to force responsive layout.
* Wrap iframes and tables in div tags to force responsive/scrollable layout.
*
* @namespace rte
*/

slate.rte = {

wrapTable: function() {
$('.rte table').wrap('<div class="rte__table-wrapper"></div>');
/**
* Wrap tables in a container div to make them scrollable when needed
*
* @param {object} options - Options to be used
* @param {jquery} options.$tables - jquery object(s) of the table(s) to wrap
* @param {string} options.tableWrapperClass - table wrapper class name
*/
wrapTable: function(options) {
options.$tables.wrap('<div class="' + options.tableWrapperClass + '"></div>');
},

iframeReset: function() {
var $iframeVideo = $('.rte iframe[src*="youtube.com/embed"], .rte iframe[src*="player.vimeo"]');
var $iframeReset = $iframeVideo.add('.rte iframe#admin_bar_iframe');

$iframeVideo.each(function() {
/**
* Wrap iframes in a container div to make them responsive
*
* @param {object} options - Options to be used
* @param {jquery} options.$iframes - jquery object(s) of the iframe(s) to wrap
* @param {string} options.iframeWrapperClass - class name used on the wrapping div
*/
wrapIframe: function(options) {
options.$iframes.each(function() {
// Add wrapper to make video responsive
$(this).wrap('<div class="rte__video-wrapper"></div>');
});

$iframeReset.each(function() {
$(this).wrap('<div class="' + options.iframeWrapperClass + '"></div>');

// Re-set the src attribute on each iframe after page load
// for Chrome's "incorrect iFrame content on 'back'" bug.
// https://code.google.com/p/chromium/issues/detail?id=395791
Expand Down
20 changes: 17 additions & 3 deletions packages/slate-theme/src/scripts/theme.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,23 @@ $(document).ready(function() {
slate.a11y.pageLinkFocus($(evt.currentTarget.hash));
});

// Wrap videos in div to force responsive layout.
slate.rte.wrapTable();
slate.rte.iframeReset();
// Target tables to make them scrollable
var tableSelectors = '.rte table';

slate.rte.wrapTable({
$tables: $(tableSelectors),
tableWrapperClass: 'rte__table-wrapper',
});

// Target iframes to make them responsive
var iframeSelectors =
'.rte iframe[src*="youtube.com/embed"],' +
'.rte iframe[src*="player.vimeo"]';

slate.rte.wrapIframe({
$iframes: $(iframeSelectors),
iframeWrapperClass: 'rte__video-wrapper'
});

// Apply a specific class to the html element for browser support of cookies.
if (slate.cart.cookiesEnabled()) {
Expand Down