I'm trying to figure out how to implement an autoplay function in a jquery script called Momentum Slider (link and demo), this script creates a horizontal slider that could be used for displaying things like related posts, so I tried using this resource Jquery image slider auto play, but with no success. How can I achieve that?
(function() {
var slidersContainer = document.querySelector('.sliders-container');
// Initializing the numbers slider
var msNumbers = new MomentumSlider({
el: slidersContainer,
cssClass: 'ms--numbers',
range: [1, 4],
rangeContent: function (i) {
return '0' + i;
},
style: {
transform: [{scale: [0.4, 1]}],
opacity: [0, 1]
},
interactive: false
});
// Initializing the titles slider
var titles = [
'King of the Ring Fight',
'Sound of Streets',
'Urban Fashion',
'Windy Sunset'
];
var msTitles = new MomentumSlider({
el: slidersContainer,
cssClass: 'ms--titles',
range: [0, 3],
rangeContent: function (i) {
return '<h3>'+ titles[i] +'</h3>';
},
vertical: true,
reverse: true,
style: {
opacity: [0, 1]
},
interactive: false
});
// Initializing the links slider
var msLinks = new MomentumSlider({
el: slidersContainer,
cssClass: 'ms--links',
range: [0, 3],
rangeContent: function () {
return '<a class="ms-slide__link">View Case</a>';
},
vertical: true,
interactive: false
});
// Get pagination items
var pagination = document.querySelector('.pagination');
var paginationItems = [].slice.call(pagination.children);
// Initializing the images slider
var msImages = new MomentumSlider({
// Element to append the slider
el: slidersContainer,
// CSS class to reference the slider
cssClass: 'ms--images',
// Generate the 4 slides required
range: [0, 3],
rangeContent: function () {
return '<div class="ms-slide__image-container"><div class="ms-slide__image"></div></div>';
},
// Syncronize the other sliders
sync: [msNumbers, msTitles, msLinks],
// Styles to interpolate as we move the slider
style: {
'.ms-slide__image': {
transform: [{scale: [1.5, 1]}]
}
},
// Update pagination if slider change
change: function(newIndex, oldIndex) {
if (typeof oldIndex !== 'undefined') {
paginationItems[oldIndex].classList.remove('pagination__item--active');
}
paginationItems[newIndex].classList.add('pagination__item--active');
}
});
// Select corresponding slider item when a pagination button is clicked
pagination.addEventListener('click', function(e) {
if (e.target.matches('.pagination__button')) {
var index = paginationItems.indexOf(e.target.parentNode);
msImages.select(index);
}
});
})();
Related
I have about 7 000 polygons in a GeoJSON file using VectorGrid, all is fine using one layer but I need to split this layer into 10 LayerGroups (10 regions with their own polygons). How can this be done without rewriting the code 10 times? That seems to be lots of waste, there must be a smarter way and I can't figure it out. This is the code Im testing with, the highlight has to be working with all 11 layers...
var all_regions = new L.layerGroup();
var region_1 = new L.layerGroup();
var region_2 = new L.layerGroup();
var region_3 = new L.layerGroup();
/* snip */
var region_10 = new L.layerGroup();
var highlight_polygon;
var clearHighlight = function () {
if (highlight_polygon) {
vectorGrid.resetFeatureStyle(highlight_polygon);
}
highlight_polygon = null;
};
var vectorTileOptions_allRegions = {
rendererFactory: L.canvas.tile,
maxNativeZoom: 13,
zIndex: 6,
vectorTileLayerStyles: {
sliced: {
weight: 2,
color: "gray",
opacity: 1,
fill: false,
//fillColor: 'white',
//stroke: true,
fillOpacity: 0,
},
},
interactive: true,
getFeatureId: function (f) {
return f.properties.id;
},
};
var vectorTileOptions_region_1 = {
rendererFactory: L.canvas.tile,
maxNativeZoom: 13,
zIndex: 6,
vectorTileLayerStyles: {
sliced: function (properties, zoom) {
var region = properties.region;
if (region === "region one") {
return {
weight: 2,
color: "gray",
opacity: 1,
fill: false,
//fillColor: 'white',
//stroke: true,
fillOpacity: 0,
};
} else {
return {
weight: 0,
opacity: 0,
fill: false,
stroke: false,
fillOpacity: 0,
interactive: false,
};
}
},
},
interactive: true,
getFeatureId: function (f) {
return f.properties.id;
},
};
// Next vectorTileOptions until all 11 of them....
$.getJSON("/data/regions.geojson", function (json) {
//Not sure this is the correct way doing it...
var vectorGrid = L.vectorGrid
.slicer(json, vectorTileOptions_allRegions, vectorTileOptions_region_1)
.on("click", function (e) {
var properties = e.layer.properties;
L.popup()
.setContent(
"<b>Name</b>: " +
properties.region_name +
"<br><b>Date</b>: " +
"<i>" +
properties.date +
"</i>"
)
.setLatLng(e.latlng)
.openOn(map);
clearHighlight();
highlight_polygon = e.layer.properties.id;
vectorGrid.setFeatureStyle(highlight_polygon, {
weight: 3,
color: "gray",
opacity: 1,
fillColor: "#ff9999",
fill: true,
radius: 6,
fillOpacity: 0.3,
});
L.DomEvent.stop(e);
});
var clearHighlight = function () {
if (highlight_polygon) {
vectorGrid.resetFeatureStyle(highlight_polygon);
}
highlight_polygon = null;
map.on("popupclose", clearHighlight);
};
//This will not work....
vectorGrid.addTo(all_regions);
vectorGrid.addTo(region_1);
});
You probably want to do something like...
var regions = []; // An array that will hold instances of VectorGrid
var vectorGridOptions = {
rendererFactory: L.canvas.tile,
maxNativeZoom: 13,
zIndex: 6,
vectorTileLayerStyles: {
sliced: {}, // Empty, because it shall be overwritten later.
},
};
var defaultStyle = {
stroke: true,
weight: 2,
};
var regionStyles = [];
regionStyles[0] = {
weight: 2,
color: "gray",
};
regionStyles[1] = {
weight: 1,
color: "red",
};
/* ...etc, up to regionStyles[9] */
fetch("/data/regions.geojson")
.then(function (response) { return response.json(); })
.then(function (json) {
// For each number between 0 and 9...
for (var i = 0; i <= 9; i++) {
// Assuming that the GeoJSON data holds a FeatureCollection,
// create a copy of said GeoJSON FeatureCollection, but holding only
// the wanted features.
// See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
var filteredGeoJSON = {
type: "FeatureCollection",
features: json.features.filter(function (feature) {
// This assumes that each Feature has a "regionID" property with a
// numeric value between 0 and 9.
return feature.properties.regionID === i;
}),
};
// Build up the options for the i-th VectorGrid by merging stuff together.
// See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
var fullRegionStyle = Object.assign({}, defaultStyle, regionStyles[i]);
// Overwrite some stuff in vectorGridOptions. Note that this changes the value of
// a piece of vectorGridOptions at each pass of the loop.
vectorGridOptions.vectorTileLayerStyles.sliced = fullRegionStyle;
regions[i] = L.vectorGrid.slicer(filteredGeoJSON, vectorTileOptions);
regions[i].addTo(map);
}
});
The key points here are:
Use a loop to iterate from 1 through 10
Keep things in numbered arrays instead of similarly-named variables
Filter the FeatureCollection, so each VectorGrid works with less data. Drawing invisible polygons/polylines would take as much computing time as drawing visible ones.
Refactor as much as possible, then build up concrete data structures (Object.assign, clone objects if needed)
How i can draw data-id for each column item in my function updateIndices simillar to updateColumnIndices?
I want to make my grid more dynamic.
I using only javascript and Muuri lib for drag and drop.
Thank you for help.
Muuri is a JavaScript layout engine that allows you to build all kinds of layouts and make them responsive, sortable, filterable, draggable and/or animated. Comparing to what's out there Muuri is a combination of Packery, Masonry, Isotope and Sortable. Wanna see it in action? Check out the demo on the website.
My code for this task under spoiler
function setupItemContainer() {
let itemContentContainer = document.querySelectorAll('.board-column-content');
for(let i = 0; i < itemContentContainer.length; i++)
{
if(!itemContentContainer[i].classList.contains('muuri'))
{
itemContainers.push(itemContentContainer[i]);
muuriItems = new Muuri(itemContentContainer[i], {
itemDraggingClass: 'muuri-item-default-dragging',
dragSortHeuristics: {
sortInterval: 10,
minDragDistance: 5,
minBounceBackAngle: Math.PI / 2
},
dragPlaceholder: {
enabled: true,
duration: 100,
easing: 'ease',
createElement: null,
onCreate: null,
onRemove: null
},
items: '.board-item',
layoutDuration: 400,
layoutEasing: 'ease',
dragEnabled: true,
dragSort: function () {
return columnGrids;
},
dragSortInterval: 0,
dragContainer: document.body,
dragReleaseDuration: 400,
dragReleaseEasing: 'ease',
itemPlaceholderClass: 'muuri-item-placeholder'
})
.on('dragStart', function (item) {
item.getElement().style.width = item.getWidth() + 'px';
item.getElement().style.height = item.getHeight() + 'px';
})
.on('dragReleaseEnd', function (item) {
item.getElement().style.width = '';
item.getElement().style.height = '';
columnGrids.forEach(function (muuriItems) {
muuriItems.refreshItems();
});
})
.on('layoutStart', function () {
muuriColumns.refreshItems().layout();
})
.on('move', updateIndices)
.on('sort', updateIndices);
columnGrids.push(muuriItems);
}
}
}
function setupColumnsContainer() {
muuriColumns = new Muuri(gridElement, {
itemDraggingClass: 'muuri-item-column-dragging',
layoutDuration: 400,
layoutEasing: 'ease',
dragEnabled: true,
dragSortInterval: 0,
dragStartPredicate: {
handle: '.board-column-header'
},
dragReleaseDuration: 400,
dragReleaseEasing: 'ease',
})
.on('move', updateColumnIndices)
.on('sort', updateColumnIndices);
}
function updateColumnIndices() {
muuriColumns.getItems().forEach(function (item, i) {
item.getElement().setAttribute('data-id', i);
});
}
function updateIndices() {
muuriItems.getItems().forEach(function (item, i) {
item.getElement().setAttribute('data-id', i);
});
}
Ok so I build sync charts with test data. Everything works perfectly. The only problem I have is that I want to export all of them in one PDF but I only have the option to do it seperatly. So I build in a button that gets the charts in an array and exports it to PDF but it does not want to work.
This is the JS i have that builds the charts
function clickModal(test) {
document.getElementById("myModal").style.display = "block";
// Call the AJAX function that start the chart procedures
getAjaxData(test);
}
// HIGHCHART FUNCTIONALITY STARTS HERE
['mousemove', 'touchmove', 'touchstart'].forEach(function (eventType) {
document.getElementById('container').addEventListener(
eventType,
function (e) {
var chart,
point,
i,
event;
for (i = 0; i < Highcharts.charts.length; i = i + 1) {
chart = Highcharts.charts[i];
// Find coordinates within the chart
event = chart.pointer.normalize(e);
// Get the hovered point
point = chart.series[0].searchPoint(event, true);
if (point) {
point.highlight(e);
}
}
}
);
});
/**
* Override the reset function, we don't need to hide the tooltips and
* crosshairs.
*/
Highcharts.Pointer.prototype.reset = function () {
return undefined;
};
/**
* Highlight a point by showing tooltip, setting hover state and draw crosshair
*/
Highcharts.Point.prototype.highlight = function (event) {
event = this.series.chart.pointer.normalize(event);
this.onMouseOver(); // Show the hover marker
this.series.chart.tooltip.refresh(this); // Show the tooltip
this.series.chart.xAxis[0].drawCrosshair(event, this); // Show the crosshair
};
/**
* Synchronize zooming through the setExtremes event handler.
*/
function syncExtremes(e) {
var thisChart = this.chart;
if (e.trigger !== 'syncExtremes') { // Prevent feedback loop
Highcharts.each(Highcharts.charts, function (chart) {
if (chart !== thisChart) {
if (chart.xAxis[0].setExtremes) { // It is null while updating
chart.xAxis[0].setExtremes(
e.min,
e.max,
undefined,
false,
{ trigger: 'syncExtremes' }
);
}
}
});
}
}
function getAjaxData(test){
$.getJSON('datasync.php', function(chartData, tstSuccess) {
// Display the results of the getJSON call to data.php
document.getElementById("json1").innerHTML = JSON.stringify(tstSuccess, undefined, 2);
document.getElementById("json").innerHTML = JSON.stringify(chartData, undefined, 2);
var charts1 = {}; // global variable
var index = 0;
// Loop through each dataset in the returned JSON
chartData.datasets.forEach(function (dataset, i) {
// Add X values
dataset.data = Highcharts.map(dataset.data, function (val, j) {
return [chartData.xData[j], val];
});
// Create a child div for each dataset that is returned
var chartDiv = document.createElement('div');
chartDiv.className = 'chart';
document.getElementById('container').appendChild(chartDiv);
charts1[index] = Highcharts.chart(chartDiv, {
chart: {
marginLeft: 40, // Keep all charts left aligned
spacingTop: 20,
spacingBottom: 20
},
exporting: {
buttons: {
contextButton: {
menuItems: [
'downloadPDF',
'viewData'
]
}
}
},
title: {
text: dataset.name,
align: 'left',
margin: 0,
x: 30
},
credits: {
enabled: false
},
legend: {
enabled: false
},
xAxis: {
crosshair: true,
events: {
setExtremes: syncExtremes
},
labels: {
//format: '{value} km'
format: ' '
}
},
yAxis: {
title: {
text: null
}
},
tooltip: {
positioner: function () {
return {
// right aligned
x: this.chart.chartWidth - this.label.width - 40,
y: 10 // align to title
};
},
borderWidth: 0,
backgroundColor: 'none',
pointFormat: '{point.y}',
headerFormat: '',
shadow: false,
style: {
fontSize: '18px'
},
valueDecimals: dataset.valueDecimals
},
series: [{
data: dataset.data,
name: dataset.name,
type: dataset.type,
color: Highcharts.getOptions().colors[i],
fillOpacity: 0.3,
tooltip: {
valueSuffix: ' ' + dataset.unit
}
}]
});
});
index++;
});
}
$('#export-pdf').click(function() {
Highcharts.exportCharts([charts1[0], charts1[1]], {
type: 'application/pdf'
});
});
And this is my HTML
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<div id="container">
<button id="export-png">Export to PNG</button>
</div>
</div>
</div>
So im using PHP to build up JSON from an array ( will use SQL to build from database later just want to get the functionality working )
Then I use the highcharts library along with JS to display the charts
Ok so I figured out the problem. I brought in this piece of code
Highcharts.getSVG = function(charts) {
var svgArr = [],
top = 0,
width = 0;
$.each(charts, function(i, chart) {
var svg = chart.getSVG();
svg = svg.replace('<svg', '<g transform="translate(0,' + top + ')" ');
svg = svg.replace('</svg>', '</g>');
svg = svg.replace('-9000000000', '-999'); // Bug in v4.2.6
top += chart.chartHeight;
width = Math.max(width, chart.chartWidth);
svgArr.push(svg);
});
return '<svg height="'+ top +'" width="' + width + '" version="1.1" xmlns="http://www.w3.org/2000/svg">' + svgArr.join('') + '</svg>';
};
/**
* Create a global exportCharts method that takes an array of charts as an argument,
* and exporting options as the second argument
*/
Highcharts.exportCharts = function(charts, options) {
// Merge the options
options = Highcharts.merge(Highcharts.getOptions().exporting, options);
// Post to export server
Highcharts.post(options.url, {
filename: options.filename || 'chart',
type: options.type,
width: options.width,
svg: Highcharts.getSVG(charts)
});
};
I changed the charts so that it does not created an array of chart objects
Highcharts.chart(chartDiv, {
chart: {
marginLeft: 40, // Keep all charts left aligned
spacingTop: 20,
spacingBottom: 20
},
instead of
charts1[index] = Highcharts.chart(chartDiv, {
chart: {
marginLeft: 40, // Keep all charts left aligned
spacingTop: 20,
spacingBottom: 20
},
And in the buttons function I just used the highcharts.charts instead of the array
$('#export-pdf').click(function() {
Highcharts.exportCharts(Highcharts.charts, {
type: 'application/pdf'
});
});
I have an handsontable like the below image. After selecting any one of the rows (for example LastName) it should remove that particular row permanently. How can I achieve this using jQuery?
This is my code which I have written using the afterSelection function but I don't know how to delete that row.
this.tab.handsontable({
data: self.data,
dataSchema: {
columnsexpo: null,
placeholder: null
},
colHeaders: ['Columns Export'],
rowHeaders: true,
fixedColumns: true,
fillHandle: {
autoInsertRow: false,
},
columnSorting: true,
columns: [{
data: 'columnsexpo',
readOnly: true
}, ],
stretchH: 'all',
className: "htCenter",
height: 420,
afterChange: function() {},
beforeRemoveRow: function(row, col) {
var m = this.getDataAtCell(row, 0);
var mandatory = true;
self.MandatoryFields.forEach(function(item) {
if (!_.isEmpty(m)) {
var found = m.toLowerCase().includes(item.toLowerCase());
if (found) {
mandatory = false;
}
}
});
if (!mandatory) {
return false
} else
return true;
},
afterSelection: function(r, c) {
var da = this.getDataAtRow(r);
selectedRow = "";
selectedRow = da[0];
console.log(selectedRow);
},
afterRender: function() {
if (init) {
Events.trigger("DEW:ValidRequest", 1, self.checkValid());
}
init = true;
$('#tablesortable thead th div').filter(function() {
return $(this).text() == "Columns Export";
}).popup({
title: 'Columns Export',
position: 'top center'
});
}
});
EDIT
afterSelection: function(r,c,e){
var dat = this.getDataAtRow(r)
this.alter('remove_row', r, 1);
console.log(r);
},
Now after applying above function it is removing selected Row but if i select last row it is removing all previously selected row
use hot.alter('remove_row', 10, 2); inside after selection method of handsontable.
No need for jquery.
Or if you want to use jquery, store the handsontable instance in some varitable and call the same on row selection.
Update -- added deselectCell before removing the row. after removing the row, previous row is getting selected which is causing the problem.
afterSelection: function(r, c, e) {
this.deselectCell()
this.alter('remove_row', r, 1);
}
I have problems viewing the range uislider on ios and android
In an application with meteor and cordova, in the following video I leave to the detail. When moving the slider in the browser works but in ios and android I can not visualize the ranges obtained.
I have the following code:
Try with jquery as you can see that the code is commented and I did not get results
Template.range.onRendered(function () {
$(function () {
$('#slider-edad').noUiSlider({
start: [18, 30],
step: 1,
range: {
'min': 18,
'max': 60
}
});
});
$(function () {
$('#range').noUiSlider({
start: [10],
step: 2,
range: {
'min': 10,
'max': 100
}
});
});
// km();
});
function km(instance) {
// $('.km-range').html('');
// Session.set("Kilometros", '');
var d1 = $('#range').val();
var d0r = parseInt(d1);
console.log('Kilometros: ', d0r);
instance.km1.set(d0r);
// Session.set("Kilometros", d0r);
// $('.km-range').html(d0r, 'Km');
}
Template.range.events({
'click #range': function (event, instance) {
console.log('click');
km(instance);
},
});
After a long chat and many tries it turned out to be the click event, that makes the noUiSlider not work on mobile.
So checking on the noUiSlider events page and putting this into some reactive variables we got the following code running:
import { Template } from 'meteor/templating';
import { ReactiveDict } from 'meteor/reactive-dict';
//import template html file
Template.findme.onCreated(function (){
this.state = new ReactiveDict();
// set start values
this.state.set("km", 10);
this.state.set("agemin", 18);
this.state.set("agemax", 30);
});
Template.findme.onRendered(function() {
if (!this._rendered) {
this._rendered = true;
// create slider
$('#slider-edad').noUiSlider({
start: [ 18, 30 ],
step: 1,
range: {
'min': 18,
'max': 60
}
})
$('#range').noUiSlider({
start: [ 10 ],
step: 2,
range: {
'min': 10,
'max': 100
}
});
}
});
Template.findme.helpers({
KilosM: function(){
return Template.instance().state.get("km");
},
agemin: function(){
return Template.instance().state.get("agemin");
},
agemax: function(){
return Template.instance().state.get("agemax");
},
});
Template.findme.events({
'slide #slider-edad':function(event,instance) {
var d2= $('#slider-edad').val()
var d0 = parseInt(d2[0]);
var d1 = parseInt(d2[1]);
console.log(d0,d1);
instance.state.set("agemin", d0);
instance.state.set("agemax", d1);
} ,
'slide #range': function(event , instance) {
var d1= $('#range').val();
var d0r = parseInt(d1);
console.log('Kilometros: ',d0r);
instance.state.set("km", d0r);
},
});
and the html template being:
<div class="">
<span class="edad-range0">{{agemin}}</span>
<span class="edad-title"> Age </span>
<span class="edad-range1">{{agemax}}</span><br>
<div id="slider-edad"></div><br><br>
</div>