Add parameters to RTE wrapper methods (#284)

Minor refactor + documentation update.

docs/js-examples/index.md

@@ -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 targeted `<table>` element |
+| `$iframes`           | jQuery object | `<iframe>` elements to be made responsive |
+| `iframeWrapperClass` | string        | CSS class to apply on the `<div>` that will wrap each targeted `<iframe>` element |
+
 ```
-// 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'
 });
 ```
 

packages/slate-theme/src/scripts/slate/rte.js

@@ -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

packages/slate-theme/src/scripts/theme.js

@@ -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()) {