I've a paper-dropdown-menu element. How can I show a different selected label, than valueattr is targeting at?
<link rel="import" href="components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="components/paper-item/paper-item.html">
<polymer-element name="my-dropdown-element" attributes="selectedModus">
<template>
<paper-dropdown-menu label="Modus" on-core-select="{{modusSelect}}">
<paper-dropdown class="dropdown">
<core-menu class="menu" selected="{{selectedModus}}" valueattr="val">
<template repeat="{{d in data}}">
<paper-item val="{{d.val}}">{{d.text}}</paper-item>
</template>
</core-menu>
</paper-dropdown>
</paper-dropdown-menu>
</template>
<script>
Polymer('my-dropdown-element', {
data: [],
ready: function() {
this.data = [];
var entry = {
val: 0,
text: 'Aus'
};
this.data.push(entry);
entry = {
val: 1,
text: 'Ein'
};
this.data.push(entry);
entry = {
val: 2,
text: 'Auto'
};
this.data.push(entry);
entry = {
val: 3,
text: 'Auto (Absenken)'
};
this.data.push(entry);
}
});
</script>
</polymer-element>
When I set selectedModus = 2, the highlighted Item in the opened dropdown is auto. This is correct. But in the dropdown label there is always 0, 1, 2, 3 and not the text representation of the dropdown.
Please help me
Thanks.
edit:
I've deleted all Polymer components from my project. Then I've updated all dependencies via bower from the master's branch of each component.
Now the correct label is showing in the closed dropdown. But clicking on the arrows, doesn't open the drop down menu. I'm getting an error in the timinig-utilities.js which can be traced back to paper-dropdown-transistion.html line 152.
Very strange.
Ok i've found the answer to my problem. It seems to be a bug in the current core-animation\web-animations.html. The change mentioned here
https://github.com/zenorocha/core-animation/commit/0d047ce11e5e6b25c02f1d89b2e7aa53588d7316 worked for me.
Related
I have a v-autocomplete and I want to have multiple chips, that's easy by adding the multiple prop.
But I want to have multiple chips with the same name and value. I haven't been able to find a solution for that.
Here is my code:
<v-autocomplete
filled
chips
multiple
v-model="selectedRooms"
:items="roomChoices"
hide-no-data
hide-selected
label="Select Rooms"
placeholder="Select from the available choices"
prepend-icon="mdi-bed"
clearable
deletable-chips
>
</v-autocomplete>
data: () => ({
property_name: null,
dialog_active: false,
roomChoices: ['bedroom', 'kitchen', 'bathroom', 'living-room'],
values: [],
}),
It is not possible to select the same value items in Vuetify's Autocomplete because if we can select the same value items twice then there is no way for Vuetify to detect which item has been selected and which item to remove when requested.
Now, This is where the requirement comes in that "Each item should have a unique identifier for Vuetify to know which item has been selected/removed."
However, if you want to select the same items with the same property twice (which makes less sense though), you can create that item twice in your data array but give each same item a unique identifier (let's say an id). Also, use the return-object prop to know which item among the same items has been selected.
Below is the demo where I created an array of objects data structure where some items have the same title but a unique id and I also used a return object prop to store the selected item's whole object instead of the title only.
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
</head>
<body>
<div id="app">
<v-app>
<div class="mb-2">Selected items- {{ selectedRooms }}</div>
<v-autocomplete
filled
chips
multiple
v-model="selectedRooms"
:items="roomChoices"
item-text="title"
item-value="id"
hide-no-data
label="Select Rooms"
deletable-chips
clerable
return-object
></v-autocomplete>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<script>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
property_name: null,
selectedRooms: [],
values: [],
dialog_active: false,
roomChoices: [
{ title: "bedroom", id: 1 },
{ title: "bedroom", id: 2 },
{ title: "kitchen", id: 3 },
{ title: "kitchen", id: 4 },
{ title: "bathroom", id: 5 },
{ title: "living-room", id: 6 }
],
}
},
})
</script>
</body>
</html>
I'm trying to create a simple gallery component where if you click on some image a Light-Box will appear where you can see full size photo and have options like next and previous photo or close the Light-Box.
Currently When I need to change the image to next or previous I change the src of the img-tag and it works.
Here comes my problem. I want to lazy load my images. I use lazysizes in my project.
So the simple implementation to have an image to load is to add the class "lazyload" and to pass the property data-src instead of src.
However if I change to data-src my methods for next and previous image are not working.
< script >
export default {
props: {
data: {
type: Array,
required: true,
},
},
data: () => ({
visible: false,
currentImage: 0,
}),
methods: {
Toggle(index) {
this.currentImage = index
this.visible = !this.visible
},
Next() {
if (this.currentImage !== this.data.length - 1) this.currentImage++
},
Prev() {
if (this.currentImage !== 0) this.currentImage--
},
},
} <
/script>
<template>
<div id="gallery" class="gallery">
<!-- images grid -->
<div v-for="(item, i) in data" :key="'gallery-image' + i" class="image">
<img :src="item.image.thumbnail.url" #click.native="Toggle(i)" class="lazyload"/>
</div>
<!-- image lighbox on click -->
<div v-if="visible" class="lightbox">
<Icon class="cancel" #click="Toggle()"/>
<Icon name="left" :class="{ disable: currentImage == 0 }" #click="Prev()"/>
<img :src="data[currentImage].image.url" class="lazyload"/>
<Icon name="right" :class="{ disable: currentImage == data.length - 1 }" #click="Next()"/>
</div>
</div>
</template>
UPDATE
I forgot to add crucial code. To implement lazysizes in a Nuxt project we need to add in nuxt.config.js the fallowing code. You can read more here.
build: {
extend(config, { isClient, loaders: { vue } }) {
vue.transformAssetUrls.img = ['data-src', 'src']
},
},
As I investigate in the developer tools I found that when triggering click for method like Next image, the src of the image does not change, only the data-src. I'm guessing I need a way to trigger this transform so that everything can work as expected.
Also, on top of my comment, I do recommend looking into the official nuxt image module which do have native lazy loading out of the box: https://image.nuxtjs.org/components/nuxt-img
You could maybe combo this with some simple lightbox that does the trick for you. I've used vue-silentbox before, it is working pretty well.
You can have that kind of code there
<silent-box :gallery="photosToDisplay">
<template #silentbox-item="{ silentboxItem }">
<img :src="silentboxItem.src" :key="silentboxItem.id" />
</template>
</silent-box>
So, I guess that you could totally swap img by a nuxt-img there, and have it lazy-loaded.
The images are not lazy-loaded in the project, but here is a small project that I did to try out the lightbox if you want to quickly look how it renders (URL in the top right corner).
Probably this is not the most elegant way to do it . I force re-render to my image component. You need to assign a key value to component and whenever the value changes a new instance creates of the component.
I'm currently working on Full Calendar, and I was wondering if someone could help me out. So far I have a calendar that allows the user to select days. Once clicked, particular days change color.
My goal is to add check marks to the days that have been clicked. Does anyone know how this could be achieved?
Attached is the code I have thus far. Thanks a ton :D
enter image description here
This is set up to use a unicode checkmark but also includes comments for changing to use font-awesome if you like
$('#calendar').fullCalendar({
/* Add i tag to all day cells as placeholder for checkmark */
dayRender: function(date, cell) {
var check = document.createElement('i');
check.classList.add('checkbox');
cell.append(check);
},
dayClick: function(date, jsEvent, view) {
var check = $(this).find('i.checkbox'); /* find the i.checkbox */
/* Simpler than the below but if you need to do other things, if/else better approach */
check.toggleClass('marked');
/* if (check.hasClass('marked')) { // font-awesome: fa-check
check.removeClass("marked"); // font-awesome: fa fa-check
} else {
check.addClass("marked"); // font-awesome: fa fa-check
} */
},
events: [{
start: moment().format('YYYY-MM-DD'),
end: moment().add(1, 'day').format('YYYY-MM-DD'),
title: 'Event 1'
}, {
start: moment().add(1, 'day').format('YYYY-MM-DD'),
end: moment().add(3, 'day').format('YYYY-MM-DD'),
title: 'Event 2'
}, ]
});
i.checkbox.marked::before {
content: '\2713';
/* unicode check mark */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.9.0/fullcalendar.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.9.0/fullcalendar.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<div id='calendar'>
</div>
I have a kendo ui template with a datepicker control
<script type="text/x-kendo-template" id="tmplStep1">
<form>
Date: <input id="datepicker" maxlength="10"/>
<i>(mm/dd/yyyy)</i><br />
</form>
</script>
I'm using a Windows Popup to display the template in this way
var detailsTemplate = kendo.template($("#tmplStep1").html());
dataItem = this.dataItem(e);
var wnd = $("#winDate")
.kendoWindow({
title: "Form",
modal: true,
visible: false,
resizable: false,
width: 100,
appendTo: "form#frm"
}).data("kendoWindow");
wnd.content(detailsTemplate(dataItem));
wnd.center().open();
I know, I need to initialize the datepicker, but I don't know how to do it. I put the below instruction outside of the template, but obviously it is not working, the control displayed is a simple textbox.
<script>
$("#datepicker").kendoDatePicker();
</script>
Does anyone know how to resolve it?
call $("#datepicker").kendoDatePicker(); right after you set template as window content, because before that temlate is not a part of DOM yet:
...
wnd.content(detailsTemplate(dataItem));
$("#datepicker").kendoDatePicker();
wnd.center().open();
I'm new to ReactJS and I fell I'm missing some fundamental information.
I am working on simple TODO list, where you click on <li> and it gets transfered to Finished section.
http://jsbin.com/gadavifayo/1/edit?html,js,output
I have 2 arrays that contain list of tasks, when you click on one task <li> it is removed from array and transferred to other array. After that clicked <ul> is updated but not the one where task went.
When using it you may notice that <ul> is updated only when clicked.
How can I update both <ul> when clicking on only one?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Testing</title>
<link rel="stylesheet" href="bootstrap.css">
</head>
<body>
<div id="react-app"></div>
<script src="https://fb.me/react-0.14.3.js"></script>
<script src="https://fb.me/react-dom-0.14.3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script type="text/babel">
/*
* Components
*/
var pendingItems = [
'Clean the room',
'Get milf',
'Sellout and stuff'
];
var finishedItems = [
'Clean the room',
];
var TodoList = React.createClass({
getInitialState: function() {
return { items: this.props.list };
},
handleClick: function(i) {
console.log('You clicked: ' + i + ':' + this.props.listString);
if (this.props.listString == "pendingItems") {
var removed = this.state.items.splice(i, 1);
finishedItems.push(removed);
};
if (this.props.listString == "finishedItems") {
var removed = this.state.items.splice(i, 1);
pendingItems.push(removed);
};
this.forceUpdate()
},
render: function() {
return (
<ul>
{this.state.items.map(function(item, i) {
return (
<li onClick={this.handleClick.bind(this, i)} key={i}>{this.state.items[i]}</li>
);
}, this)}
</ul>
);
},
});
var Layout = React.createClass({
render: function (){
return (
<div className='col-xs-12'>
<div className='col-xs-6'>
<TodoList list={pendingItems} listString="pendingItems"/>
</div>
<div className='col-xs-6'>
<TodoList list={finishedItems} listString="finishedItems"/>
</div>
<div className='col-xs-6'></div>
</div>
)
}
});
ReactDOM.render(<Layout />, document.getElementById('react-app'));
</script>
</body>
</html>
You need to use the states. In getInitialState you put your two list, onclick do whatever transformationyou want (you then have for example updated_list1 and updated_list2 and then you set the list like that:
this.setState({ list1: updated_list1, list2: updated_list2 }); in your case this.setState({ pendingItems: pendingItems ... after the .push
the setState function will automatically rerender, no need to call forceupdate.
The second thing important here is that you have to make the two list communication kinda, so my advise would be to put your both ul in the same component (so you can manage the lists in the same component state as mentionned above).
However this is not the only way to go and you may choose the put the states of your two list in the parent component (Layout). In this case you should use this way to go. https://facebook.github.io/react/tips/expose-component-functions.html
In any case you need (if you want to keep it simple and without external model management like backbone or flux pattern) to put lists states in the same component state. (reminder: method 1 => ul in the same componenet so the states too, method 2 => keep state in the parent component)