I'm having an issue with vue-materials. I've asked into github but the solution seems not to work. The issue is:
https://github.com/johnleider/vue-materials/issues/46
I've found the way (see my third comment, with attached images) but it doesn't seem to work. I attach here this comment:
A little bit more of light. Now, I changed modalParams as a function into computed:
computed: {
...mapGetters([
'authToken',
]),
modalParams() {
const params = {
opacity: 0.5,
dismissible: true,
};
return params;
},
},
Then, I can see this in dev Tools:
But my modal doesn't seem to apply this params.
Any clue?
Related
I am trying to prevent fancybox 4 from closing when clicking outside of the fancybox container.
Existing answers mentioned clickSlide : false from fancybox 3 upwards.
But it does not seem to work. I am creating dynamic fancy boxes with data coming from an ajax call.
success: function (response) {
if (response.error === true) {
alert(response.errMsg);
} else {
const fancybox = new Fancybox([
{
src: response.form,
type: "html",
clickSlide: false, // disable close on outside click
touch: false, // disable close on swipe
},
], {
mainClass: 'ratingFormContainer',
fullscreen: {
autoStart: true
},
clickSlide: false,
clickOutside: false,
}
);
console.log(response.id);
}
}
I tried inserting the options under touch:false as well but that did not seem to work either.
Also: Someone with enough reputation should create a fancybox-4 tag, so that future questions can be tagged appropriately.
We are using the popular Bootbox dialogue for Bootstrap 3.
We would like to make it a custom size with code such as :
bootbox.dialog({
message: $("<div>").load(href, function () {
}), //load
backdrop: true,
onEscape: false,
size:'small'
}).find(".modal-content").css("max-width", "360px");
However, if we do that, the dialogue goes off-center. Is there any way to achieve this?
Many thanks
This isn't any different than manual Bootstrap modals, in that you don't target .modal-content. The width of the dialog is (supposed to be) defined by .modal-dialog, so you have two options;
1) Update your target, like so:
bootbox.dialog({
message: $("<div>").load(href, function () {
}), //load
backdrop: true,
onEscape: false,
size:'small'
}).find(".modal-dialog").css("max-width", "360px");
2) Use the className option, and move your rule to your stylesheet:
bootbox.dialog({
message: $("<div>").load(href, function () {
}), //load
backdrop: true,
onEscape: false,
className:'custom-small'
});
/* your CSS */
.custom-small .modal-dialog {
max-width: 360px;
}
The className value is applied to the .modal container, so you'd need a descendant selector (as shown) for the width to be applied properly.
Demo jsFiddle
Unless you can guarantee the response is super fast, you probably also want to revamp how you load the dialog's message, given that $.load (or any other AJAX function) is asynchronous:
$.get(href)
.done(function (response) {
bootbox.dialog({
message: response,
backdrop: true,
onEscape: false,
className:'custom-small'
});
});
I am currently building an editor like the one that is used on medium.com. For each unstyled block, I render a custom component that holds edit buttons to change the block type of that section.
However, when I for example change the section to a header-one and hit the return button the new block is also a header-one block. I like to see that the new block is unstyled instead of the same type of the previous block.
Any ideas on how to do this?
After some more searching and trying I found the solution myself! It appears that the best way to do this is by inserting a new block when the split-block keyCommand is fired.
For example:
createEmptyBlock(editorState: Draft.EditorState) {
const newBlock = new Draft.ContentBlock({
key: Draft.genKey(),
type: "unstyled",
text: "",
characterList: Immutable.List()
})
const contentState = editorState.getCurrentContent()
const newBlockMap = contentState.getBlockMap().set(newBlock.getKey(), newBlock)
return Draft.EditorState.push(
editorState,
Draft.ContentState
.createFromBlockArray(newBlockMap.toArray())
.set('selectionAfter', contentState.getSelectionAfter().merge({
anchorKey: newBlock.getKey(),
anchorOffset: 0,
focusKey: newBlock.getKey(),
focusOffset: 0,
isBackward: false,
})) as Draft.ContentState,
"split-block"
)
}
This answer was posted as an edit to the question DraftJS: Reset blockType after return by the OP n9iels under CC BY-SA 3.0.
So to give you an idea of what I am working with, I have a popped up modal that contains a series of individual forms in the modal. Based off the current selection, the forms will be either disabled, or enabled. If they are disabled, I would like to display a message box over the disabled form in the modal explaining why it is disabled.
I've tried using Ext.msg.alert and other forms of Ext.msg, however I am unsuccessful in getting them to remain over the forms. I can align them over the form, but upon scrolling it doesn't stay over the form, it just stays fixed in the main window position, instead of follow the form inside the modal. Is this possible to do?
I then tried to do it in a hackish way and set a loading mask over the form, which displays the message, but that as well moves when you scroll down.
I attempted to use the 'fixed' property of the components, but it seemed to do nothing.
I am not sure if I am looking at this from the wrong angle or what, but things don't seem to be working out for me.
Any ideas?
listeners:{
afterlayout: function(form, eOpts){
if(form.disabled){
var msg = Ext.Msg.alert({title:'Disabled', modal: false, fixed: true, msg:'Blah blah blah mmmkay.'});
msg.alignTo(form.el, 'c-c');
//fixed
}
}
},
Try this and let me know the result. Basically, we can override the base components or write our components.
Ext.define('Artlantis.view.OverlayWindow', {
extend: 'Ext.window.Window',
alias: 'widget.overlaywin',
defaults: {
autoScroll: true
},
layout: 'fit',
width: '50%',
height: '50%',
modal: true,
closeAction: 'destroy',
initComponent: function() {
this.callParent(arguments);
}
});
// to call this component
Ext.create('Artlantis.view.OverlayWindow',{
title: 'Disabled',
items: [
{
xtype: 'panel',
items: [
...
]
}
]
});
// or call by xtype
...
xtype: 'overlaywin'
So I'm trying to make an SCXML editor which is basically XML (state machine) with JavaScript blocks in it. I'm close, but I'm having trouble adding hints. It seems to boil down to I don't know the editing mode I'm in when it comes time to hint. I've looked in the CodeMirror object for clues but I'm not seeing it. I'm doing the multiplexing like so:
CodeMirror.defineMode("scxml", function (config) {
return CodeMirror.multiplexingMode(
CodeMirror.getMode(config, "text/xml"),
{
open: "<script>", close: "</script>",
mode: CodeMirror.getMode(config, "text/javascript"),
delimStyle: "delimit"
}
);
});
editorXml = CodeMirror.fromTextArea(document.getElementById("editXmlFile"), {
lineNumbers: true,
mode: 'scxml',
indentUnit: 4,
autoCloseTags: true,
matchBrackets: true,
extraKeys: {
"'>'": function (cm) { cm.closeTag(cm, '>'); },
"'/'": function (cm) { cm.closeTag(cm, '/'); },
"' '": function (cm) { CodeMirror.xmlHint(cm, ' '); },
"'<'": function (cm) { CodeMirror.xmlHint(cm, '<'); },
"Ctrl-Space": function (cm) { CodeMirror.xmlHint(cm, ''); }
}
});
Note in the extraKeys where the XML hinting is working, how do I get the JavaScript hinting in there? From the JavaScript hinting help, it appears I'd do something along the lines of:
CodeMirror.commands.autocomplete = function(cm) {
CodeMirror.simpleHint(cm, CodeMirror.javascriptHint);
}
... extraKeys: {"Ctrl-Space": "autocomplete"} ...
But either way, I need to know the mode I'm in (XML or JavaScript) to know to use simpleHint versus xmlHint. Anyone know how this might be done?
EDIT: cm.getMode().name and cm.getOption('mode') just return scxml when I'm in either section
Thanks!
I think you should be able to dispatch on CodeMirror.innerMode(cm.getMode(), cm.getTokenAt(POS).state).mode.name, where POS is the {line, ch} position that you're interested in. It will return a name like "xml" or "javascript", describing the inner mode at that position.