I am using paper-swatch-picker for picking a color and a dom-repeat to iterate over an Array.
when I select color, it does not update in the Array.
Can somebody help me propagating swatch picker color change to Array.
I can add multiple rows, each row with 3 color picker (foreground, background and border).
What I want is to have my Array decoratorList updated when I pick a color.
Below is the codepen for reference.
http://codepen.io/khanshahid/pen/wzGrxk
<html>
<head>
<base href="https://polygit.org/polymer+1.4.0/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="paper-input/paper-input.html">
<link rel="import" href="paper-tabs/paper-tabs.html">
<link rel="import" href="paper-tabs/paper-tab.html">
<link rel="import" href="iron-pages/iron-pages.html">
<link rel="import" href="iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="iron-input/iron-input.html">
<link rel="import" href="iron-collapse/iron-collapse.html">
<link rel="import" href="paper-material/paper-material.html">
<link rel="import" href="paper-item/paper-item.html">
<link rel="import" href="paper-input/paper-input-container.html">
<link rel="import" href="paper-button/paper-button.html">
<link rel="import" href="paper-toast/paper-toast.html">
<link rel="import" href="paper-fab/paper-fab.html">
<link rel="import" href="paper-swatch-picker/paper-swatch-picker.html">
</head>
<body>
<div style="width:1200px;">
<msk-decorator
tag-id= 1
color-list='["#65a5f2", "#83be54", "#f0d551", "#e5943c", "#a96ddb","#aabbcc","#aaa","#ccc","#eee","#333", "transparent", "none"]'
data-type="Enum">
</msk-decorator>
</div>
<dom-module id="msk-decorator">
<template>
<style is="custom-style">
:host{
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
};
.flex-horizontal-with-ratios {
#apply(--layout-horizontal);
}
.flexchild {
#apply(--layout-flex);
}
.flex2child {
#apply(--layout-flex-2);
}
.flex-equal-justified {
#apply(--layout-horizontal);
#apply(--layout-justified);
}
.decorator-container{
margin: 15px 5px 15px 5px;
min-height: 160px;
max-height: 240px;
}
.decorator-main{
padding-top: 10px;
min-height: 120px;
max-height: 240px;
overflow-x: hidden;
overflow-y: auto;
}
.decorator-heading-text{
font-size: 14px;
font-weight: 600;
padding-right: 5px;
}
.button-add-decorator{
color: #000;
background-color: #fff;
border: 1px solid #c5c5c5;
margin-left: 10px;
box-shadow: 0 0 7px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 1px 7px rgba(0,0,0,0.2);
-moz-box-shadow: 0 1px 7px rgba(0,0,0,0.2);
}
.deco-buttons{
float: right;
margin: 0px 5px 0px 0px;
}
.deco-button{
color: #000;
background-color: #fff;
border: 1px solid #c5c5c5;
box-shadow: 0 0 7px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 1px 7px rgba(0,0,0,0.2);
-moz-box-shadow: 0 1px 7px rgba(0,0,0,0.2);
}
button:hover{
box-shadow: 0 0 7px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 1px 7px rgba(0,0,0,0.6);
-moz-box-shadow: 0 1px 7px rgba(0,0,0,0.6);
}
input, select, textarea, .text, .password{
background: #fff;
}
input:hover, input:active, input:focus, select:hover, select:active, select:focus, textarea:hover,textarea:focus {
border-color: transparent;
box-shadow: 0 0 7px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 7px rgba(0,0,0,0.5);
-moz-box-shadow: 0 1px 7px rgba(0,0,0,0.5);
}
input[disabled], select[disabled]{
color: #a2a2a2;
background-color: #e1e2e5;
}
.deco-dropdown{
padding-top: 8px;
padding-right: 10px;
padding-left: 10px;
}
.fa .fa-save {
padding-left: 5px;
padding-right: 5px;
}
.label-align{
padding-right: 3px;
}
.deco-row{
border-bottom: 0.5px solid #c3c3c3;
}
</style>
<div class="decorator-container">
<div class="flex-equal-justified decorator-heading-section">
<span class="decorator-heading-text">Decorators
<button class="button-add-decorator" on-tap="addNewDecorator" >+</button>
</span>
<template is="dom-if" if="{{saveFlag}}">
<div class="deco-buttons" style="color: #000;">
<button class="deco-button" on-tap="saveDecorators">Save</button>
</div>
</template>
</div>
<div class="decorator-main">
<form id="decoratorForm">
<template is="dom-repeat" items="{{decoratorList}}">
<div class="flex-horizontal-with-ratios deco-row">
<div class="flex2child" style="padding-left: 5px;">
<span>Text color </span>
<paper-swatch-picker id="textColor" column-count=5 color-list='[[colorList]]' color=[[item.textColor]] noink ></paper-swatch-picker>
</div>
<div class="flex2child">
<span>Cell color </span>
<paper-swatch-picker id="cellColor" column-count=5 color-list='[[colorList]]' color=[[item.cellColor]] noink ></paper-swatch-picker>
</div>
<div class="flex2child">
<span>Border color </span>
<paper-swatch-picker id="borderColor" color=[[item.borderColor]] noink ></paper-swatch-picker>
</div>
<div class="" style="padding-top: 8px; padding-right: 4px;">
<button class="button-add-decorator" on-tap="removeDecorator" id="[[index]]">X</button>
</div>
</div>
</template>
</form>
</div>
</template>
</div>
<script>
Polymer({
is: 'msk-decorator',
properties: {
selectedColor: {
type: String,
value: '#E91E63',
notify: true
},
decoratorList: {
type: Array,
notify: true,
value: []
},
decoratorObject: {
type: Object,
value: {
textColor: '',
cellColor: '',
borderColor: ''
}
},
dataType: {
type: String,
notify: true
},
tagId: {
type: String,
notify: true
},
requestObj: {
type: Object,
value: {
id: null,
addDecorator: [],
editDecorator: [],
deleteDecorator: []
}
},
saveFlag: {
type: Boolean,
notify: true
},
colorList: {
type: Array,
notify: true
},
dataURL:{
type: String,
value: function (){
var url = '/api/FindDecorators';
return url;
}
}
},
ready: function () {
this.init();
},
attached: function() {
},
typeChanged: function(e) {
console.log("typeChanged", e);
},
init: function(){
this.decoratorObject = {
textColor: '#000000',
cellColor: '#000000',
borderColor: '#000000'
};
this.format = [{
id: "9999",
label: "9999"
},
{
id: "9999.9",
label: "9999.9"
},
{
id: "9999.99",
label: "9999.99"
},
{
id: "9999.999",
label: "9999.999"
}];
this.type = [{
id: "NE",
label: "NOT EQUAL"
},
{
id: "E",
label: "EQUAL"
}];
this.value = [{
id: "1",
label: "Running"
},
{
id: "0",
label: "Stopped"
}];
},
addNewDecorator: function(e){
this.push('decoratorList', this.decoratorObject);
this.saveFlag = true;
},
removeDecorator: function(e){
if(e.target.decoratorId > 0){
this.push('deletedDecoratorList',e.target.decoratorId);
}
var i = Polymer.dom(e).rootTarget.id;
this.splice('decoratorList', i, 1);
this.saveFlag = true;
},
showFormat: function(dataTypeValue){
if(dataTypeValue.indexOf('Enum') > -1)
return true;
else
return false;
},
isIdExists: function(tagId){
if(tagId){
return true;
}else{
return false;
}
},
displaySave: function(){
if(this.saveFlag){
return true;
}else{
return false;
}
},
handleResponse: function(res, ele){
this.decoratorList = [];
if(this.decoratorList.length > 0){
this.saveFlag = true;
}else{
this.saveFlag = false;
}
},
saveDecorators: function(){
console.log('saveDecorators' + this.decoratorList);
for(var i=0; i < this.decoratorList.length; i++){
console.log(this.decoratorList[i]);
}
}
});
</script>
</dom-module>
</body>
</html>
I think you can use the value-changed event which will return a CustomEvent wich has the changed element in it:
attached: function() {
let pickers = this.$.decoratorForm.querySelectorAll('paper-swatch-picker');
pickers.forEeach(el => el.addEventListener('value-changed', event => {
// Do the Array manipulation here based on the event.detail.item
});
}
// also remove the event listener in detached(), but for that you need
// to define the function elsewhere and just passing it's reference to
// the addEventListener.
Then you can make the this.decoratorList manipulation, thats will be synchronized with the {{decoratorList}} data binding.
NOTE: The value-changed event is fired when a notify: true property changed, so it may fired multiple times if an internal event changing multiple properties in an element.
Related
My chat display correctly on my first react app instance but not on the second.
https://imgur.com/a/7FVCvjW
I could not figure out what is wrong. I dont find any reason why the right side ( of the image shared aove) would not show properly;
export const Message = ({ message, name }) => {
const style = (sender) => {
if (sender === "admin") {
return "admin";
} else if (sender === name) {
return "user";
} else {
return "other";
}
};
return (
<Fragment>
<div className="messageContainer">
<p className={`content ${style(message.user)}`}>{message.message}</p>
{name === message.user ? null : (
<p className="sender">{message.user}</p>
)}
</div>
</Fragment>
);
};
CSS
.content {
margin-right: 10px;
}
.admin {
color: rgb(156, 156, 156);
}
.user {
background-color: rgba(255, 255, 255, 0.712);
display: inline;
padding: 10px;
border-radius: 5px;
box-shadow: 2px 2px 2px #888888;
margin-left: auto;
}
.other {
background-color: rgba(255, 255, 255, 0.712);
display: inline;
padding: 10px;
border-radius: 5px;
box-shadow: 2px 2px 2px #888888;
}
.messageContainer {
display: flex;
align-items: center;
}
.sender {
color: rgb(156, 156, 156);
}
Just remove:
if (sender === "admin") {
return "admin";
} else
If you really need to handle this with a flag, instead of name use user = {name, isAdmin}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Add React in One Minute</title>
<style type="text/css">
h3 {
color: white;
}
.content {
margin-right: 10px;
}
.admin {
color: rgb(156, 156, 156);
}
.user {
background-color: rgba(255, 255, 255, 0.712);
display: inline;
padding: 10px;
border-radius: 5px;
box-shadow: 2px 2px 2px #888888;
margin-left: auto;
}
.other {
background-color: rgba(255, 255, 255, 0.712);
display: inline;
padding: 10px;
border-radius: 5px;
box-shadow: 2px 2px 2px #888888;
}
.messageContainer {
display: flex;
align-items: center;
}
.sender {
color: rgb(156, 156, 156);
}
</style>
</head>
<body style="background: blue">
<div id="root"></div>
<script src="https://unpkg.com/react#17/umd/react.development.js" crossorigin ></script>
<script src="https://unpkg.com/react-dom#17/umd/react-dom.development.js" crossorigin ></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script type="text/babel">
const {Fragment} = React;
const Message = ({ message, name }) => {
const style = (sender) => {
// if (sender === "admin") {
// return "admin";
// } else
if (sender === name) {
return "user";
} else {
return "other";
}
};
return (
<Fragment>
<div className="messageContainer">
<p className={`content ${style(message.user)}`}>{message.message}</p>
{name === message.user ? null : (
<p className="sender">{message.user}</p>
)}
</div>
</Fragment>
);
};
const App = () => {
return (
<Fragment>
<h3>From Jonh's point of view</h3>
<ul>
<Message message={{user: "john", message: "Hi"}} name="john"/>
<Message message={{user: "mary", message: "Hey from user"}} name="john"/>
</ul>
<h3>From Mary's point of view</h3>
<ul>
<Message message={{user: "john", message: "Hi"}} name="mary"/>
<Message message={{user: "mary", message: "Hey from user"}} name="mary"/>
</ul>
<h3>From an anonymous point of view</h3>
<ul>
<Message message={{user: "john", message: "Hi"}} name=""/>
<Message message={{user: "mary", message: "Hey from user"}} name=""/>
</ul>
</Fragment>
);
};
ReactDOM.render(<App />, document.getElementById("root"));
</script>
</body>
</html>
I have two arrays whose elements I want to display as nested divs:
$scope.boxes = [{
id:1,
isLit: false,
color: 'green'
}, {
id:2,
isLit: false,
color: 'blue'
}, {
id:3,
isLit: false,
color: 'red'
}, {
id:4,
isLit: false,
color: 'yellow'
}];
$scope.images=[
{
id:1, path: './img/Baum_grün.png', color:'green'
},
{
id:2, path: './img/Baum_blau.png', color:'blue'
},
{
id:3, path: './img/Baum_rot.png', color:'red'
},
{
id:4, path: './img/Baum_gelb.png', color:'yellow'
}
]
I want to arrange them in following manner (consider those stars being images):
Right now my template looks like following:
<div class="outer-wrapper">
<div class="inner-wrapper">
<div class="box {{box.color}}" ng-repeat="box in boxes" ng-class="{'lit': box.isLit}" ng-click="boxClick(box.id)" ng-click="boxClick(box.id)" ng-audio="sounds/beep-08b.mp3" volume="0.5">
</div>
</div>
<div class="image" ng-repeat="image in images" ng-if="showImages" ng-click="imageClick(image.id, image.color)">
<img src="{{image.path}}">
</div>
</div>
And my css:
.outer-wrapper {
width: 250px;
}
.inner-wrapper {
width: 200px;
}
.box {
position: relative;
height: 50px;
width: 50px;
border: 1px solid black;
margin: 10px;
float: left;
}
.green {
background-color: green;
opacity: 0.3;
}
.blue {
background-color: blue;
opacity: 0.3;
}
.red {
background-color: red;
opacity: 0.3;
}
.yellow {
background-color: yellow;
opacity: 0.3;
}
.lit {
opacity: 1.0;
}
.image img{
height: 50px;
width: 100px;
margin-top: 45px;
float: right;
border: 0.5px solid;
margin: 10px;
}
This much code gives me following result:
What and how should I modify my css/html to achieve the desired result, it also has be responsive at least till medium sizes screens ?
It's easy if you can use flexbox - the new layout mode in CSS3. You can read more about it here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
If you can use it, here's how you could do it:
<div id="first-container">
<div id="a">
a
</div>
<div id="b">
b
</div>
</div>
<div id="wrapper">
<div id="div-container">
<div id="x">
x
</div>
<div id="y">
y
</div>
</div>
<div id="div1-container">
<div id="z">
z
</div>
<div id="q">
q
</div>
</div>
</div>
<div id="second-container">
<div id="c">
a
</div>
<div id="d">
b
</div>
</div>
And the CSS:
#first-container, #second-container {
display: flex;
justify-content: space-between;
}
#wrapper {
display: flex;
flex-direction: column;
}
#div-container, #div1-container {
display: flex;
align-items: center;
justify-content: center;
}
#a, #c {
width: 20%;
border: solid 1px #000;
}
#b, #d {
width: 20%;
border: solid 1px #000;
}
Also, here's a working fiddle: http://jsfiddle.net/zeLh0foy/72/
I'm learning AngularJS by working through this on YouTube tutorial and I've hit a block on the 14th video with the ng-submit directive.
See code snipit below, when you fill in the form at the bottom and click submit it's supposed to add a new Ninja, but it's not working. There are no errors showing in the console. I placed a debugger breakpoint within the addNinja() function definition and it doesn't go into it when I click submit.
Any idea what I'm doing wrong?
var myNinjaApp = angular.module('myNinjaApp',[]);
myNinjaApp.controller('NinjaController', ['$scope',function($scope){
$scope.removeNinja = function(ninja){
var removeNinja = $scope.ninjas.indexOf(ninja);
$scope.ninjas.splice(removeNinja, 1);
};
$scope.addNinja = function(){
$scope.ninjas.push({
name: $scope.newninja.name,
belt: $scope.newninja.belt,
rate: parseInt($scope.newninja.rate),
available: true
});
};
// $scope.addNinja = function() {
// $scope.ninjas.push(this.newninja);
// $scope.newninja = '';
// };
$scope.ninjas = [
{
name: "Yoshi",
belt: "green",
rate: 50,
available: true
},
{
name: "Crystal",
belt: "yellow",
rate: 30,
available: true
},
{
name: "Ryu",
belt: "orange",
rate: 10,
available: false
},
{
name: "Shaun",
belt: "black",
rate: 1000,
available: true
}
];
}]);
body{
font-family: Helvetica;
margin: 0;
}
h1,h2,h3{
margin: 0;
}
.belt{
padding: 5px 10px;
border-radius: 10px;
margin-left: 5px;
color: #fff;
font-size: 15px;
text-transform: uppercase;
}
#menu-bar{
background: crimson;
color: #fff;
padding: 10px;
}
#menu-bar h1{
font-size: 24px;
font-weight: normal;
display: inline-block;
}
#menu-bar ul{
float: right;
list-style-type: none;
padding: 0;
margin: 6px 0;
}
#menu-bar li{
float: right;
margin-left: 20px;
}
#menu-bar a{
color: #fff
}
main{
background: #eee;
width: 80%;
margin: 30px auto;
border-radius: 10px;
}
.content{
padding: 20px;
}
.content button,
.content input[type="submit"]{
background: #fff;
padding: 10px;
border-radius: 10px;
cursor: pointer;
color: #777;
border: 0;
box-shadow: 2px 2px 2px rgba(20,20,20,0.1);
font-size: 16px;
}
.content button:nth-child(2){
float: right;
}
.content ul{
padding: 0;
list-style-type: none;
margin: 30px 0;
}
.content li{
padding: 15px 0;
border-top: 1px solid #e2e2e2;
color: #444;
}
.content li span{
float: right;
}
.content li h3{
display: inline-block;
font-weight: normal;
font-size: 22px;
}
.content input{
width: 90%;
padding: 10px 5%;
border-radius: 10px;
border: 2px solid #ddd;
margin: 10px 0;
}
.content input[type="submit"]:last-child{
width: 150px;
display: block;
margin: 15px auto;
}
.remove{
float: right;
padding: 5px;
background: #fff;
width: 18px;
text-align: center;
border-radius: 20px;
color: crimson;
cursor: pointer;
margin-left: 10px;
}
<!DOCTYPE html>
<html lang="en" ng-app="myNinjaApp">
<head>
<title>TheNetNinja Angular Playlist</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
<div class="content">
<div ng-controller="NinjaController">
<button ng-click="order = 'name'">Order by Name</button>
<button ng-click="order = 'belt'">Order by Belt</button>
<input type="text" ng-model="search" placeholder="Search for a ninja">
<ul>
<li ng-repeat="ninja in ninjas | orderBy: order | filter: search" ng-show="ninja.available">
<h3>{{ninja.name}} - {{ninja.rate | currency: '£'}}</h3>
<div class="remove" ng-click="removeNinja(ninja)">x</div>
<span class="belt" style="background: {{ninja.belt}}">{{ninja.belt}} belt</span>
</li>
</ul>
</div>
<form ng-submit="addNinja()">
<input type="text" placeholder="name" ng-model="newninja.name" />
<input type="text" placeholder="belt" ng-model="newninja.belt" />
<input type="text" placeholder="rate" ng-model="newninja.rate" />
<input type="submit" value="Add new ninja">
</form>
<p>{{newninja}}</p>
</div>
</body>
</html>
You have a div in the wrong place - move </div> above <form ng-submit="addNinja()"> to after <p>{{newninja}}</p>
bascially the ng-submit is not within the ninjacontroller div
see - https://plnkr.co/edit/pPucxMw0Yjr9OZoxl0vy?p=preview for a working version
myNinjaApp.controller('NinjaController', ['$scope', '$http', '$log', function ($scope, $http, $log) {
$http({
url: "data/ninjas.json",
method: "GET"
}).then(function (resp) {
//$log.log(resp.data);
$scope.ninjas = resp;
}, function (resp) {
$log.error("ERROR Occurred");
//debugger;
});
$scope.removeNinja = function (ninja) {
var removeNinja = $scope.ninjas.indexOf(ninja);
$scope.ninjas.splice(removeNinja, 1);
}
$scope.addNinja = function () {
$scope.ninjas.push({
name: $scope.newninja.name,
belt: $scope.newninja.belt,
rate: parseInt($scope.newninja.rate),
available: true
});
$scope.newninja.name = "";
$scope.newninja.belt = "";
$scope.newninja.rate = "";
};
$scope.removeAll = function () {
$scope.ninjas = [];
};
$scope.sort = function (keyname) {
$scope.sortKey = keyname;
$scope.reverse = !$scope.reverse;
}
}]);
I have to filter a gallery by clicking on icons, i.e. the male icon should filter only male images (as the dropdown above does) and the same for the females.
so the dropdown shows what i'm trying to do with the icons, but the icons themselves don't work... what am I missing? Thanks a lot for your help!!
var galleryApp = angular.module('galleryApp', []);
galleryApp.controller('galleryController', function galleryController($scope) {
$scope.images = [
{
"source" : "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-1.jpg",
"altText" : "Person 1",
"type" : "female, all"
},
{
"source" : "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-2.jpg",
"altText" : "Person 2",
"type" : "malex, all"
},
{
"source" : "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-3.jpg",
"altText" : "Person 3",
"type" : "malex, all"
},
{
"source" : "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-4.jpg",
"altText" : "Person 4",
"type" : "malex, all"
},
{
"source" : "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-5.jpg",
"altText" : "Person 5",
"type" : "female, all"
}
];
});
body { margin: 0; background: #333; }
#mainGallery {
padding: .5vw;
font-size: 0;
display: -ms-flexbox;
-ms-flex-wrap: wrap;
-ms-flex-direction: column;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
display: -webkit-box;
display: flex;
}
#mainGallery .imgBlock {
-webkit-box-flex: auto;
-ms-flex: auto;
flex: auto;
width: 200px;
margin: .5vw;
}
#mainGallery .imgBlock img {
width: 100%;
height: auto;
}
#seperator {
width: 100%;
height: 1px;
display: block;
}
.search {
background: #222;
border: 1px solid black;
width: 500px;
padding: 10px 0;
margin: .5vw auto .5vw auto;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.dropdown {
margin-left: 15px;
}
.filterImageWrapper {
position: relative;
width: 470px;
overflow: hidden;
margin: 15px;
}
.filterImage {
width: 470px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-webkit-transform: translateX(0);
transform:translateX(0);
-webkit-transition: all 1s;
transition: all 1s;
}
#overlayFilter {
opacity:0;
position: absolute;
top: 0;
left: 0;
z-index: 100;
width: 470px;
-webkit-transition:all 1s;
transition:all 1s;
}
#overlayFilter.overlayOpacity {
opacity: 1;
}
#filterBar {
width: 100%;
height: 60px;
background: #666;
margin: .5vw;
-webkit-border-radius: 7px;
border-radius: 7px;
border: 1px solid black;
}
.selectedFarbig {
-webkit-transform: scale(4,4) translate(-40px, 50px);
transform: scale(4,4) translate(-40px, 50px);
}
.galleryItems {
-webkit-filter: grayscale(.9) sepia(.3);
filter: grayscale(.9) sepia(.3);
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
webkit-transition: all .4s;
transition: all .4s;
}
.galleryItems:hover {
-webkit-filter: grayscale(.1) sepia(.8);
}
#filterBar input:first-child {
height: 50px;
}
#filterBar input:nth-child(2) {
height: 50px;
}
#media screen and (max-width: 400px) {
#mainGallery .imgBlock { margin: 0; }
#mainGallery { padding: 0; }
}
<!doctype html>
<html ng-app="galleryApp">
<head>
<meta charset="UTF-8">
<title>Filter Gallery</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="controllers.js"></script>
<link href="main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div ng-controller = "galleryController" id="mainGallery">
<div class="search">
<label class="dropdown">
<select id="selection" ng-model="query">
<option value="all">All</option>
<option value="malex">Male</option>
<option value="female">Female</option>
</select>
</label>
<div id="filterBar">
<input ng-model="query" type="image" src="http://findicons.com/files/icons/438/dating/256/male.png" name="malex" value="malex">
<input ng-model="query" type="image" src="https://cdn2.iconfinder.com/data/icons/social-productivity-line-art-2/128/sex-female-512.png" name="female" value="female">
</div>
<div id="seperator"></div>
<div class="imgBlock" ng-repeat="item in images | filter: query | orderBy: order">
<!-- images placed inside block elements to deal with a Firefox rendering bug affecting scaled flexbox images -->
<img class="galleryItems" src="{{item.source}}" alt="{{item.altText}}" title="{{item.altText}}">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
The input with type="image" is a graphical submit button, it doesn't have a meaningful value attribute, so that's probably it doesn't really work. Try to simply replace your inputs with something like
<img class="imgButton" src="http://findicons.com/files/icons/438/dating/256/male.png" name="malex" ng-click="query = 'malex'" />
<img class="imgButton" src="https://cdn2.iconfinder.com/data/icons/social-productivity-line-art-2/128/sex-female-512.png" name="female" ng-click="query = 'female'" />
See updated code:
var galleryApp = angular.module('galleryApp', []);
galleryApp.controller('galleryController', function galleryController($scope) {
$scope.images = [
{
"source" : "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-1.jpg",
"altText" : "Person 1",
"type" : "female, all"
},
{
"source" : "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-2.jpg",
"altText" : "Person 2",
"type" : "malex, all"
},
{
"source" : "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-3.jpg",
"altText" : "Person 3",
"type" : "malex, all"
},
{
"source" : "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-4.jpg",
"altText" : "Person 4",
"type" : "malex, all"
},
{
"source" : "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-5.jpg",
"altText" : "Person 5",
"type" : "female, all"
}
];
});
body { margin: 0; background: #333; }
#mainGallery {
padding: .5vw;
font-size: 0;
display: -ms-flexbox;
-ms-flex-wrap: wrap;
-ms-flex-direction: column;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
display: -webkit-box;
display: flex;
}
#mainGallery .imgBlock {
-webkit-box-flex: auto;
-ms-flex: auto;
flex: auto;
width: 200px;
margin: .5vw;
}
#mainGallery .imgBlock img {
width: 100%;
height: auto;
}
#seperator {
width: 100%;
height: 1px;
display: block;
}
.search {
background: #222;
border: 1px solid black;
width: 500px;
padding: 10px 0;
margin: .5vw auto .5vw auto;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.dropdown {
margin-left: 15px;
}
.filterImageWrapper {
position: relative;
width: 470px;
overflow: hidden;
margin: 15px;
}
.filterImage {
width: 470px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-webkit-transform: translateX(0);
transform:translateX(0);
-webkit-transition: all 1s;
transition: all 1s;
}
#overlayFilter {
opacity:0;
position: absolute;
top: 0;
left: 0;
z-index: 100;
width: 470px;
-webkit-transition:all 1s;
transition:all 1s;
}
#overlayFilter.overlayOpacity {
opacity: 1;
}
#filterBar {
width: 100%;
height: 60px;
background: #666;
margin: .5vw;
-webkit-border-radius: 7px;
border-radius: 7px;
border: 1px solid black;
}
.selectedFarbig {
-webkit-transform: scale(4,4) translate(-40px, 50px);
transform: scale(4,4) translate(-40px, 50px);
}
.galleryItems {
-webkit-filter: grayscale(.9) sepia(.3);
filter: grayscale(.9) sepia(.3);
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
webkit-transition: all .4s;
transition: all .4s;
}
.galleryItems:hover {
-webkit-filter: grayscale(.1) sepia(.8);
}
#filterBar input:first-child {
height: 50px;
}
#filterBar input:nth-child(2) {
height: 50px;
}
.imgButton {
width: 40px;
height: 40px;
cursor: pointer;
}
#media screen and (max-width: 400px) {
#mainGallery .imgBlock { margin: 0; }
#mainGallery { padding: 0; }
}
<!doctype html>
<html ng-app="galleryApp">
<head>
<meta charset="UTF-8">
<title>Filter Gallery</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="controllers.js"></script>
<link href="main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div ng-controller = "galleryController" id="mainGallery">
<div class="search">
<label class="dropdown">
<select id="selection" ng-model="query">
<option value="all">All</option>
<option value="malex">Male</option>
<option value="female">Female</option>
</select>
</label>
<div id="filterBar">
<img class="imgButton" src="http://findicons.com/files/icons/438/dating/256/male.png" name="malex" ng-click="query = 'malex'" />
<img class="imgButton" src="https://cdn2.iconfinder.com/data/icons/social-productivity-line-art-2/128/sex-female-512.png" name="female" ng-click="query = 'female'" />
</div>
<div id="seperator"></div>
<div class="imgBlock" ng-repeat="item in images | filter: query | orderBy: order">
<!-- images placed inside block elements to deal with a Firefox rendering bug affecting scaled flexbox images -->
<img class="galleryItems" src="{{item.source}}" alt="{{item.altText}}" title="{{item.altText}}">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
this is my tree.jsp
<html>
<head>
<link rel="stylesheet" href="resources/css/style.css" />
<script src="resources/js/controller/AutoConfigController.js"></script>
<script src="demo/jquery.2.0.3.js"></script>
<script src="demo/angular.1.2.29.js"></script>
<script src="demo/bootstrap.3.1.1.js"></script>
<script src="demo/ui-bootstrap-tpls.0.11.2.js"></script>
<script src="demo/prettify.1.0.1.js"></script>
<link href="demo/bootstrap.3.1.1.css" rel="stylesheet" type="text/css">
<link href="demo/prettify-style.css" rel="stylesheet" type="text/css">
<script src="angular-tree-control.js"></script>
<link rel="stylesheet" type="text/css" href="css/tree-control.css">
<link rel="stylesheet" type="text/css" href="css/tree-control-attribute.css">
<style type="text/css">
.header {
padding-top: 50px;
padding-bottom: 50px;
background-color: #444980;
}
.head-container {
width: 1140px;
margin: auto;
}
.header h1 {
color: #fffffa;
font-size: 60px
}
.header h2 {
color: #fffffa;
font-size: 24px;
font-style: normal
}
.example-caption {
color: #bbb;
font-size: 12px
}
.docs-body {
width: 1140px;
margin: auto auto 50px;
}
.docs-footer {
background-color: #F5F5F5;
text-align: center;
padding: 30px 0;
border-top: #e5e5e5
}
.tab-pane {
background-color: #f8f8f8;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px
}
.nav li.active a {
background-color: #f8f8f8
}
pre.code {
border: none;
background-color: #f8f8f8;
padding: 10px;
margin: 0;
font-family: Consolas, 'Liberation Mono', Courier, monospace;
}
.docs-sidenav {
margin-top: 45px;
margin-bottom: 0;
}
.docs-sidenav>li>a {
display: block;
font-size: 13px;
font-weight: 500;
color: #999;
padding: 4px 20px;
}
.docs-sidenav>li.active>a {
font-weight: 700;
color: #563d7c;
border-left: 2px solid #563d7c;
padding-left: 18px;
}
.docs-sidenav>li>a:hover {
background-color: transparent;
color: #563d7c;
border-left: 1px solid #563d7c;
padding-left: 19px;
}
.type-hint-object {
background: #999;
}
.type-hint-boolean {
background: rgb(18, 131, 39);
}
.type-hint-number {
background: rgb(189, 63, 66);
}
body, html {
background: none !important;
background-image: none !important;
}
#mydiv {
position: fixed;
top: 30%;
left: 25%;
width: 30em;
height: 18em;
margin-top: -9em; /*set to a negative number 1/2 of your height*/
margin-left: -15em; /*set to a negative number 1/2 of your width*/
background-color: #f3f3f3;
}
</style>
<body ng-controller="AutoConfigController">
<div id="mydiv">
<form>
<div>
<input id="treeSearchText" type="text" />
<button id="searchTree" class="btn">Search</button>
</div>
</form>
<treecontrol class="tree-classic" tree-model="techList" on-selection="showSelected(node)">
{{techList}}
</treecontrol>
<script>
angular.module('SuperAdminReveal')
.directive('treeControl', function () {
return {
template: '<div class="treeControl" ng-transclude></div>',
restrict: 'E',
replace: true,
transclude: true,
link: function postLink(scope, element, attrs) {
element.bind('click', function (e) {
if (e.target.tagName === "LI" && e.target.childElementCount) {
$(e.target).toggleClass('collapsed');
}
})
}
};
});
</script>
</body>
</html>
and this is my treescontroller.java: from here i am returning json value to tree.jsp
package com.reveal.web.controller;
import java.util.List;
import org.springframework.http.MediaType;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import com.reveal.web.controller.EnsureCapacity.Technology;
#Controller
public class TreesController {
#RequestMapping(value="/mytree",method = RequestMethod.GET)
public String printWelcome(ModelMap model) {
return "tree";
}
#RequestMapping(value = "/getTechList", method = RequestMethod.GET,produces = MediaType.APPLICATION_JSON_VALUE)
public #ResponseBody List<EnsureCapacity.Technology> getTechList(){
EnsureCapacity ensureCapacity = new EnsureCapacity();
List<EnsureCapacity.Technology> techList = ensureCapacity.getTechList();
return techList;
}
}
output:
Selected Node : [{"pId":0,"techName":"Node 1","id":1},{"pId":1,"techName":"Node 1.1","id":0},{"pId":1,"techName":"Node 1.2","id":0},{"pId":0,"techName":"Node 2","id":1},{"pId":1,"techName":"Node 2.1","id":0},{"pId":1,"techName":"Node 2.2","id":0},{"pId":1,"techName":"Node 2.3","id":0},{"pId":0,"techName":"Node 3","id":1},{"pId":1,"techName":"Node 3.1","id":0},{"pId":1,"techName":"Node 3.2","id":0},{"pId":0,"techName":"Node 4","id":1},{"pId":1,"techName":"Node 4.2","id":0},{"pId":1,"techName":"Node 4.3","id":0},{"pId":1,"techName":"Node 4.4","id":0},{"pId":0,"techName":"Node 5","id":1},{"pId":1,"techName":"Node 4.5","id":0},{"pId":1,"techName":"Node 4.6","id":0},{"pId":0,"techName":"Node 6","id":1},{"pId":1,"techName":"Node 6.1","id":0},{"pId":1,"techName":"Node 6.2","id":0},{"pId":1,"techName":"Node 6.3","id":0},{"pId":1,"techName":"Node 6.4","id":0},{"pId":1,"techName":"Node 6.5","id":0},{"pId":1,"techName":"Node 6.6","id":0},{"pId":1,"techName":"Node 6.7","id":0},{"pId":1,"techName":"Node 6.8","id":0},{"pId":0,"techName":"Node 7","id":1},{"pId":1,"techName":"Node 7.1","id":0},{"pId":0,"techName":"Node 8","id":1},{"pId":1,"techName":"Node 8.1","id":0},{"pId":1,"techName":"Node 8.2","id":0},{"pId":1,"techName":"Node 8.3","id":0},{"pId":1,"techName":"Node 8.4","id":0},{"pId":1,"techName":"Node 8.5","id":0},{"pId":1,"techName":"Node 8.6","id":0},{"pId":1,"techName":"Node 8.7","id":0},{"pId":1,"techName":"Node 8.8","id":0},{"pId":1,"techName":"Node 8.9","id":0},{"pId":1,"techName":"Node 8.10","id":0},{"pId":1,"techName":"Node 8.11","id":0},{"pId":1,"techName":"Node 8.12","id":0},{"pId":1,"techName":"Node 8.12","id":0}]
this is displaying on browser how to make it in treeview .
I am using angular-tree-control module
// Update tree control below
<treecontrol class="tree-classic" tree-model="techList" on-selection="showSelected(node)">
{{node.techName}} ({{node.id}} ) {{$index}}
</treecontrol>