feature improvements

-- Removed extra spaces and new line characters  from component string

components/dist/menu.js

@@ -80,16 +80,6 @@ smMenu.innerHTML = `
 .hide{
     display: none;
 }
-@media screen and (max-width: 640px){
-    .options{
-        position: fixed;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        top: auto;
-        border-radius: 0.5rem 0.5rem 0 0;
-    }
-}
 @media (hover: hover){
     .menu:hover .icon{
         background: rgba(var(--text-color), 0.1); 
@@ -147,7 +137,7 @@ customElements.define('sm-menu', class extends HTMLElement {
             this.optionList.classList.remove('hide')
             this.optionList.animate([
                 {
-                    transform: window.innerWidth < 640 ? 'translateY(1.5rem)' : 'translateY(-1rem)',
+                    transform: 'translateY(-1rem)',
                     opacity: '0'
                 },
                 {
@@ -174,7 +164,7 @@ customElements.define('sm-menu', class extends HTMLElement {
                     opacity: '1'
                 },
                 {
-                    transform: window.innerWidth < 640 ? 'translateY(1.5rem)' : 'translateY(-1rem)',
+                    transform: 'translateY(-1rem)',
                     opacity: '0'
                 },
             ], this.animOptions)

components/index.html

@@ -1938,7 +1938,6 @@
 
     <script id="default_ui_library">
         const domRefs = {};
-        const appPages = ["overview_page", "quick_start_page", "global_styling_page", "button_page", "carousel_page", "checkbox_page", "copy_page", "file_input_page", "form_page", "hamburger_menu_page", "input_page", "menu_page", "notifications_page", "popup_page", "radio_page", "select_page", "spinner_page", "switch_page", "chips_page", "tabs_page", "tags_input_page", "textarea_page", "text_field_page", "theme_toggle_page"]
 
         function getRef(elementId) {
             if (!domRefs.hasOwnProperty(elementId)) {
@@ -2212,7 +2211,7 @@
             else {
                 pageId = targetPage.includes('#') ? targetPage.split('#')[1] : targetPage
             }
-            if (!appPages.includes(pageId)) return
+            if (!getRef(pageId).classList.contains('page')) return
             document.querySelector('.page:not(.hide-completely)').classList.add('hide-completely')
             document.querySelector('.list__item--active').classList.remove('list__item--active')
             getRef(pageId).classList.remove('hide-completely')
@@ -2365,24 +2364,36 @@
             return await Promise.all(filesList)
         }
         async function downloadComponents() {
-            const selectedComponents = await getSelectedComponents()
+            const sourceCode = await getFormattedSourceCode()
-            if (selectedComponents.length) {
+            if (sourceCode) {
-                downloadJs(selectedComponents, { minified: getRef('get_minified').checked })
+                downloadJs(sourceCode, { minified: getRef('get_minified').checked })
             } else {
                 notify('Please select at least one component', 'error')
             }
         }
 
         async function copySourceCode() {
-            const selectedComponents = await getSelectedComponents()
+            const sourceCode = await getFormattedSourceCode()
-            if (selectedComponents.length) {
+            if (sourceCode) {
-                const sourceCode = selectedComponents.join("\n")
+                // replace all whitespace with single space and remove new line characters
                 window.navigator.clipboard.writeText(sourceCode).then(success => {
                     notify('Copied components source code')
                 }).catch(err => console.error(error))
             }
             else {
-                notify('Please select atleast one component', 'error')
+                notify('Please select at least one component', 'error')
+            }
+        }
+
+        async function getFormattedSourceCode(components) {
+            const selectedComponents = await getSelectedComponents()
+            if (selectedComponents.length) {
+                const selectedComponentsList = [...getRef('components_selection_list').querySelectorAll('sm-checkbox[checked]')].map(v => v.value)
+                // replace all whitespace with single space and remove new line characters
+                const componentsSourceCode = selectedComponents.map(v => v.replace(/\s+/g, ' ').replace(/\\n/g, '')).join("\n")
+                return `// Components downloaded: ${selectedComponentsList.join(',')}\n${componentsSourceCode}`
+            } else {
+                return false
             }
         }
 
@@ -2391,22 +2402,18 @@
             const files = await fetch('https://api.github.com/repos/ranchimall/standard-ui/contents/components/dist')
             allComponentsObj = await files.json()
         }
