RanchiMall/standard-ui
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feature improvements

Browse Source 
-- Removed extra spaces and new line characters  from component string
This commit is contained in:
sairaj mote 2022-12-11 19:33:36 +05:30
parent d46e5656a3
commit 13b9c16d59
4 changed files with 47 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
components/dist/menu.js vendored
View File

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

2
components/dist/menu.min.js vendored
View File

File diff suppressed because one or more lines are too long

37
components/index.html
View File

@ -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()
if (selectedComponents.length) {
downloadJs(selectedComponents, { minified: getRef('get_minified').checked })
const sourceCode = await getFormattedSourceCode()
if (sourceCode) {
downloadJs(sourceCode, { minified: getRef('get_minified').checked })
} else {
notify('Please select at least one component', 'error')
}
}
async function copySourceCode() {
const selectedComponents = await getSelectedComponents()
if (selectedComponents.length) {
const sourceCode = selectedComponents.join("\n")
const sourceCode = await getFormattedSourceCode()
if (sourceCode) {
// 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>

37
components/index.min.html
View File

@ -327,7 +327,6 @@
&lt;/script&gt;
</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()
if (selectedComponents.length) {
downloadJs(selectedComponents, { minified: getRef('get_minified').checked })
const sourceCode = await getFormattedSourceCode()
if (sourceCode) {
downloadJs(sourceCode, { minified: getRef('get_minified').checked })
} else {
notify('Please select at least one component', 'error')
}
}
async function copySourceCode() {
const selectedComponents = await getSelectedComponents()
if (selectedComponents.length) {
const sourceCode = selectedComponents.join("\n")
const sourceCode = await getFormattedSourceCode()
if (sourceCode) {
// 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>