Merge pull request #2 from dealfonso/remove-remove

remove the _remove_ option and add the hide selector and skip selector

Author: dealfonso

README.md

@@ -76,39 +76,46 @@ The `showsource.extract` method accepts an optional `userOptions` parameter that
 
 ```javascript
 {
-// The indentation to be used (the spaces at the beginning of the line) (inheritable)
+// The indentation to be used (the spaces at the beginning of the line)
 indentation: "  ",
-// Remove the children of these types of elements
-remove: "h1 h2 h3 h4 h5 h6 p",
-// Hide the element (i.e. the tag) itself, but not its children
+// Hide this element (does not affect to its children); data-showsource-hide or data-showsource-hide="true" to hide the element
 hide: false,
-// Skip the element, along with its children
-skip: false,
-// Skip the children of the element, but not the element itself
+// Hide these elements (i.e. the tag)  (does not affect to its children). The syntax is as in querySelector; data-showsource-hide-selector="h1,h2,h3,h4,h5,h6,p" to hide the child elements that match these selectors
+hideSelector: null,
+// Add to hide list (not overwrite the list) (*) created to be used in the declarative version in the data-showsource-hide-elements-add; has no sense in the programmatic version (not inherited)
+hideSelectorAdd: null,
+// Skip these elements (along with its children). The syntax is as in querySelector; data-showsource-skip-selector="h1,h2,h3,h4,h5,h6,p" to skip the element that match these selectors
+skipSelector: null,
+// Add to skipSelector list (not overwrite the list) (*) created to be used in the declarative version in the data-showsource-skip-selector-add; has no sense in the programmatic version (not inherited)
+skipSelectorAdd: null,
+// Skip the children of the element, but not the element itself; data-showsource-skip-children="true" or simply data-showsource-skip-children to skip the children
 skipChildren: false,
-// Hide the attributes related to this plugin (inheritable)
+// Hide the attributes related to this plugin; data-showsource-hide-plugin="true" or simply data-showsource-hide-plugin to hide the attributes related to this plugin
 hidePlugin: true,
-// The attributes to be removed from the element
+// The attributes to be removed from the element; data-showsource-remove-attributes="class style" to remove these attributes from the element
 removeAttributes: null,
-// The class attribute to add to the main container div
+// The class attribute to add to the main container div; data-showsource-class="showsource myclass" to add the classes "showsource" and "myclass" to the main container div
 class: "showsource",
-// Number of characters to break the line of the tag (inheritable)
+// Number of characters to break the line of the tag; data-showsource-tag-line-break="80" to break the tag in a new line if the tag is longer than 80 characters
 tagLineBreak: null,
-// Max attributes number of consecutive attributes that may appear in a line (inheritable)
+// Max attributes number of consecutive attributes that may appear in a line; data-showsource-max-attributes-per-line="3" to break the attributes in a new line if there are more than 3 attributes in a row
 maxAttributesPerLine: null,
-// Space separated regular expressions that make that one attribute whose start matches any of them is rendered in a single line (i.e. no other attribute is rendered in the same line); e.g. if the value is data-* then all the attributes starting with data- will be rendered in a single line (inheritable)
-separateElements: null,
+// Space separated regular expressions that make that one attribute whose start matches any of them is rendered in a single line (i.e. no other attribute is rendered in the same line); e.g. if the value is data-* then all the attributes starting with data- will be rendered in a single line
+separateElements: null, 
 }
 ```
 
 The options can also be used in the declarative way, by adding the `data-showsource-*` attributes to the element that we want to extract the HTML content and to add the result after it.
 
 The possible options are:
 - `data-showsource-indentation` is the indentation to be used (the spaces at the beginning of the line), that will be accumulated when rendering the children. The default value is two spaces, so that the source corresponding to the children of the element will have two extra spaces at the beginning. The value is inheritable to the children.
