I'm creating a SPA website.
Based on the durandal template in visual studio, we have main.js file which defines:
app.setRoot('viewmodels/shell', 'entrance');
and we have 2 child page are welcome.js and flickr.js have been injected to shell page.
I want to inject a page to child page like welcome.js has been injected to shell.
It means that I want to have many levels child page with can be injected like this description:
Level 1 : index.cshtml
Level 2 : shell.js/shell.html
Level 3 : welcome.js/welcome.html - flickr.js/flickr.html
Level 4 : child1.js/child1.html - child2.js/child2.html.......
Level n : ............
You can indeed nest views, using child routers. See http://durandaljs.com/documentation/Using-The-Router.html (section 'Child Routers') for more info. However, from my own experience using child routers, nesting views creates a lot of problems. It also doesn't make sense to do this a lot, e.g. going 4 levels deep like you suggest.
It seems like you do not really want to nest views (views are sort of 'pages'), but you want to put certain elements into views, and maybe nest elements in elements, and give all those elements a viewmodel so you can give them behavior. If this is indeed the case, I suggest using Durandal's widgets instead: http://durandaljs.com/documentation/Creating-A-Widget.html
Widgets, in my opinion, are a lot more flexible than nested views through child routers.
Related
I've a weird issue in my Drupal 9 website where a couple of regions (subfeatures and footer) get rendered differently in different pages with no consistent behavior.
They are loaded via the theme's default page.html.twig and should render inside the page js-layout wrapper as in below screenshot
But in some pages, it gets rendered outside the wrapper like in the below screenshot
This is simple website with no overrides on the theme level for the regions so this is quite strange
Without knowing the theme, it is difficult to give an answer. (Which theme is used, which templates (which Twig file provides the theme) and so on...
But let me try to give you a starting point:
Check all twig files of your theme
If there is a multiple for page, like: page.html.twig & page--article.html.twig. Then check the HTML structure for it
Check the region's conditions
In the page-twig templates, check if the HTML closing tags depend on the region conditions. Is there a condition that the div sometimes closes earlier?
I hope this will help you.
Disclaimer: I inherited a Drupal 7.44 site with no experience in Drupal at all.
The business is trying to make a new webform and they want it to look exactly like an existing one. After looking around I found that the webform has a template tied to it. From the docs it seems I'm supposed to create more template files with the format webform-form-[nid].tpl.php where [nid] is the webform node id.
We have multiple environments that all changes must go through - dev, test, and finally prod. Wouldn't the node id be different in every environment for newly created webforms? Also, if I want to apply the same template to multiple webforms, do I really need to make multiple identical template files?
I also found some CSS styling for the existing webform and it looks like .webform-client-form-25 button.webform-submit and such. That 25 is the node id. I have little CSS experience, but this feels really bad. I don't want to copy blocks of CSS, changing node ids over and over. What's the proper way to assign generic, reusable CSS classes to webforms? I saw "Custom classes" under "Manage Display" when editing the form, but it didn't seem to change the actual HTML of the form. Was I on the right track though, should I just read some docs about it?
You are absolutely right, these detailed selectors do not make sense for reusable layouts.
Each webform HTML form gets a default class of .webform-client-form (that's generic) and an id including the webform's nid #webform-client-form-<nid>.
So, you could change #webform-client-form-25 to the class mentioned above. Please be aware, that this will affect all webforms then.
To set layout settings to several, but not all webforms, you need to give these webforms some class to distinguish them from the rest. Sadly, the Webform module itself doesn't provide an option to do that, but you can add a form alter hook in your theme's template.php:
function mytheme_form_alter(&$form, &$form_state, $form_id) {
$affected_forms = array('webform_client_form_25', 'webform_client_form_37', [...]);
if (in_array($form_id, $affected_forms)) {
$form['#attributes']['class'][] = 'my-custom-class';
}
}
With .my-custom-class you can then define CSS just for the group of webform forms listed in $affected_forms.
As for the template files, Webform itself states:
This file may be renamed "webform-form-[nid].tpl.php" to target a specific webform on your site. Or you can leave it "webform-form.tpl.php" to affect all webforms on your site.
So, again, it doesn't provide an option out-of-the-box, but you can create theme suggestions in your template.php by extending $vars['theme_hook_suggestions'] in a page preprocess function.
Hi guys I'm looking for a Polymer-type checklist filtering element: http://docs.telerik.com/devtools/aspnet-ajax/controls/grid/functionality/filtering/checklist-filtering
There would be a list with checkboxes and maybe a select all item on top. And then there will be like a paper-input on top that allows filtering of items below.
I can hack together a checklist-filtering component using paper-input and iron-dropdown. Maybe I would make something like this https://github.com/samccone/paper-typeahead, assuming that nothing is available as of now.
No.
Most of existing and shared Custom Elements can be found at:
Component Kitchen
Custom Elements IO
There's also an alternate Material Design Library with elements that you could reuse to build your custom element :
ExpandJS
I know that I need to add the tracking code snippet at the bottom of all my pages, but is there a central location to do this?
Or do I need to add this tracking code to all of my templates?
I guess that I could wrap the snippet in a user control, or external .js file, and reference it on each page, but is there a global footer somewhere? The site I'm working on has about 30-40 layouts, and adding it to each one would be a pain!
Thanks in advance!
Actually, the role of a Sitecore layout is exactly this; to act as a global file that all individual page templates "derive" from.
Normally you'd stick the analytics code into the master layout, and use Sitecore sublayout/placeholder techniques to construct the various page templates you need. You would not normally need more than perhaps one or two layouts for any device you are serving content to. And I guess for most sites, the only device in use is regular web content delivery.
That being said, what you could do, is have all the layouts inherit their codebase from a common base class (inheriting from Page), and inject the google code centrally from here. Would still require you to go through all layout files however.
I have not tried the module, I think that is codebehind version. I have made this in XSLT, its pretty fast and easy to make. I have footer.xslt where I put the code that simply checks if page you are standing on uses template that I want to index and does not belong to page names that I want to exclude. Then I have an item with a custom template for Google Analytics with following memo fields.
IncludeTemplates -field contains list of templates that I want to include for analytics :
ExcludeItemsNames -field for excluding pages by item name
contains($includeTemplates, concat('|',./#template,'|')) and not(contains($excludeItemNames, concat('|',./#template,'|')))
Remember #key and #template is always in small letters
If you run many domains don't forget to add pageTracker._setDomainName("www.example.com"); in analytics script so you can separate sub-domains etc. if they use same footer.xslt
Normally we consider the actual Google code as content. Within Sitecore we normally have a settings folder, something like /sitecore/content/settings. This exists outside the root of the site. Beneath this have a settings item with a plain multi-line text field, I think the field type is memo or something similar.
Afterwards create an XSLT that renders out the content of this settings item. Something like (assuming the field is called value in the setting item):
<xsl:value-of select="sc:fld('Value','/sitecore/content/settings/footerJavaScript')" />
You may or may not need to set the disable-output-escaping attribute.
Then on the aspx page that your pages use as the template add a control that looks at the xslt rendering:
<sc:XslFile runat="server" Path="/xsl/footerJavaScript" />
The reason that we normally keep the javascript as content is this allows the client to change the analytics code without having to contact us.
Is there a module in Drupal that allows me to put link at the end of a page?
http://lh6.ggpht.com/_SDci0Pf3tzU/Sfm7vF_MSiI/AAAAAAAAEtY/VX3BXaMOfSM/s400/linksatend.jpg
I tried to use menu and put it as a block at the footer, but the menu items are arranged vertically, instead of horizontally.
Is there anyway to do it without ( preferably) touching the CSS and HTML?
changing the menu items from vertically to horizontally is a matter of 1 or 2 css rules. which is why i doubt that there is a module for this. if you would post a link to your site, or the html + css, i could help with the css.
Links at the end of the page can be controlled by a few different things.
First, check the Blocks administration and see if there is a content area for the footer. Maybe there is a block there that is controlling these links.
Next, depending on well the theme is built, check the configuration options under Admin > Site Building > Themes > Conigure > (Your theme). Many have options to change what links display in the footer.
Lastly, check the page.tpl.php. They could also be hard-coded in the template (which is bad) and edited from there.
In terms of answering your question about 'a module to alter links', you can see that since the links can be controlled from different places, a module just for this purpose would be pointless. The correct way is to set the appropriate options in template.php so it can be configured in your theme settings.
You might have some luck using the Nice Menus module - it's intended to create animated menus but if you give it a flat menu tree, it might be close enough to what you want. If that doesn't work, there's about 100 modules dealing with navigation.
Still, the best way would be to place the menu's block in the footer and modify the theme to flatten it with CSS.
Assuming you don't won't to touch the theme, maybe because you're using an unmodified contrib theme, you can use either of two approaches:
create the block by hand as a custom HTML block, which gives you full control over the contents. The main downside is that you'll have to maintain it by hand instead of using admin/build/menus
create a PHP block, either custom (boo !) or in your site-specific module (better), to generate a block with markup appropriate for the theme you're using, based on the actual primary links, which you obtain from menu_primary_links(). Downside it that you have to create a site module if you don't already have one, or that you'll have to enable the PHP filter if you create it as a custom block.
This being said, I think you'd still be better off modifying the theme if it's a custom one, or creating a sub-theme for the theme you're using if it's a contributed one. It will be less work and, this being a matter of appearance, falls rather in theme scope than in module scope.