For example, this page:
http://jqueryui.com/demos/show/
I knew that the show's prototype is: show( effect, [options], [speed], [callback] ), and it says "options:A object/hash including specific options for the effect." What are these specific options?? I can't find them :-(
You can see some examples in the source code on this page: http://jqueryui.com/demos/effect/#option-options
See this part of the code, for instance:
// most effect types need no options passed by default
var options = {};
// some effects have required parameters
if ( selectedEffect === "scale" ) {
options = { percent: 0 };
} else if ( selectedEffect === "transfer" ) {
options = { to: "#button", className: "ui-effects-transfer" };
} else if ( selectedEffect === "size" ) {
options = { to: { width: 200, height: 60 } };
}
Related
I need to create tests in Postman where I compare two responses for two different requests and I want to see what is (if there is anything) the difference between them.
Case is that I can get json response which can contain anything, then I need to check if on different environment the same request gave the same response.
Right now I do it that way:
In first request I save responsee:
pm.globals.set('response', pm.response.json());
In second request I compare response with saved one with:
pm.test('Should have identical responses as previous', () => {
pm.expect(pm.response.json()).to.deep.equal(pm.globals.get('response'));
});
But in this case I just see if there is any difference, so I have to go through a lot of lines each time to find what was wrong.
What I need to get is when I have first response like:
[
{
color: "red",
value: "#f00"
},
{
color: "green",
value: "#0f0"
}
]
And second like:
[
{
color: "red",
value: "#f00"
},
{
color: "green",
value: "#0f2"
}
]
I want to get info in run results like:
there is difference in line: value: "#0f2"
or
in first response there was value: "#0f0" and in second there is value: "#0f2"
Is it even possible to do?
Ok, the solution that I worked with:
In first request I saved response with
pm.globals.set('respa', pm.response.json());
In second I used function to find differences:
function diff(obj1, obj2) {
const result = {};
if (Object.is(obj1, obj2)) {
return undefined;
}
if (!obj2 || typeof obj2 !== 'object') {
return obj2;
}
Object.keys(obj1).concat(Object.keys(obj2)).forEach(key => {
if (obj2[key] !== obj1[key] && !Object.is(obj1[key], obj2[key])) {
result[key] = obj2[key];
}
if (typeof obj2[key] === 'object' && typeof obj1[key] === 'object') {
const value = diff(obj1[key], obj2[key]);
if (value !== undefined) {
result[key] = value;
}
}
});
return result;
}
And then also in second response I've added 'if' which create test when there is a difference in responses, and that test is named as difference, and also it's saved in console as json.
pm.globals.set('respb', pm.response.json());
if (!Object.is(pm.globals.get('respb'), pm.globals.get('respa'))) {
const result = diff(pm.globals.get('respb'), pm.globals.get('res12'));
console.log(result);
pm.test('Difference' + JSON.stringify(result), () => {
pm.expect(0).to.equal(pm.globals.get(1));
});
}
I am currently working on rich text editor based on slatejs. I need to implement possibility to insert paragraph right after an image, when image is focused. Now when image has focus and I press Enter button - nothing happend. It should insert new empty paragraph right after the image.
Same behavior in example https://www.slatejs.org/examples/images
Any help appreciated
If you are selecting a void node (Image node), pressing enter won't add a new line by default. The most upvoted answer adds a new line only on image insert, which doesn't address the question.
Here's a plugin on how to give the editor your desired behavior.
import { Editor, Node, Path, Range, Transforms } from 'slate'
export const withCorrectVoidBehavior = editor => {
const { deleteBackward, insertBreak } = editor
// if current selection is void node, insert a default node below
editor.insertBreak = () => {
if (!editor.selection || !Range.isCollapsed(editor.selection)) {
return insertBreak()
}
const selectedNodePath = Path.parent(editor.selection.anchor.path)
const selectedNode = Node.get(editor, selectedNodePath)
if (Editor.isVoid(editor, selectedNode)) {
Editor.insertNode(editor, {
type: 'paragraph',
children: [{ text: '' }],
})
return
}
insertBreak()
}
// if prev node is a void node, remove the current node and select the void node
editor.deleteBackward = unit => {
if (
!editor.selection ||
!Range.isCollapsed(editor.selection) ||
editor.selection.anchor.offset !== 0
) {
return deleteBackward(unit)
}
const parentPath = Path.parent(editor.selection.anchor.path)
const parentNode = Node.get(editor, parentPath)
const parentIsEmpty = Node.string(parentNode).length === 0
if (parentIsEmpty && Path.hasPrevious(parentPath)) {
const prevNodePath = Path.previous(parentPath)
const prevNode = Node.get(editor, prevNodePath)
if (Editor.isVoid(editor, prevNode)) {
return Transforms.removeNodes(editor)
}
}
deleteBackward(unit)
}
return editor
}
We override the insertBreak behavior (which gets called on carrige return) and insert a blank line instead by calling Editor.insertNode(editor, blankNode) if the selected node is void.
We also override the deleteBackward behavior. Without the plugin, deleting an empty line right after a void node will delete the node too! Now, instead of deleting the node before, we delete the blank line and select the node before.
To use this plugin, you would do something like:
const editor = useMemo(() => withCorrectVoidBehavior(withReact(createEditor())), []);
I stole the plugin code from: https://github.com/ianstormtaylor/slate/issues/3991
Editing the source that SlateJS gave, I just added a paragraph node within the insertImage() function.
SlateJS Source:
const insertImage = (editor, url) => {
const text = { text: '' }
const image = { type: 'image', url, children: [text] }
Transforms.insertNodes(editor, image)
}
Edit To:
const insertImage = (editor, url) => {
const text = { text: '' }
const image = [
{
type: 'image',
url,
children: [text]
},
{
type: 'paragraph',
children: [text],
}
];
Transforms.insertNodes(editor, image);
};
I am using UI-grid, and I have a bunch of JS date objects like so:
"dob": new Date('1942-11-19')
I want to be able to filter the column by date when you click the "sort ascending/descending" buttons. As such, I have set the colDef up like so:
{
field: 'dob'
, displayName: 'D.O.B.'
, width: '130'
, editableCellTemplate: '<div><form name="inputForm"><input type="INPUT_TYPE" ng-class="\'colt\' + col.uid" ui-grid-editor ng-model="MODEL_COL_FIELD" style="border-bottom-color: #74B3CE; border-bottom-width: 2px;"></form></div>'
, headerCellClass: $scope.highlightFilteredHeader
, cellTemplate: '<div class="ui-grid-cell-contents" >{{grid.getCellValue(row, col)| date:\'MM-dd-yyyy\'}}</div>'
, cellFilter: 'date'
, type: 'date'
},
however, the column simply does not sort correctly. I even tried to set up a function to sort it from an external button like so:
function mostRecent(){
console.log('clicked mostRecent');
$scope.gridApi.grid.sortColumn(
$scope.gridApi.grid.getColumn('dob'), uiGridConstants.DESC
);
$scope.gridApi.grid.notifyDataChange(uiGridConstants.dataChange.ALL); //this line updates the rest of the columns accordingly
};
But it also causes a mish-mush sort that is not correct. Does anyone know what the issue is? I thought it might have to do with my cellTemplate, but after removing the template, there wasn't a difference...
Yes you are right, ui-grid doesn't support sorting of Date type columns.
However you can define a sortingAlgorithm in the columnDef.
Here is how your column definition should look like:
...
columnDefinition.sortingAlgorithm = function (firstDateString, secondDateString) {
var dateFormat = 'YYYY-MM-DD';
return function (firstDateString, secondDateString, dateFormat) {
if (!firstDateString && !secondDateString) {
return 0;
}
if (!firstDateString) {
return 1;
}
if (!secondDateString) {
return -1;
}
var firstDate = $window.moment(firstDateString, dateFormat);
if (!firstDate.isValid()) {
throw new Error('Invalid date: ', firstDateString);
}
var secondDate = $window.moment(secondDateString, dateFormat);
if (!firstDate.isValid()) {
throw new Error('Invalid date: ', secondDateString);
}
if (firstDate.isSame(secondDate)) {
return 0;
} else {
return firstDate.isBefore(secondDate) ? -1 : 1;
}
};
};
...
Please note that in this example Moment.js is used. It is a very useful library so you might probably find also another place in your project where to use it.
$scope.gridOptions = {
data: 'gridData',
columnDefs: [
{field: 'name', displayName: 'Name'},
{field:'age',
displayName:'Birth Date',
sortFn: function (aDate, bDate) {
var a=new Date(aDate);
var b=new Date(bDate);
if (a < b) {
return -1;
}
else if (a > b) {
return 1;
}
else {
return 0;
}
}
}]
};
Try this
http://plnkr.co/edit/0VD3X5YvuNSWAZlig95X?p=info
reference :
https://github.com/angular-ui/ui-grid/issues/222
You can define the Sorting Algorithm for the date fields in UI Grid like below
columnDefs: [
{
field: 'DateFrom', displayName: 'From',
sortingAlgorithm: function (aDate, bDate, rowA, rowB, direction) {
var a = new Date(moment(aDate, "DD-MM-YYYY").format("YYYY-MM-DD"));
//here DD-MM-YYYY is the current format in which the dates are returned
var b = new Date(moment(bDate, "DD-MM-YYYY").format("YYYY-MM-DD"));
if (a < b) {
return -1;
}
else if (a > b) {
return 1;
}
else {
return 0;
}
}
}
]
We can sort the ui-grid column containing date field in a simplest way.
Make use of cellTemplate in this way:
{
name: "Date",
field: 'date',
cellTemplate:'<div>{{row.entity.date | date:"dd/MM/yyyy"}}</div>'
},
So, you can choose any format for date, for eg. date:"dd-MM" etc.
Select2 Jquery Plugin
I was having hard time how to override the default message for minimum length input in jquery Select2.
by default the plugin gives the following message.
Default Text
Please enter 1 more characters
My requirement was to show, the following text
Required Text
Enter 1 Character
please share the solution.
Thanks.
The accepted answer does not work for Select2 v4. Expanding on the comment by #IsaacKleinman, the way to override the default messages for an individual Select2 instance is through the language property:
var opts = {
language: {
inputTooShort: function(args) {
// args.minimum is the minimum required length
// args.input is the user-typed text
return "Type more stuff";
},
inputTooLong: function(args) {
// args.maximum is the maximum allowed length
// args.input is the user-typed text
return "You typed too much";
},
errorLoading: function() {
return "Error loading results";
},
loadingMore: function() {
return "Loading more results";
},
noResults: function() {
return "No results found";
},
searching: function() {
return "Searching...";
},
maximumSelected: function(args) {
// args.maximum is the maximum number of items the user may select
return "Error loading results";
}
}
};
$('#mySelect').select2(opts);
To override the functions globally, call the set function on the defaults (according to the docs):
$.fn.select2.defaults.set("key", "value")
However, in our code we do it like this:
$.fn.select2.defaults.defaults['language'].searching = function(){
return 'Custom searching message'
};
I don't know why we don't follow the docs, but it works.
Solution
Here is the solution that i have found out.
Prior to v4
Initialize
$("input[name='cont_responsible'],input[name='corr_responsible'],input[name='prev_responsible'],input[name='pfmea_responsible']").select2({
minimumInputLength: 1,
formatInputTooShort: function () {
return "Enter 1 Character";
},
});
Note
Do not forget to add this code in your document. ready function.
$(document).ready(function () {
});
I shared my solution, any better solutions are welcome.
Thanks.
Using v4 and onwards
The following worked for V4. #Isaac Kleinman
language: { inputTooShort: function () { return ''; } },
You can try this on version 4.0 or higher
you can see reference for answer frome this link :
issues reference
$("#select2").select2({
minimumInputLength: 1,
language: {
inputTooShort: function() {
return 'Please Add More Text';
}
}
});
If you are using django-select2, just add attributes to your form in forms.py:
widget=BookSelect2Widget(
attrs={'data-minimum-input-length': 1}
)
Override the function behaviour like below
$.fn.select2.defaults = $.extend($.fn.select2.defaults, {
formatMatches: function(matches) {
return matches + $filter('translate')('label.matches.found');
},
formatNoMatches: function() {
return $filter('translate')('noMatches.found');
},
formatInputTooShort: function(input, min) {
var n = min - input.length;
return $filter('translate')('label.please.enter ') + n + $filter('translate')(' more.characters') + (n == 1 ? "" : "s");
},
formatInputTooLong: function(input, max) {
var n = input.length - max;
return $filter('translate')('please.delete ') + n + $filter('translate')('')('delete.characters') + (n == 1 ? "" : "s");
},
formatSelectionTooBig: function(limit) {
return $filter('translate')('select.only') + limit + $filter('translate')('select.item ') + (limit == 1 ? "" : "s");
},
formatLoadMore: function(pageNumber) {
return $filter('translate')('load.results');
},
formatSearching: function() {
return $filter('translate')('label.search');
}
});
}
I've currently got an existing application that uses Highcharts. Everything in the application works perfectly and in all browsers. The graph consists of multiple series all with different colours.
Recently I added the ability server side using PhantomJS to generate automated PDF reports from various of the application pages. Including the Highcharts rendered graph.
I do this using the following command:
phantomjs convertpage.js url file size
The convertpage.js contains the following:
var page = require('webpage').create(),
system = require('system'),
address, output, size;
if (system.args.length < 3 || system.args.length > 5) {
console.log('Usage: rasterize.js URL filename [paperwidth*paperheight|paperformat] [zoom]');
console.log(' paper (pdf output) examples: "5in*7.5in", "10cm*20cm", "A4", "Letter"');
phantom.exit(1);
} else {
address = system.args[1];
output = system.args[2];
page.viewportSize = { width: 600, height: 600 };
if (system.args.length > 3 && system.args[2].substr(-4) === ".pdf") {
size = system.args[3].split('*');
page.paperSize = size.length === 2 ? { width: size[0], height: size[1], margin: '0px' }
: { format: system.args[3], orientation: 'portrait', margin: '1cm' };
}
if (system.args.length > 4) {
page.zoomFactor = system.args[4];
}
page.open(address, function (status) {
if (status !== 'success') {
console.log('Unable to load the address!');
phantom.exit();
} else {
var timeout = address.indexOf('graphs')>-1 ? 20000 : 500;
console.log('Timeout: '+timeout);
window.setTimeout(function () {
page.render(output);
phantom.exit();
}, timeout);
}
});
}
On the application page that is rendering chart I am setting the series in the following manner, which is working well on the pages themselves via a browser:
$.each(dbFields, function (key, field){
var tmp = new Object();
tmp.name = fieldsObject[key];
tmp.color = colorsObject[key];
tmp.data = filtered[field];
tmp.min = 0;
tmp.lineWidth = 1.5;
seriesCalculated.push(tmp);
});
However, when I generate it using the script above and PhantomJS none of the colours are applied and neither the line thickness... it's simply a very thick light grey line for each series.
Any help/ideas would by much appreciated!
Sample of incorrect output can be found here