-- `data-showsource-remove` is a space separated list of html elements (or selectors) to be removed from the element. The default value is `h1 h2 h3 h4 h5 h6 p`.
 - `data-showsource-hide` instructs the library to hide the render of the current element (i.e. the tag) itself, but not its children. The children will be rendered at the level of the current element. The default value is `false`.
+- `data-showsource-hide-selector` instructs the library to hide the render of the elements that match the selector (including the current element). The syntax is the same than using `document.querySelector`. The default value is `null`.
+- `data-showsource-hide-selector-add` is a list to be added to the list of selectors to hide. The syntax is the same than using `document.querySelector`. The default value is `null`. It has no sense in the programmatic version (not inherited).
 - `data-showsource-skip` instructs the library to skip the element, along with its children. The default value is `false`.
-- `data-showsource-skip-children` instruct the library to the children of the element, but not the element itself (unless the `data-showsource-hide` attribute is also present). The default value is `false`.
+- `data-showsource-skip-selector` instructs the library to skip the elements that match the selector, along with its children. The syntax is the same than using `document.querySelector`. The default value is `null`.
+- `data-showsource-skip-selector-add` is a list to be added to the list of selectors to skip. The syntax is the same than using `document.querySelector`. The default value is `null`. It has no sense in the programmatic version (not inherited).
+- `data-showsource-skip-children` instruct the library to the children of the element, but not the element itself. The default value is `false`.
 - `data-showsource-hide-plugin` instructs the library to hide the attributes related to this plugin (i.e. the `data-showsource-*` attributes). The default value is `true`. This attribute is inheritable to the children.
 - `data-showsource-remove-attributes` is a space separated list of the attributes to be hidden from the element. The default value is `null`.
 - `data-showsource-class` is a space separated list of classes to add to the main container div. The default value is `showsource`.
@@ -122,4 +129,10 @@ The default options can be changed by modifying the `showsource.defaults` object
 
 ```javascript
 showsource.defaults.indentation = "    ";
+```
+
+To skip the elements that only add text, when using comments while showing how to use a library, we can do the following:
+
+```javascript
+showsource.defaults.skipSelector = "h1,h2,h3,h4,h5,h6,p";
 ```

dist/showsource.js

@@ -26,9 +26,12 @@
     "use strict";
     let defaultOptions = {
         indentation: "  ",
-        remove: "h1 h2 h3 h4 h5 h6 p",
         hide: false,
+        hideSelector: null,
+        hideSelectorAdd: null,
         skip: false,
+        skipSelector: null,
+        skipSelectorAdd: null,
         skipChildren: false,
         hidePlugin: true,
         removeAttributes: null,
@@ -37,17 +40,26 @@
         maxAttributesPerLine: null,
         separateElements: null
     };
