Create a global svelte-component that works like svelte:head - javascript

In my current project I am working with a self-developed module system, where the individual modules should also have the possibility to extend e.g.the navbar by simply writing some HTML inside a <navbar:extend> tag.
It would be cool if there was a way to get it done with as little writing as the <svelte:head> tag.

What about creating a store to which you will write (update with) your HTML extensions from your Components and at the same time subscribe to that store within your NavComponent then within NavComponets append the new HTML using {#html variable}
like that you can append HTML from different components to your Navbar, this should achieve the functionality you desire.
here is a quick example of the implementation
Child1.svelte and Child2.svelte are two random components which are going to update you navbar.
Store.svelte is the file where you will create your global store to share HTML.
Nav.svelte is the navbar you want to populate with HTML from other components
try writing some HTML within Child1 and Child2 input fields then submit it, it will be rendered within the NavComponent

Related

Angular: How to do the Components Architecture the right way?

I'm currently trying to create a Angular-Webpage for a Uni-Project. Therefore i've built up a Webshop-MockUp with several different Pages like
Startscreen
Productscreen
Register/Loginscreen
Shopping-Cart Screen
Order-Screen
and Profile-Screen.
But as I'm now trying to develop the Webshop with Angular, I'm not quite sure, how the Architecture of the Component-Concept of Angular will fit to my needs.
As long as I understand for now it's working like that:
You create a Page with several (reusable) Components which all define different areas of one page.
For the example of the Startscreen, i've created the components:
hero-banner
header
filtering
product-overview
shopping-cart (will be shown on the right side)
These 5 Components can then be added to the app.components.html to show the first page.
But now I have no idea, how to create the other 5 pages and display them inside the app.component.
I've heard about the Routing to switch between components..
But does that mean I have to create one parent-component for every page where I tipe in these different components I've been creating?
And if so, what do I write into the app.component.html if I can Route between the different components anyways?
I just got a big knot in the head right now and I really hope you can help me out here!
Thanks in Advance!
Yep parent component for each page to act as manager component to talk to services, get data, and pass it down to dumb components and handle events from child components. Make your children dumb. This is known as container-component.
Yep learn routing. Also lazy load whenever you can but you can refactor this in later.
<router-outlet></router-outlet> goes in app.component.html.
Possibly something like
<app-navbar>
Text to display via ng-content
</app-navbar> <!-- Common to all routes/pages --!>
<router-outlet></router-outlet>

Get HTML from Vuetify components without posting it on the dom

For my own project I would like to fetch HTML code from multiple Vuetify components. Not as a HTML string, but really as a DOM element that can immediately be appended to the body. I want this so that I can use these components in a non Vue environment.
Is there any way I can accomplish this?
I'm not entirely sure what your use case is for this. If you could elaborate on what you're trying to achieve, I could likely give a better answer.
I've had some similar requirement in the past, where I needed to access the entire HTML content of components/sub-components.
How I did this was by rendering the components in an iframe. From there, you can access and modify the mounted iframe DOM.
I can't find the source code on how I did this but perhaps concept/approach could serve as a starting point.
From a cursory internet search, I found this link https://jsfiddle.net/ohznser9/ with a JS Fiddle demonstrating a i-frame component that takes Vue components as a slot.
I'd imagine you could extend this component to add functionality to modify or extract elements from the DOM.
Perhaps you could load the iframe invisibly, grab the DOM elements from that and do what you wish with them

Dynamic content of app-header using Polymer Starter Kit

I am writing an app using the Polymer Starter Kit, which uses the app-layout elements.
I would like to have different contents in app-header depending on the page being viewed. For example a list of people will have a menu to enable filtering, etc. The title will change too.
It's important that each page decides what goes into app-header.
What's the neatest way to do this?
I can think of different paths: having a iron-page-like selector within app-header could work; but... as I said, ideally each page would have an element that would then be "placed" there.
Maybe using global variables too?
Thoughts?

Using feature flags in complex UI changes

To simplify matters, lets say there's a single HTML page with it's CSS and JS file. No server.
Now comes a request to toggle features on/off in this simple web UI.
The problem is, for example, a new feature would mean changing the HTML structure to add a new component, so now the HTML is a little different.
Also, the CSS of the page itself needs to change in order to support the new component. also, of course, there is javascript code that needs to be changed to fit with the changes made to the HTML..
Of course, if this component was completely "isolated" and had just it's own CSS, javascript and html template file, it was much much easier, but it does require changes to things around it, to the HTML/CSS/JS of the page it resides in.
How can such a complex process be reduced to a simple "feature toggle"?
Also, to bring the complexity to a new level, this new feature might need changes to some library version used in the project, but that's a whole other level of difficulty when toggling features.. but lets ignore this part on the discussion because I am more interested on the matter mentioned above.
I came up with the following way:
System is basically made out of:
index.html (basic HTML entry point which everything loads into)
HTML template files
SCSS files
Architecture-related javascript files
javascript controllers (kinda like pages. control page events and which components to use in it)
javascript components (imagine tables, grids, tree menus, breadcrumbs...)
home.html template example:
<div class='col'>
<component class='line-chart'></component>
<component class='table'></component>
</div>
<div class='col'>
<component class='bar-chart'></component>
</div>
Steps I did (Simplified):
Create a way to switch features on/off within the UI:
Create aמ architecture (system/app-related) javascript file which its task is to create a dropdown which from a person could choose which features to toggle, and the result is saved in localstorage.
Append the dropdown to the page.
When a user selects a feature, reload the page and after refresh, read the features from localstorage and save them to the architecture state object, under the property "features", to be used later.
Create a feature: "home-v2"
So, I'm working on the Master branch (like a boss) and I want to create some big changes in some page, and add a few components and move other existing ones around. What I did was:
Copy the SCSS file of the page _home.scss and rename to _feature-home-v2--home.scss (it will be automatically imported via the main.scss using globbing)
Copy the template file of the page home.html and rename to feature-home-v2--home.html
Import the javascript components files which will be used to the page controller javascript file.
Write some if statements
This is the "ugly" part, where I must set what to will be done according to each feature. So, for my new example feature home-v2 I will need to do a few things:
go to the home page javascript controller file and go to the line where I load the HTML template, and check if the app State "features" object for
something like this:
var templateName = `home`;
if( app.state.features['v2--home'] )
templateName = `feature-home-v2--` + templateName;
Now that the page is using a different HTML structure, which can look like similar to the default home page but with more components and some are in different order:
feature-home-v2--home.html template example:
<component class='breadcrumbs'></component>
<div class='col'>
<component class='table'></component>
<component class='line-chart'></component>
</div>
<div class='col'>
<component class='pie-chart'></component>
</div>
I can now load the imported controllers to where they reside (before they might have been imported but weren't initialized on the page).
Thoughts on the process:
Hitting ctrl-p in Sublime and starting to type feature- will show only the feature-related files.
Produce larger output from the build process, and doesn't use different GIT branches per-feature.
Features should be merged quickly/discarded so the code won't get messy with many features.
using all the features on a single-branch allows to quickly adding/removing with ease of a custom dropdown with checkbox/radio.
GIT commits must be remembered to be named according to the feature worked on, to maintain GIT order with sensible names.
For more complex changes, other files might be needed to be cloned and renamed, even top-order controllers themselves.
I think the best way to replicate flags is to just create a JSON file with ids that you want hide. Then just have the Javascript FileReader (https://developer.mozilla.org/en-US/docs/Web/API/FileReader) read in, parse the JSON, and hide the mapped ids that are false.
Lets say your toggable feature were the following input boxes:
<input id="input_box"/>
<input id="input_box2"/>
Your text file would contain this:
{
input_box: false,
input_box2: true
}
input_box would be hidden, while input_box2 would be shown. This seems like the only way to enable flags, unless you want to put it in the URL.

Material Design Lite JS not applied to dynamically loaded html file

I want to unify the navigation layout for my website, so I created a separate html file that holds the code for the navigation. I use a JS to load the file dynamically:
$("#navigation").load("/navigation/navigation.html", function() {
$.getScript('/material.min.js');
});
The problem is that the material.min.js does not get executed for the dynamically loaded components inside this html and I lose some crucial functionality. How do I fix that?
Check if the componentHandler is loaded, and try to upgrade the elements after load.
if(!(typeof(componentHandler) == 'undefined')){
componentHandler.upgradeAllRegistered();
}
How the Component Handler works
In short this goes over all registered components. Queries for all nodes with the provided CSS class. Loops over those and instantiates them one-by-one. When the upgrade is done on a node, the upgraded object is added to the dataset. This object contains a comma separated list of component classAsString properties to identify which upgrades have been done.
From the official docs:
Material Design Lite will automatically register and render all elements marked with MDL classes upon page load. However in the case where you are creating DOM elements dynamically you need to register new elements using the upgradeElement function.
So loading the material.js script again will not execute it. But you can do some experiments with upgradeElements by applying it to the whole loaded markup or to particular elements.

Categories