Here is a piece of code from TinyMCE Link plugin:
editor.addMenuItem('link', {
icon: 'link',
text: 'Insert/edit link',
shortcut: 'Meta+K',
onclick: createLinkList(showDialog),
stateSelector: 'a[href]',
context: 'insert',
prependToContext: true
});
What does prependToContext: true mean? I can't find it in the documentation.
Taken from the tinymce core (theme.js):
// Added though context
if (!isUserDefined) {
each(editor.menuItems, function(menuItem) {
if (menuItem.context == context) {
...
if (menuItem.prependToContext) {
menuItems.unshift(menuItem);
} else {
menuItems.push(menuItem);
}
...
}
});
}
So, your MenuItem gets reinserted at the beginning of the internal MenuItems array.
Related
I have created a custom component in FormIO. I have followed the tutorial on the Check Matrix component and I am having issues trying to:
get the type to render as a custom name "e.g. mycomp". It returns "unknown component: mycomp" in the builder. I reverted to using a type that is known by FormIO like "textfield" and it renders
Adding eventlisteners to my component is not triggering
How can I get the component to render and add my events to this component? What i am doing wrong?
InputComponent.ts
Import { Components } from "formiojs";
const Field = Components.components.field;
export default class loqateAddressComponent extends (Field as any) {
constructor(component, options, data) {
super(component, options, data);
}
static schema(...extend:any[]) {
return Field.schema({
type: 'textfield', //want this to be customname but it wont render
label: 'Xrm Address',
key: 'loqateaddress',
...extend});
}
static get builderInfo() {
return {
title: 'Loqate Address',
group: 'basic',
icon: 'home',
documentation: '/userguide/#address',
weight: 35,
schema: loqateAddressComponent.schema(),
};
}
renderInput(){
return this.renderTemplate('input', {
input: {
type: 'input',
ref: `${this.component.key}`,
attr: {
id: `${this.component.key}`,
class: 'form-control',
type: 'search',
}
}
});
}
public render(children) {
return super.render(this.renderTemplate('loqateaddress',{
renderInputType: this.render.bind(this)
}));
}
public attach(element: any) {
const refs = {};
refs[`${this.component.key}`] = "input";
this.loadRefs(element, refs);
console.log("attach rendered");
this.addEventListener(element, 'change', ()=> {
console.log("address clicked");
});
return super.attach(element);
}
}
Form.ejs (For my template)
<div>
{% {{ctx.renderInputType}} %}
</div>
I am using swiper.js and fancybox v3 to create a popup gallery. One of the slide contain a video, however after I have click and open popup, the video will load and start playing whatever which slide I landed. I have tried to use any events to stop pause the video but it still can't work. Anyone got a solutions?
Here is a codepen example:
$(document).ready(function () {
var mySwiper = new Swiper('.swiper-container', {
init: false,
pagination: {
el: '.swiper-pagination',
observer: true,
observeParents: true,
on: {
slideChangeTransitionStart: function () {
$('.swiper-slide').find('video').each(function () {
console.log(this);
this.pause();
});
},
slideChangeTransitionEnd: function () {
$('.swiper-slide').find('video').each(function () {
this.pause();
});
}
}
},
})
$('.fancybox-trigger').click(function (e) {
e.preventDefault();
var thisTarget = $(this).data('index');
$.fancybox.open({
src: "#lightbox",
type: 'inline',
opts: {
toolbar: false,
defaultType: 'inline',
autoFocus: true,
touch: false,
afterLoad: function () {
mySwiper.init();
mySwiper.slideTo(thisTarget - 1)
$('swiper-slide').find('video').each(function () {
this.pause();
})
}
}
})
})
});
https://codepen.io/anon/pen/mKOwag?editors=0010
I am not swiper expert, therefore I can not explain why, but I found that callbacks work if you add them like this:
mySwiper.on('slideChange', function() {
$('.swiper-slide').find('video').each(function() {
this.pause();
});
});
Demo - https://codepen.io/anon/pen/ERNogR
I am new in vuejs2 development. I am working in a modal development. I kept the modal body code in a component and displaying that modal in another component. I have below code in modal body component.
<script>
import SemanticModal from 'vue-ya-semantic-modal'
export default {
components: { SemanticModal: SemanticModal() },
name: 'ModalBody',
props: ['active1',],
data() {
return {
visible: false
}
},
methods: {
close() {
this.$emit('sendValue', false); //this is working
this.visible = false
},
open () {
this.visible = true
},
},
watch: {
active1 () {
if (this.active1 && !this.visible) this.open()
else if (!this.active1 && this.visible) this.close()
},
},
directives: {
'click-outside': {
bind: function(el, binding, vNode) {
el.onclick = function(e) {
var modal = document.getElementsByClassName("modal");
el.addEventListener('click', function (event) {
if (!modal[0].contains(event.target)) {
vNode.context.$emit('sendValue', false); //this is not working
this.visible = false
}
})
}
}
}
}
}
I am calling that model (child) component in parent component like below
<modal-body :active1="active1" #sendValue="active1 = $event"></modal-body>
I need to change the below props active1 value to false from child to parent component.
You are handling click event by using directives.
According to your requirement , clickoutside directive should emit sendValue event from child to parent. But i feel like your code has some complications.
The proper code to accomplish your scenario is below
directives: {
'clickoutside': {
bind: function(el, binding, vNode) {
el.onclick = function(e) {
console.log("binding clicked");
vNode.context.$emit('sendValue', false);
}
}
}
}
if your objective is to use click event you can use #click binding to accomplish the same
I just noticed that Ext.get('myElement').getAttribute('class') doesn't work with IE8-. Does anyone has an elegant alternative (ExtJS 4.1.1 native or patch prefered)? Maybe this feature is hidden somewhere in the framework?
Edit
Here is the context. I have temporarily fixed the issue like this :
action.getAttribute('class') || action.dom.className
View (grid) :
{
xtype: 'actioncolumn',
items: [{
icon: '/images/edit.png',
iconCls: 'action-edit'
}, {
icon: '/images/delete.png',
iconCls: 'action-delete'
}]
}
Controller :
init: function () {
this.control({
'grid actioncolumn': {
click: function (a, b, c, d, ev, record) {
var action = Ext.get(ev.target);
if (action.is('img')) {
action = action.getAttribute('class') || action.dom.className;
action = action.match(/action-(.+)/)[1];
this[action + 'Action'](record);
}
}
}
});
},
editAction: function (record) {
// ...
},
deleteAction: function (record) {
// ...
}
Drop # from the node id and it'll probably work.
UPDATE: I'm still not sure what exactly you're trying to do. Ext.get returns Ext.dom.Element object, which wraps native element and provides a certain level of abstraction from DOM but still is pretty much low-level tool. Since older IE doesn't support 'class' attribute you'll have to call getAttribute('className') to get the result.
Or you can resort to using standard convenience methods like hasCls and getStyle for checking particular classes and styles on an element. To find elements with particular class there's query method. All in all I fail to see why exactly you would need to get the list of all classes defined on an element.
UPDATE 2: OK, now I get what you need. Your code is way too complex, it can be simplified like this:
CSS:
.action-edit, .action-delete {
width: 16px; /* Or whatever fits your bill */
height: 16px;
}
.action-edit {
background-image: url('/images/edit.png');
}
.action-delete {
background-image: url('/images/delete.png');
}
View:
{
xtype: 'actioncolumn',
items: [{
iconCls: 'action-edit',
action: 'edit'
}, {
iconCls: 'action-delete',
action: 'delete'
}]
}
Controller:
init: function() {
this.control({
'grid actioncolumn': {
click: function(a, b, c, d, ev, record) {
var target = Ext.get(ev.target);
if (target && target.action) {
this[target.action + 'Action'].call(this, record);
}
}
}
});
}
Or it can be done in more officially supported way:
View:
{
xtype: 'actioncolumn',
items: [{
iconCls: 'action-edit',
handler: function(grid, rowIndex) {
this.fireEvent('editAction', grid.getStore().getAt(rowIndex));
}
}, {
iconCls: 'action-delete',
handler: function(grid, rowIndex) {
this.fireEvent('deleteAction', grid.getStore().getAt(rowIndex));
}
}];
}
Controller:
init: function() {
this.control({
'grid actioncolumn': {
editAction: this.editAction,
deleteAction: this.deleteAction
}
});
}
Obviously the view event handling code can be further abstracted, but the main idea here is that you shouldn't be afraid of hiding view complexities Controller has no need to know about.
How could you run some action when pushing a toggle button like this:
{
xtype: 'togglefield',
name: 'enableSnd',
label: 'Sound',
value : 1
}
?
Here's an example I'm currently using in an app of mine. I use the "beforechange" function to check and validate some data before I perform the real action in "change".
{
xtype: 'togglefield',
name: 'toggleName',
label: 'My Toggle Field',
listeners: {
beforechange: function (slider, thumb, newValue, oldValue) {
if (oldValue == 0 && newValue == 1) {
// Changing from off to on...validate something?
}
},
change: function (slider, thumb, newValue, oldValue) {
if (oldValue == 0 && newValue == 1) {
// Changing from off to on...do something?
}
else if (oldValue == 1 && newValue == 0)
// Changing from on to off...do something?
}
}
}
Have a look at the official documentation in sencha:
http://dev.sencha.com/deploy/touch/docs/
For a simple button:
var playPauseButton = new Ext.Button({
ui: 'small',
text: 'Play',
listeners: {
tap: function() {
Ext.Ajax.request({
url: '/api/pause',
success: updateStatus,
failure: updateStatus });
}
}
});
For a toggle, event seems to be dragend...
I use the the following code to set an initial value to a togglefield
and to react to changes of the togglefield.
I initially disable the togglefield,
and then use the (unexpected) behaviour that
Sencha Touch fires a change event for this togglefield while initializing it to enable the togglefield.
Note this should work for both true and false as initial values.
If you would like to actually disable the togglefield initially,
you would have to remove the else part.
{
xtype: 'togglefield',
title: 'LightSwitch',
label: 'Switch Lights',
value: false, // initial value
listeners: {
change: function(slider, thumb, newValue, oldValue) {
if (this.isDisabled() == false) { // isEnabled
alert('change Togglefield Event triggered'); // do something
}
else {
this.enable(); // enable togglefield
}
}
},
disabled: true,
}