We want to make a effect that trigger a customized leaveBoard event, for example, when a card with ciid=137 leaves board, we want a leave137 event triggered.
Open a new card in your Rule cards, in effect build, click Code and copy & paste the code below
- effectName: cards
ruleTrigger:
primary: start
player: each player
action:
primary: trigger on event
event:
primary: leavesBoard
target:
primary: card
criteria:
from: board
player: owner
- effectName: card
action:
primary: each
target:
primary: card
criteria:
passing: cards
effectComplete:
primary: nothing
- effectName: leaveEvent
action:
primary: assign variable
target:
primary: value
value: leave$ciid
effectComplete:
primary: trigger next effect
- action:
primary: trigger event
event:
primary: $leaveEvent
target:
primary: game
effectComplete:
primary: nothing
Related
I'm trying to use the steps to display several steps in a wizard.
My wizard steps works, but I can't manage to have the current steps highlighted properly in the steps list.
I was able to replicate in a small stackblitz: https://stackblitz.com/edit/angular-ivy-eujcl2?file=src%2Fapp%2Fsteps%2Fstep-two%2Fstep-two.component.html
When I run my code, I got basically this:
But in their demo, the current step gets highlighted:
Any idea what is going on? The styles are imported, I to bind an "activeIndex", but when I move, the step doesn't.
Your routes are not matching with what you have defined app route file vs what you have listed in wizard.component.ts, i.e.
// Your routes
{ path: 'step-1', component: StepOneComponent },
{ path: 'step-2', component: StepTwoComponent }
// But your step routeLinks
{
label: 'Step 1',
routerLink: '/setup/mongDb',
icon: 'fa-light fa-database',
},
{
label: 'Step 2',
routerLink: '/setup/auth-token',
},
Once they match, the highlight starts working.
this.items = [
{
label: 'Step 1',
routerLink: 'step-1',
icon: 'fa-light fa-database',
},
{
label: 'Step 2',
routerLink: 'step-2'
},
];
Demo
from what I see in your code, you don't use the proper routes.
The buttons trigger step-1 and step-2 but your step component is declared with /setup/mongDb and /setup/auth-token so I think the PrimeNg component doesn't see that you are on the declared path. I didn't look at the source code but I think this could be it.
I'm developing a Wordpress Plugin that allows users to add custom video playlists to their pages or posts, and for that I'm using Videojs and Videojs Playlist libraries.
I've successfully managed to add a single playlist into a page, but when a second one is created the first player is disabled.
First Player disabled
Other problem I'm facing is that, although the vjs-playlist div is added, it only shows in the first player created.
Code display in the browser
var options = {"techOrder": ["html5","youtube", "flash"]};
var myPlayer = videojs('my-playlist-player', {options, "autoplay": false, "controls": true, "fluid": true, "liveui": true});
myPlayer.playlist([{
name: 'Test item 1 type .m3u8',
description: 'Testing for videojs-playlist-ui integration',
duration: '45',
sources: [
{src: '//vjs.zencdn.net/v/oceans.mp4',type: 'video/mp4'}
],
thumbnail: [
{
srcset: '//bcvid.brightcove.com/players-example-content/clouds-1800.jpg',
type: 'image/jpeg',
style: 'max-height: 120px;'
}
]
},{
name: resTitle,
description: resDesc,
duration: resDuration,//'45',
sources: [
{src: resItemSrc, type: resMime}
],
thumbnail: [
{
srcset: resThumbnail,
type: resImgType,
style: thumbStyle//'max-height: 120px;'
}
]
}
}
]);
console.log(myPlayer.playlist());
myPlayer.playlistUi({el: document.getElementById('vjs-playlist'), horizontal: true});
myPlayer.playlist.autoadvance(1);
I believe my errors happen because videojs functions are detecting the same id in all elements, but if so how could I avoid this?
Any other ideas or opinions on why this errors might be happening, would be great.
Thanks in advance.
A bit more of information, I wanted to check how many players the script detected and so I printed in the console the window.videojs.players and only one player is detected even if more are created. Check result
Could this be because they have the same ID? If so how could it be fixed? HTML Result
I'm using PayPal's checkout.js and in the view I'm showing both PayPal button and small buttons of credit cards. But in case I want to show only credit card buttons and hide PayPal button, how can I achieve this?
html:
<div id="paypal-button" class="m-t-20"></div>
js:
paypal.Button.render({
env: '#Model.Env',
locale: '#Model.CurrentCulture',
style: {
size: 'medium',
height: 48,
color: 'silver',
shape: 'rect',
label: 'checkout',
tagline: 'true',
fundingicons: 'true',
layout: 'horizontal'
},
If you disable the funding source, the button will not show.See the Paypal page.
I expect the code you want looks like this:
<script src="https://paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&disable-funding=credit">
</script>
I put the fullCalendar plug-in on my site. It needs to display events from several google calendars. I did it by analogy from the documentation
(Multiple Google Calendars)
But events are displayed only on the week and month intervals, on the day interval, events are not displayed. They are displayed only if I remove the block (array) resources. But without it, the display of events inside the day becomes horizontal, but it needs to be vertical (shaded time zones of the event). When i manually fill events in events, everything works fine, but I need to take them from Google.
How do I get the events from google on the daily interval displayed in a vertical view?
$('#calendar').fullCalendar({
schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
scrollTime: '09:00:00',
minTime: '08:00:00',
googleCalendarApiKey: '<MY API KEY>',
defaultView: 'agendaDay',
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaDay,agendaWeek,month'
},
eventSources: [
{
id: 'k01',
resourceId: 'k01',
googleCalendarId: 'hhug0bdep49rjgq4kk79rrjbgg#group.calendar.google.com', // 1 calendar
color: 'blue',
},
{
id: 'k02',
resourceId: 'k02',
googleCalendarId: 'db1ls6vg0fh9sgqt57fkethens#group.calendar.google.com' //2 calendar
},
{
id: 'k03',
resourceId: 'k03',
googleCalendarId: 'ncvl95m9f8irl6nd3ejm99fvho#group.calendar.google.com' //3 calendar
}
],
resources: [
{ id: 'k01', title: 'calendar 1', eventColor: 'red'},
{ id: 'k02', title: 'calendar 2',},
{ id: 'k03', title: 'calendar 3'}
]
});
Your events coming from Google will not have resource IDs. If there is no resource ID, it is impossible for fullCalendar to know which column to display it in, so it cannot display it at all.
To stop the agendaDay view from displaying with resources, you need to set the option groupByDateAndResource to false:
groupByDateAndResource: false
Although the documentation says this is false by default, it appears you do have to explicitly set this option in your calendar config for it to work.
See http://jsfiddle.net/toytd26b/63/ for a working example (you can fill in your API key to see actual event data, but it shows the layout correctly).
I simply want to show a hidden panel on the click of a button.
Currently I have this code:
search: function(btn) }
btn.up('panel').nextSibling().show();
...
Which locates the parent panel and shows() the next sibling of that panel. (I think I explained that correctly..?)
However, I feel it would be more efficient to maybe use the ComponentQuery to call the panel I want to show, as the layout of my application is likely to change down the road and that would alter the hierarchy of my components and their functions.
Here's my hidden List view(panel) that I want to show:
Ext.define('AM.view.metadata.List' ,{
extend: 'Ext.grid.Panel',
alias: 'widget.metadatalist',
title: '<center>Results</center>',
store: 'Metadata',
...
Any ideas?
You can give your panel a itemId
Ext.define('AM.view.metadata.List' ,{
extend: 'Ext.grid.Panel',
alias: 'widget.metadatalist',
title: '<center>Results</center>',
store: 'Metadata',
itemId: 'targetPanel'
and use this ComponentQuery
search: function(btn)
Ext.ComponentQuery.query('#targetPanel');
...