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?
Related
While docusaurus offers full control over the content/structure of the document (pages/docs), this control is embedded inside an uncontrolled (DOM) parent.
If for example I want to have different padding to the entire page but only for the index page, I have no way to do so other than change the value using javascript.
Isn't there a way to somehow insert the document id into the DOM, something like:
<body id="document_id">
Or class= instead?
Or, is there any other way for me to write specific css rules or js logic for specific pages?
Docusaurus maintainer here! Sorry for the late reply. For the root of index pages, there's the homeContainer class by default. Could you add your padding there?
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.
I develop WinJS Navigation app (Windows 8.1/WP 8.1) and there's one problem: I've linked .css file to only one .html file, but when I go to any other .html page and if it has any same class then app applies .css from first page I went!
I don't link that .css to host (default.html).
It's not depending on which Visual Studio I use.
I have same bug in WinJS 2.0, 3.0 and 4.4.0.
There's a question: why does WinJS do this? Is there any solution or workaround?
You can reproduce my problem on your VS2013 or VS2015: zip (debug Windows project, not WindowsPhone).
When using WinJS navigation and page controls, the "navigations" are happening with DOM replacement inside the single context of default.html or whatever your root app page is, and not by dumping default.html (and all the CSS/JS that's been loaded) and initialized a new page context.
This single-page navigation model provides several benefits: it preserves the global JavaScript context and allows you to do animations/transitions to move elements on and off the page. If you truly navigate to a new page altogether, you'd reset the JS context and would always navigate through a blank page.
The side-effect, as you're seeing, is that any and all CSS that gets loaded in the course of page navigations is cumulative. That is, a "navigation" in WinJS does not reset any contexts, including CSS, and this can be tricky to manage.
There are several ways around this:
Use a global CSS file and avoid using page-specific CSS unless you know something is unique to a page.
Make sure each page has a top-level div with a page-name class like <div class="page1"> and then scope all styles for that page in your CSS using .page1 selectors.
Specifically load and unload CSS files by modifying <link> tags in the page header. This is really the only way to unload CSS, but also means reloading and reparsing the CSS files which will cause a page to re-render.
Generally speaking, I think option 2 is best and most portable.
For a longer writeup, see the section "Page-Specific Styling" in Chapter 3 of my free ebook, Programming Windows Store Apps with HTML, CSS, and JavaScript, 2nd Edition, and I've written up similar material on my blog, http://www.kraigbrockschmidt.com/2013/05/02/css-loading-behaviors-winjs-page-controls/.
I have a chat website using node js and angular, and I have made the login/signup and chat page using these. but the problem is, whenever I load the chat page it uses the style from the other pages, and basically acts like a different section of the same page, It also merges the login/signup together, which is ok, because they have the same style just different number of form boxes, I want to stop angular from merging the styles from the login/signup with the chat and have it use its own style.
All help would be very much apreciated, thanks in advance.
And as far as I have been told and know, there is nothing in my own code that is preventing this, it is only angular itself. strong textBy the way, As far as I know, certain things the body of the different pages cant be individually styled, and If I were to merge html's it would take a while and research and I dont really want to do so.
The idea of loading pages as partials is not loading its css and js files etc.
You need to have only one file as index.html and inside,
define <ui-view> tag this is where you have to load all your partials to, but not an entire page, having html tags and everything.
Take a look at this pattern to load all your partials into one file.
and then,
I highly recommend you check this web site out to set nodejs to set all the missing routes to your html file as well as defining your "/css", "/js" etc.
I have just merged these two working methods to make a very concrete restful application structure.
All you have to do to avoid this problem is to write your css with starting parent class. In this way your css will work only if you have parent element with specific class.
.signIn .button {
}
.chat .button {
}
Write it like this and the button in different elements will have different style
I'm new to angular development. I have been using a few paid angular admin themes. In all of them, developers have only added ng-view and ng-class attribute to index.html. I just want to know how to add a sidebar navigation and a footer to every page without using any ng-include.
If you do not want to use ng-include, you can put your HTML directly in the index.html. That is called a layout template, which is the view that contains the common elements along your application.
In summary, everything in index.html outside the ng-view element is going to appear in every page (as long as you use any module such as angular-route for routing within the same original HTML document (e.g. index.html)).
I would recommend you to follow the official AngularJS tutorial if you are new to this framework. Also, ng-book by Ari Lerner is a must-read on this topic.