Tree-view in AngularJS with customizable node template - templates

I want to create a directive that will take tree-like data and feed it to some tree-view script (that uses markup as input), using specific HTML template to render nodes. So, directive takes data + node template as input, inserts DOM subtree, and then calls third-party plugin to make it sortable (http://dbushell.github.com/Nestable/ is on my mind, if this matters).
I have a solution, but it is far from being elegant. Here is HTML code (full sample can be found at http://jsfiddle.net/DQjve/):
<div ng-app="TestApp" ng-controller="TestCtrl">
<script type="text/ng-template" id="tree.html">
<div>
<ng-include src="'branch.html'"></ng-include>
</div>
</script>
<script type="text/ng-template" id="branch.html">
<ul>
<li ng-repeat="leaf in leaf.children" ng-include src="'leaf.html'">
</li>
</ul>
</script>
<script type="text/ng-template" id="leaf.html">
<ng-include src="template"></ng-include>
<ng-include src="'branch.html'"></ng-include>
</script>
<script type="text/ng-template" id="my-leaf.html">
<span style="display: block; border: 1px solid gray; border-radius: 4px; background: yellow; margin: 3px 0; padding: 4px;">{{leaf.name}}</span>
</script>
<tree root="tree" template="my-leaf.html"></tree>
</div>
Desired code would look like this:
<div ng-app="TestApp" ng-controller="TestCtrl">
<tree root="tree" template="my-leaf.html">
<span style="display: block; border: 1px solid gray; border-radius: 4px; background: yellow; margin: 3px 0; padding: 4px;">{{leaf.name}}</span>
</tree>
</div>
Goals:
(less important) Put all utility templates inside directive JavaScript code.
(more important) Use contents of the <tree> tag as node template.
But I cannot find the solution.
For point 1: Probably, I need to use $templateCache to pre-cache my templates? With some unique template names? Is there any better solution?
For point 2: Should I use ngTransclude for p.2? If yes, how? Is there a way to get contents of initial <tree> tag as a string, before any compilation occurs?

Related

Alpine js unable to access $wire inside template loop

I am trying to iterate over the colors array of alpine's x-data and inside every button trying to get and then set the color value via livewire's underlying alpine object $wire's $wire.set method.
However it gives me error that $wire is not defined in any place whether it is inside #click or if function like setColor is defined and then I access $wire over there.
button {
padding: 0;
background: none;
border: none;
}
button span {
display: inline-block;
width: 15px;
border-radius: 10px;
margin: 4px;
height: 15px;
}
<script src="https://unpkg.com/alpinejs#3.10.3/dist/cdn.min.js"></script>
<div class="space-x-2 mb-2" x-data="{
colors:['#800000','#e50000','#ff4081',
'#ff7fab','#f900ea','#ea80fc',
'#bf55ec','#9b59b6','#7c4dff',
'#0231e8','#81b1ff','#3397dd',
'#3082b7','#04a9f4','#02bcd4',
'#1bbc9c','#2ecd6f', '#f9d900',
'#af7e2e','#ff7800','#e65100',
'#b5bcc2','#667684'],
setColor(value) {
$wire.set('status.color', value)
}
}">
<!-- Also $wire not working inside #click directly -->
<template x-for="(color,index) in colors">
<button #click="setColor(color)" class="btn p-0 shadow-none" type="button" #click="setColor(color)">
<span :style="{'background-color': color}">
</span>
</button>
</template>
</div>

css transition on mouseout appears delayed

I'm trying to add transitions to a list of items where mouse over causes the item to expand by changing max-height.
The expand on mouse enter happens immediately but the mouse out transition is delayed.
jsfiddle https://jsfiddle.net/cawkie/u2eLh18f/2/
<html>
<head>
<style>
.inner {
border: solid 1px #000000;
width: 300px;
max-height: 30px;
overflow: hidden;
transition: max-height 10s linear 0s;
}
.inner:hover {
max-height: 10000px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
Lorem ipsum dolor ....
</div>
<div class="inner">
Lorem ipsum dolor ...
</div>
</div>
</body>
</html>
Possibly not relevant, but the JS mouse-out event is immediate.
Am I missing something?
Is there a workaround?
If this is normal/intended - why?
I could use JS/jQuery but was trying not to :-)
If your not opposed to using Bootstrap, they have a really nice accordion implementation you could use the achieve this effect without writing your own Javascript. If you do want to implement it yourself, you can add their CDN link to your page, then use Chrome DevTools to inspect the CSS in the Sources tab. Just prettify it and Ctrl+F search for the relevant classes.

Auto heighten divs in Foundation over using media queries?

My questions is a common problem i seem to encounter but my brain never registers the right answer for some reason, probably because i'm slow.
The question I have is regarding my navigation menu.
When i'm at full width in Foundation i use the large-12 class and the small-12 class for smaller viewports, however i have that nav div inside of another parent div so when i get to small viewport the navigation drops below the height of the parent div.
I've set the parent div to a min-height: 204px and a max-height: auto assuming that it will adjust in height to wrapping child elements but i doesn't work.
So what is the best way to ensure that child divs that grow in height due to smaller viewports will push the parent div in height as well?
Here is my html:
<div>
<div class="interior-header">
<div>
<nav class="utility">
<ul>
<li>Register</li>
<li>Login</li>
</ul>
</nav>
</div>
<div>
<nav class="main">
<div class="logo small-12 large-offset-1 large-5 columns left"></div>
<ul class="small-12 large-6 columns right">
<li>Home</li>
<li>Catalog</li>
<li>Learn More</li>
<li>Be a Broker</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</div>
and here is the css for this particular component:
// HEADER INTERIOR
.interior-header {
background: url('../img/hero.jpg');
background-size: cover;
background-repeat: no-repeat;
min-height: 174px;
max-height: auto;
}
// NAVIGATION FIRST TIER
nav.main {
margin-top: 2%;
min-height: 100px;
height: auto;
}
Any help would be awesome, thank you.
.main {overflow: hidden;}
This causes a block-level element to contain its descendants.

Navigation with Centered Logo

I am using dynamic content (WordPress) and would like to center a logo in the middle of a list like: http://www.munto.net/queed-v1/.
I tested it out and my theory works, provided the number of items on both sides is the same...but if they're different it messes up the navigation.
You can see a live example at: http://joshrodgers.com/.
What I did was made my logo a background image and centered that to my unordered-list, then I set a width on each list-item (so that if there was a super-long one it wouldn't mess up the navigation), and finally after the third link I put a 200px margin on to the right of the list-item (that way there is no list-item over the logo)...but like I said this works perfectly if the number of items is even, if the items equal an odd number it looks funny.
Not sure what the best way to do this, so - what would be the best way to fix this?
Page Code:
<html>
<head>
<title>Josh Rodgers - El Paso, Texas</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<ul>
<li>Home</li>
<li>About Us</li>
<li class="example">super new lodge</li>
<li>Programs</li>
<li>Events</li>
<li>Contact Us</li>
<li>Contact Us</li>
</ul>
</body>
</html>
CSS Style:
/* Reset */
#import url("reset.css");
body {
margin: 0 auto;
position: relative;
width: 1000px;
}
ul {
background: #ff0000 url("images/example.jpg") top center no-repeat;
height: 200px;
margin: 0 auto;
text-align: center;
width: 1000px;
}
li {
background: #ffff00;
color: #ff0000;
display: inline-block;
font-size: 20px;
padding: 20px 0;
position: relative;
top: 70px;
width: 100px;
}
li.example {
margin-right: 200px;
}
*Figured I'd work on a normal php solution before integrating it into WordPress.
Thanks,
Josh
From a design point of view i would maybe consider making the logo the home link. A lot of web users are accustomed to clicking the logo and it taking them home. You could still incorporate the home text underneath the logo.
I would probably not use your method of margin-right: 200px to not cover the logo, anything you change before that list item will shift the margin.
Ultimately i would suggest rethinking having the logo set as a background-image and make it one of the list items.

How to put Text over the Image in Sitecore?

I need to create user control where <sc:text/> element should showed over the <sc:image>.
I know this can be achieved via CSS but in this case control cannot be configured as we cannot override inline styles.
Any hints?
You can achieve this using the sc:fld extension function and wrapping sc:text in markup, adding class names or ids (or inline styles if you must!).
<img src="{sc:fld( 'graphic', $sc_currentitem, 'src’ )}" class="head" />
<span class="txt"><sc:text field="txtField" /></span>
You can then style these as normal
img.head {}
span.txt {}
I don't understand the problem. This seems like more of a front-end problem than a Sitecore issue. CSS will work fine. Here's a rough example (not tested but gets you the idea):
Sample HTML:
<div class="my-container">
<div class="img">
<sc:image Field="Bar" runat="server" />
</div>
<div class="txt">
<sc:text Field="Foo" runat="server" />
</div>
</div>
Sample CSS:
.my-container {
position: relative;
}
.my-container .txt {
position: absolute;
z-index: 50;
top: 0px;
}
.my-container .img {
z-index: 10;
}