The main concept is to introduce a feature that allows the creation of linkable components that can exist independently from pages. These linkable components can be later selected and included in various pages. Importantly, once included in pages, these components cannot be directly edited within those pages; instead, any editing is done independently.
The primary advantage of implementing this idea is to minimize the risk of losing connections between components and pages while also streamlining the design process to a user-friendly âdrag & dropâ level. By restricting direct editing from active pages, it is anticipated that the applicationâs processing will improve, and issues related to past linkages will be resolved.
Thank you for sharing your idea! One thing that is not very clear is how these components will be edited. Will they open in a blank design where editing will take place?
@martin
If I understand the OPâs idea, basically, they would be similar to the saved User components. Letâs call them âUser Linkedâ components.
The âUser Linkedâ components would be just like the User components, except whenever a website is opened that contains a component from the âUser Linkedâ library, the program would be aware that the website contains a component from the âUser Linkedâ library.
If a person edits a âUser Linkedâ component on the open website, BSS would present a dialogue box asking, âDo you wish to update this Linked component in your User Linked library?â If you click yes, then the component would be saved, and anytime you open another website that contains this âUser Linkedâ component, it would either automatically be updated to the latest version, or a dialogue box could appear asking something like, âThe (XYZ) User Linked component in this website was updated on (date). Do you wish to update all instances of this User Linked component to the latest version?â
I personally think itâs more complicated to try implementing this on a ânew userâ end. Right now itâs a perfect fit the way it is. You copy something from one open page/open design and âPaste Linkedâ to the location you want it. How much easier do you need it to be would be my question.
The current way there is no âparentâ linked item which means you can edit any of the linked item and their linked components will all update, no matter what page youâre on. Simply brilliant in my opinion.
Just my opinion of course, but I like it the way it is.
Theyâll be edited like any other page. unlike normal pages, the linked component page wonât have the html structure tags ⌠it starts with the component like
I liked the term âlibraryâ. you got the core idea⌠this suggestion assume any changes done to the linked component its done deal, no dialog to confirm for update. if linked component is updated then the update is applied where ever it is used.
There should always be a confirmation dialogue when something is being overwritten. You can always have an option to allow the confirmation to be disabled (ie. âCheck here to not see this confirmation again.â)
I love the way the current linked component system works, and I wouldnât want to change it. But one thing I do find is that Iâll create something useful that I use over and over again on many websites. Iâll add it to my User components. Letâs say itâs a navigation menu with social media icons in it.
So one day Iâm working on a website with this navigation menu and I remember that YouTube has updated its icon to a newer version. So I change it in my navigation menu (which is linked on all the pages of my website) and, âboomâ the new icon is now on all my pages.
But the navigation menu saved in my User library still has the old YouTube icon. So I go in and delete that old component and save the now updated navigation menu, giving it the same name.
Now, suppose I have ten other websites in which I also use that same navigation menu. Wouldnât it be great if the next time I open one of those websites, a dialogue box pops up saying, âThe linked navigation menu in this website has been updated since the last time you opened this file. Would you like to update it to the newest version?â
All Iâd have to do is open each of my websites that uses that navigation menu and click âyesâ on the dialogue box.
The way it is now, I would have to open every website and change the YouTube icon on each one.
I like the term parent. the current method is working and its simplicity is king⌠i admit.
the âuser linked libraryâ makes it easier to find commonly linked parts, no need to open a page copy then switch to other page and past linked. the more important part the linkage canât brake without removing the component. i believe this method remove the risk of editing linked part on one page then it does not reflect on the others.
what would be complicated by awesome (inspired by your term⌠parent) a parent structure with area that can be edited. this will be crazy! the html code below is an example of parent with editable areas:
<html>
<body>
<header>
<h1>site name</h1>
</header>
<div class=container>
<aside></aside>
<section>
the inner html of this can be edited on page
</section>
</div>
<footer>
<p>all right reserved!</p>
</footer>
</body>
</html>
the current suggestion assumes the component is an asset to the active project so changing it wouldnât affect other projects.
to reword the suggestion, it function 90% like the current past linked. the different is âcontrolâ. the linked component cant be edited within a page, it must be edited independently. and it is referenced in a library list where user can drag and drop to pages.
when rethink the idea, the linked components should be more like assets. it is stored within the Design tab. they open to edit like any page (but only contain the component codes, not a full page structure). any changes reflect immediately to all pages where it is linked.
Thank you for the feedback! I can see how this could be useful. We do have something similar even now - User components. Maybe all thatâs needed is for the app to scan designs you open for instances of User components, and to offer you the option of updating them?
Maybe a user component could have some kind of visual indicator in the Overview panel (a different color, or symbol, etc), to show that itâs not just a regular BSS component. And, if you change some aspect of a User component in a website, the visual indicator should show itâs been modified.
Then maybe you could add an option in the Overview panel so when you right click on a modified User component, the pop up would offer an option to âUpdate modified User componentâ which would then save the changed version back to the User component library, overwriting the original.
the user component is more like a clone of the component. changing the component in the library wonât change it in the project. printninja thought âhaving a popup to alert that the user component has been updated and ask if the update should reflect in the projectâ is the med-point between my thought and what the current user component library does.
the user component is not the idea⌠the idea treat the linked component like a project asset, any change to that asset will immediately reflect wherever the asset is being used. the linkage between the asset and page cannot be unlinked except by removing the component from the page. the component asset page does not contain full html page structure, just the component code and any assigned JS, CSS files linked to the asset.
Other than the strong binding for commonly used components and pages, my current project highlight the great benefit of having an html assets (again, an html that does not contain html, head, body tags). I have a page that jQuery.load() different modals per user choice.
At this time I make the modal as full page then extract the modal code out and store it in external file so it can be called and append to the proper page. If i needed to update or correct that modal I have to reinsert the code back to the project, change it, then cut it back to its storage file.
Iâd love to have an option to just have it within the project and not having to copy-past over and over. for many time when converting the code from HTML to component the CSS classes duplicate and i have to clean up the code over and over.
You can load HTML code from one page and inject it on another page with the DOMparser
You have the same data attribute on both pages data-YourComponentName
On the component.html you add a div with your component code like this
<div data-contact>
// your contact modal html code here
<style>
// your CSS here if you want scoped css for the component
// if not no need for the style tag
</style>
</div>
<div data-othercomponent>
// your othercomponent html code here
<style>
// your CSS here if you want scoped css for the component
// if not no need for the style tag
</style>
</div>
on the page where you want to inject the component you add <div data-contact></div> <div data-othercomponent></div>
where you want the components
add this js snipper into a js-file
class ComponentLoader {
constructor() {
this.baseUrl = 'component.html';
this.contentCache = {};
}
async fetchContent(shouldClearCache = false) {
if (shouldClearCache) {
delete this.contentCache[this.baseUrl];
}
if (!this.contentCache[this.baseUrl]) {
const versionedUrl = this.baseUrl + '?v=' + Date.now();
const response = await fetch(versionedUrl);
this.contentCache[this.baseUrl] = await response.text();
}
return this.contentCache[this.baseUrl];
}
loadComponent(selector, clearCacheParam = 'false') {
const shouldClearCache = clearCacheParam === 'true';
this.fetchContent(shouldClearCache).then((content) => {
const data = new window.DOMParser().parseFromString(content, 'text/html');
const body = data.querySelector(selector);
const targetNode = document.querySelector(selector);
if (targetNode && body) {
const clonedNode = body.cloneNode(true);
targetNode.parentNode.replaceChild(clonedNode, targetNode);
}
});
}
static loadComponentWithSelector(selector, clearCacheParam = 'false') {
const loader = new ComponentLoader();
loader.loadComponent(selector, clearCacheParam);
}
}
// you use it like this
ComponentLoader.loadComponentWithSelector('[data-contact]');
ComponentLoader.loadComponentWithSelector('[data-othercomponent]');
// Load a component and optionally clear cache using the static method
ComponentLoader.loadComponentWithSelector('[data-contact]', 'true');
Here is another example how to inject modals and forms depending on a table headers