-    function beautify(el, userOptions = {}, indent = "") {
+    function extractCode(el, userOptions = {}, indent = "") {
         let elOptions = {};
         if (el.dataset.showsourceIndentation !== undefined) {
             elOptions.indentation = el.dataset.showsourceIndentation;
         }
-        if (el.dataset.showsourceRemove !== undefined) {
-            elOptions.remove = el.dataset.showsourceRemove;
+        if (el.dataset.showsourceSkipSelector !== undefined) {
+            elOptions.skipSelector = el.dataset.showsourceSkipSelector;
+        }
+        if (el.dataset.showsourceSkipSelectorAdd !== undefined) {
+            elOptions.skipSelectorAdd = el.dataset.showsourceSkipSelectorAdd;
         }
         if (el.dataset.showsourceHide !== undefined) {
             elOptions.hide = el.dataset.showsourceHide.toLowerCase() != "false";
         }
+        if (el.dataset.showsourceHideSelector !== undefined) {
+            elOptions.hideSelector = el.dataset.showsourceHideSelector;
+        }
+        if (el.dataset.showsourceHideSelectorAdd !== undefined) {
+            elOptions.hideSelectorAdd = el.dataset.showsourceHideSelectorAdd;
+        }
         if (el.dataset.showsourceSkip !== undefined) {
             elOptions.skip = el.dataset.showsourceSkip.toLowerCase() != "false";
         }
@@ -70,23 +82,46 @@
         if (options.skip) {
             return [];
         }
-        el = el.cloneNode(true);
+        if (typeof options.skipSelector === "string") {
+            let elementsSkip = options.skipSelector.split(",").filter(e => e.trim() !== "").join(",");
+            if (elementsSkip.trim() != "") {
+                if (el.matches(elementsSkip)) {
+                    return [];
+                }
+            }
+        }
+        if (typeof options.skipSelectorAdd === "string") {
+            if (options.skipSelector === undefined || options.skipSelector === null) {
+                options.skipSelector = options.skipSelectorAdd;
+            } else {
+                options.skipSelector += ", " + options.skipSelectorAdd;
+            }
+        }
+        if (typeof options.hideSelectorAdd === "string") {
+            if (options.hideSelector === undefined || options.hideSelector === null) {
+                options.hideSelector = options.hideSelectorAdd;
+            } else {
+                options.hideSelector += "," + options.hideSelectorAdd;
+            }
+        }
         let childOptions = Object.assign({}, userOptions, {
             indentation: options.indentation,
             hidePlugin: options.hidePlugin,
             tagLineBreak: options.tagLineBreak,
             maxAttributesPerLine: options.maxAttributesPerLine,
-            separateElements: options.separateElements
+            separateElements: options.separateElements,
+            skipSelector: options.skipSelector,
+            hideSelector: options.hideSelector
         });
-        if (typeof options.remove === "string") {
-            let elementsRemove = options.remove.split(" ").join(",");
-            if (elementsRemove.trim() != "") {
-                el.querySelectorAll(elementsRemove).forEach(function(e) {
-                    e.remove();
-                });
+        let beautifulElement = [];
+        if (!options.hide) {
+            if (typeof options.hideSelector === "string") {
+                let elementsHide = options.hideSelector.split(",").filter(x => x.trim() !== "").join(",");
+                if (elementsHide.trim() != "") {
+                    options.hide = el.matches(elementsHide);
+                }
             }
         }
-        let beautifulElement = [];
         if (!options.hide) {
             beautifulElement.push(indent + "<" + el.tagName.toLowerCase());
             let removeAttributes = [];
@@ -164,7 +199,7 @@
                         lines.pop();
                     }
                     beautifulElement.push(lines.join("\n"));
-                    beautifulElement.push("</" + el.tagName.toLowerCase() + ">");
+                    beautifulElement.push(indent + "</" + el.tagName.toLowerCase() + ">");
                 } else {
                     if (beautifulElement.length > 1) {
                         beautifulElement[beautifulElement.length - 1] += ">" + el.innerHTML.trim();
@@ -186,7 +221,7 @@
                             beautifulElement.push(indent + options.indentation + text);
                         }
                     } else {
-                        let beautifulChild = beautify(child, childOptions, indent + (options.hide ? "" : options.indentation));
+                        let beautifulChild = extractCode(child, childOptions, indent + (options.hide ? "" : options.indentation));
                         beautifulElement = beautifulElement.concat(beautifulChild);
                     }
                 }
@@ -195,7 +230,6 @@
                 beautifulElement.push(indent + "</" + el.tagName.toLowerCase() + ">");
             }
         }
-        el.remove();
         return beautifulElement;
     }
     function init() {
@@ -211,7 +245,7 @@
             let container = document.createElement("div");
             let pre = document.createElement("pre");
             let code = document.createElement("code");
-            code.textContent = beautify(el).join("\n");
+            code.textContent = extractCode(el).join("\n");
             pre.appendChild(code);
             container.appendChild(pre);
             classString.split(" ").forEach(function(c) {
@@ -227,8 +261,8 @@
     }
     window.showsource = {
         defaults: Object.assign({}, defaultOptions),
-        beautify: beautify,
+        extract: extractCode,
         init: init,
-        version: "1.1.1"
+        version: "1.2.0"
     };
 })(window, document);