I would like to have two or more grid-stack (https://github.com/troolee/gridstack.js) containers and move the items (portlets) between them. How to register this containers, so the portlets can be moved from one to another container? And after that, how can I become the serialized positions for each container?
Example:
<div class="grid-stack" id="grid-nav-left"></div>
<div class="grid-stack" id="grid-body"></div>
<div class="grid-stack" id="grid-nav-right"></div>
Thanks!
Nik
Related
I am setting up some heavy split testing using dust.js on my single page app.
The base template looks like (simplified):
{>"layouts/master" /}
{<body}
<div id="container">
{?home}{>homeWelcome/}{/home}
</div>
{/body}
What I'm trying to do is have a folder containing N versions of the homeWelcome partial, and send N through the model to select the right template, like so :
{<body}
<div id="container">
{?home}{>/splits/homeWelcome_{partialNumber}/}{/home}
</div>
{/body}
But it (unsurprisingly) doesn't compile.
I could send params to the one homeWelcome template, and have all my splits in there but some are radically different from the others and it'd make for one hell of a long file.
In addition to that, I want to be able to add/remove partials in the splits directory dynamically (partialNumber is a rand from 1 to the number of files in the dir).
Any ideas how to achieve that?
Just add double quotes around the partial name and dust will happily parse the string before including a partial.
Note that partial names don't necessarily relate to folder structure, but I'm assuming you are compiling your templates with the appropriate names.
Is there an alternate way I can get this to process with Thymeleaf? Thymeleaf doesn't like the open tag, but I want to only render it for ROLE_A.
<span sec:authorize="hasRole('ROLE_A')">
<div class="col-xs-10">
</span>
bunch of text not specific to ROLE_A
<span sec:authorize="hasRole('ROLE_A')">
custom text specific to ROLE_A
</div>
</span>
I tried using
<sec:authorize="hasRole('ROLE_A')">
and
<div sec:authorize="hasRole('ROLE_A')">.
The former also doesn't run due to the same open tag issue and the latter is mixing up the closed div tags.
I have numerous blocks like this, so duplicating sections for different roles is not a great solution.
Not in the style you want. You need to close those elements.
My advice is then consider using fragments and load them as required with the needed data/
That way you reuse existing code thus making it cleaner and smaller.
For more examples and way you can do the above check out the Thymeleaf page http://www.thymeleaf.org/doc/springsecurity.html.
$.mobile.pageContainer refers to the element that contains other virtual pages. It is set to <body>. So I assume that it can be changed. Indeed, some JQM methods (changePage) lets you specify non-default page container for a page. The JQM docs are lacking the necessary details. So my questions are:
Can you change the default page container in markup/code? How?
What are the reasons to have a page container other than <body>?
Does it mean that there can be multiple page containers with some "pages" residing in one page container and other "pages" residing in other containers? Why would you want to do this?
1 You can place your page divs within a container element in markup.
2 I use ASP.Net Webforms which requires a FORM element, so sometimes I add my jQM pages to a top level FORM instead of the body allowing me to use ASP.Net controls within my separate pages while sharing the same FORM element.
3 I think you need to keep all pages within the same container, otherwise links between pages break. Here is a jsFiddle with 2 pages in a container linking to eachother. Try putting them in separate containers and you will see the linking stop working.
<div id="PageContainer1">
<div data-role="page" id="page1">
<div data-role="header">
<h1>My page 1</h1>
</div>
<div data-role="content"> Go to Page 2
</div>
</div>
<!-- insert separate container here
</div>
<div id="PageContainer2">
-->
<div data-role="page" id="page2" data-theme="a">
<div data-role="header">
<h1>My page 2</h1>
</div>
<div data-role="content"> Go to Page 1
</div>
</div>
</div>
UPDATE: As pointed out in the comments, you can certainly navigate to pages in other containers via changePage, just the standard href="#page2" links break.
$.mobile.changePage("#page2", {"pageContainer": $("#Container2")});
I am not sure of a use case for having separate containers, perhaps code organization?
I have a ContentPlaceholder inside of a MasterPageView. All of my other pages come from the same master and I have one page that needs about 70% of the behavior in this master. There is a navigation panel in the master that is spitting out un-necessary html even if left blank by the page. Looks like this:
<div class="span3">
<div class="side_navigation">
<ul>
<asp:ContentPlaceHolder ID="SideNavigation" runat="server" />
</ul>
</div>
</div><%-- /master sub-navigation --%>
I simply want to hide ALL of this markup whenever my placeholder (SideNavigation) has 0 children. I don't want to use javascript. I'd rather do this work on the server and deliver it to the client with less responsibility and markup. I've already tried doing "this.SideNavigation.Controls.Count" but it always ends up being 0. If there was a way I could tie into a loaded event and then test this logic that would be great. I am ok with making a code-behind file for my master, but it would be nice to be able to accomplish my goal in the .master file only.
Let me know what you think.
I would probably recommend using a different master page for the page without the navigation. You can have nested master pages so you don't necessarily need to duplicate code to do this.
However if you do wish to keep it like this, I would personally use a bit of javascript (with jquery) as follows
$(function(){
if($('.span3 .side_navigation ul li').length() == 0){
$('.span3').hide();
}
});
obviously i'd give span3 an ID to make it not hide every span3 but you hopefully get the idea.
I have a Document Type, that has a tab with some properties.
The properties are Upload types, and Simple Editor types.
(Users are supposed to upload images with some image text).
I have not grouped the "Upload" and "Simple Editor" properties, so how do i do this?
Next question,
I want to loop through each group (there should be 3 currently) and display them on my website.
The markup should look like the following:
<div>
<img src="PATH-TO-UPLOAD-TYPE" />
<div>"TEXT FROM SIMPLE EDTIOR TYPE"</div>
</div>
..
<div>
<img src="PATH-TO-UPLOAD-TYPE" />
<div>"TEXT FROM SIMPLE EDTIOR TYPE"</div>
</div>
...
I would like to use Razor for this. Thanks in advance!
For the first part, using the Razor model, you can't. The content object that you get on the front end only contains the properties, the tabs are not included, as they're only really for organising things in the back office.
You CAN get that information using the Umbraco API, but it's pretty database intensive and could potentially be quite slow if you have a lot of properties/tabs.
You'd be better grouping them yourself in your Razor Macro.
for the second part, you can acces the properties of a page via #Model.property. For example:
<div>
<div>#Model.simpleProperty</div>
</div>