-        function downloadJs(componentsArray, options = { minified: true }) {
+        function downloadJs(sourceCode, options = { minified: true }) {
             const { minified } = options
-            const selectedComponentsList = [...getRef('components_selection_list').querySelectorAll('sm-checkbox[checked]')].map(v => v.value)
             const extension = minified ? '.min.js' : '.js'
             const element = createElement('a', {
                 attributes: {
-                    'href': 'data:application/javascript;charset=utf-8,' + encodeURIComponent(`// Components downloaded: ${selectedComponentsList.join(',')} \n ${componentsArray.join("\n")}`),
+                    'href': 'data:application/javascript;charset=utf-8,' + encodeURIComponent(sourceCode),
                     'download': `components${extension}`,
                     'style': 'display:none'
                 }
             });
-
             document.body.appendChild(element);
-
             element.click();
-
             document.body.removeChild(element);
         }
     </script>

components/index.min.html

@@ -327,7 +327,6 @@
 </script>
 </code>
 </pre></section></article></main><template id="nav_item_template"><li><a class="list__item interact"></a></li></template><template id="comp_checkbox_template"><sm-checkbox><span class="comp-checkbox__title"></span></sm-checkbox></template><script src="assets/prism.js" defer></script><script src="dist/button.min.js" defer></script><script src="dist/carousel.min.js" defer></script><script src="dist/checkbox.min.js" defer></script><script src="dist/chips.min.js" defer></script><script src="dist/copy.min.js" defer></script><script src="dist/file-input.min.js" defer></script><script src="dist/form.min.js" defer></script><script src="dist/hamburger-menu.min.js" defer></script><script src="dist/input.min.js" defer></script><script src="dist/menu.min.js" defer></script><script src="dist/notifications.min.js" defer></script><script src="dist/popup.min.js" defer></script><script src="dist/radio.min.js" defer></script><script src="dist/select.min.js" defer></script><script src="dist/spinner.min.js" defer></script><script src="dist/switch.min.js" defer></script><script src="dist/tabs.min.js" defer></script><script src="dist/tags-input.min.js" defer></script><script src="dist/text-field.min.js" defer></script><script src="dist/textarea.min.js" defer></script><script src="dist/theme-toggle.min.js" defer></script><script id="default_ui_library">const domRefs = {};
-        const appPages = ["overview_page", "quick_start_page", "global_styling_page", "button_page", "carousel_page", "checkbox_page", "copy_page", "file_input_page", "form_page", "hamburger_menu_page", "input_page", "menu_page", "notifications_page", "popup_page", "radio_page", "select_page", "spinner_page", "switch_page", "chips_page", "tabs_page", "tags_input_page", "textarea_page", "text_field_page", "theme_toggle_page"]
 
         function getRef(elementId) {
             if (!domRefs.hasOwnProperty(elementId)) {
@@ -598,7 +597,7 @@
             else {
                 pageId = targetPage.includes('#') ? targetPage.split('#')[1] : targetPage
             }
-            if (!appPages.includes(pageId)) return
+            if (!getRef(pageId).classList.contains('page')) return
             document.querySelector('.page:not(.hide-completely)').classList.add('hide-completely')
             document.querySelector('.list__item--active').classList.remove('list__item--active')
             getRef(pageId).classList.remove('hide-completely')
@@ -751,24 +750,36 @@
             return await Promise.all(filesList)
         }
         async function downloadComponents() {
-            const selectedComponents = await getSelectedComponents()
+            const sourceCode = await getFormattedSourceCode()
-            if (selectedComponents.length) {
+            if (sourceCode) {
-                downloadJs(selectedComponents, { minified: getRef('get_minified').checked })
+                downloadJs(sourceCode, { minified: getRef('get_minified').checked })
             } else {
                 notify('Please select at least one component', 'error')
             }
         }
 
         async function copySourceCode() {
-            const selectedComponents = await getSelectedComponents()
+            const sourceCode = await getFormattedSourceCode()
-            if (selectedComponents.length) {
+            if (sourceCode) {
-                const sourceCode = selectedComponents.join("\n")
+                // replace all whitespace with single space and remove new line characters
                 window.navigator.clipboard.writeText(sourceCode).then(success => {
                     notify('Copied components source code')
                 }).catch(err => console.error(error))
             }
             else {
-                notify('Please select atleast one component', 'error')
+                notify('Please select at least one component', 'error')
+            }
+        }
+
+        async function getFormattedSourceCode(components) {
+            const selectedComponents = await getSelectedComponents()
+            if (selectedComponents.length) {
+                const selectedComponentsList = [...getRef('components_selection_list').querySelectorAll('sm-checkbox[checked]')].map(v => v.value)
+                // replace all whitespace with single space and remove new line characters
+                const componentsSourceCode = selectedComponents.map(v => v.replace(/\s+/g, ' ').replace(/\\n/g, '')).join("\n")
+                return `// Components downloaded: ${selectedComponentsList.join(',')}\n${componentsSourceCode}`
+            } else {
+                return false
             }
         }
 
@@ -777,21 +788,17 @@
             const files = await fetch('https://api.github.com/repos/ranchimall/standard-ui/contents/components/dist')
             allComponentsObj = await files.json()
         }
-        function downloadJs(componentsArray, options = { minified: true }) {
+        function downloadJs(sourceCode, options = { minified: true }) {
             const { minified } = options
-            const selectedComponentsList = [...getRef('components_selection_list').querySelectorAll('sm-checkbox[checked]')].map(v => v.value)
             const extension = minified ? '.min.js' : '.js'
             const element = createElement('a', {
                 attributes: {
-                    'href': 'data:application/javascript;charset=utf-8,' + encodeURIComponent(`// Components downloaded: ${selectedComponentsList.join(',')} \n ${componentsArray.join("\n")}`),
+                    'href': 'data:application/javascript;charset=utf-8,' + encodeURIComponent(sourceCode),
                     'download': `components${extension}`,
                     'style': 'display:none'
                 }
             });
-
             document.body.appendChild(element);
-
             element.click();
-
             document.body.removeChild(element);
         }</script></body></html>