Vis.js: Adding showPopup in react style - javascript

I have a question to ask regarding vis.js popup option. Currently I am trying to implement it in react style so I was using https://github.com/crubier/react-graph-vis/tree/master/example as a starting point.
I realized that in src\index.js file I can add events array since I realize the select option is in there. However, when I do the following:
const events = {
select: function(event) {
var { nodes, edges } = event;
console.log("Selected nodes:");
console.log(nodes);
console.log("Selected edges:");
console.log(edges);
},
showPopup: function(event) {
document.getElementById('root').innerHTML = '<h2>showPopup event</h2>'+ JSON.stringify(params, null, 4);
}
};
I am not able to trigger the popup even at all. Inside the lib\index.js, I noticed that the code is supposed to loop over the events array:
var _iteratorNormalCompletion2 = true;
var _didIteratorError2 = false;
var _iteratorError2 = undefined;
try {
for (var _iterator2 = Object.keys(events)[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
var _eventName = _step2.value;
this.Network.on(_eventName, events[_eventName]);
}
} catch (err) {
_didIteratorError2 = true;
_iteratorError2 = err;
} finally {
try {
if (!_iteratorNormalCompletion2 && _iterator2.return) {
_iterator2.return();
}
} finally {
if (_didIteratorError2) {
throw _iteratorError2;
}
}
}
}
and I checked that vis.js has the popup option according to the documentation which can be found here: http://visjs.org/docs/network/
I am currently stuck on figuring out how to trigger the popup. There is a requirement to use react since the application will be based on it. It would be great if someone can point out what I did wrong.
Thanks in advance. XD
NOTE: This question is in regards to the github project that I am trying to build on top of. Therefore it is a little different because I am not taking a barebone vis.js

You are mixing things up. showPopup is an event, a function that is called when the popup is shown. You do not call it to show the popup.
To show the popup you simply hover over a node that has a title property.
Check out this fiddle I made (is in pure JS though): http://jsfiddle.net/56t9c0t4/

Related

Disable Touch on Materialize Carousel

It looks like no one has asked this question before since I've pretty much scoured the internet looking for a very simple answer.
How would one go about disabling the ability to swipe left/right on the materialize carousel?
in Materialize.js add/edit:
var allowCarouselDrag = true;
value: function _handleCarouselDrag(e) {
if(allowCarouselDrag){
....
}
}
You can set the allowCarouselDrag variable per application.
I solved it like this
// Create carouser
$('#carousel').carousel({
fullWidth: true,
indicators: false,
duration: 100,
});
// Get instance of carousel
carouselInstance = M.Carousel.getInstance(sliderDOM);
// Remove event listeners added by Materialize for corousel
document.getElementById("carousel").removeEventListener('mousedown', carouselInstance._handleCarouselTapBound);
document.getElementById("carousel").removeEventListener('mousemove', carouselInstance._handleCarouselDragBound);
document.getElementById("carousel").removeEventListener('mouseup', carouselInstance._handleCarouselReleaseBound);
document.getElementById("carousel").removeEventListener('mouseleave', carouselInstance._handleCarouselReleaseBound);
document.getElementById("carousel").removeEventListener('click', carouselInstance._handleCarouselClickBound);
After that drag/swipe is disabled and you can still change page/item via
carouselInstance.set(0);
and
carouselInstance.next(0);
This is far from a perfect solution, and it might disable too much of the functionality in your case, I'm not sure. An option to turn this on/off would be much appreciated.
But for my needs, turning off the events on the carousel did the job:
var carousel = $('.carousel.carousel-slider').carousel();
// Disable all swipping on carousel
if (typeof window.ontouchstart !== 'undefined') {
carousel.off('touchstart.carousel');
}
carousel.off('mousedown.carousel');
function tap(e) {
pressed = true;
dragged = false;
vertical_dragged = true;
reference = xpos(e);
referenceY = ypos(e);
velocity = amplitude = 0;
frame = offset;
timestamp = Date.now();
clearInterval(ticker);
ticker = setInterval(track, 100);
}
I have attempted to solve this problem for the past ~three days and have come to the conclusion that there is no clean solution other than directly editing the materialize.js file as in Lester's answer. Unfortunately, this is not an ideal solution as it causes issues when updating Materialize etc.
The simplest solution that I have come up with after this time is the following piece of javascript:
window.onload = function() {
window.mouseDownNow = false;
// The selector below must be more specific than .carousel.carousel-slider in
// order for the event to be cancelled properly.
$('.class-added-to-block-swiping-functionality')
.mousedown(function() {
window.mouseDownNow = true;
})
.mousemove(function(event) {
if(window.mouseDownNow) {
event.stopPropagation();
}
})
.mouseup(function() {
window.mouseDownNow = false;
});
};
This will simply stop the event from bubbling to the Materialize swiping functionality.
Note: I am not sure how specific the selector must be, mine were classes that were specific to text areas.

add new pane in kendo ui splitter

A want to add new panes to kendo ui spliter dynamically but it seems like it's not working.
Even in their website it doen't work: Kendo ui splitter demo (I'm talking about the append pane and insert pane)
Is it possible that they have added a demo of something that doesn't work, or am I missing something?
It's a bug - apparently, the code is not calling the _resize method when it should (in _addPane and remove, as far as I can see).
Seems to be an easy fix though (add this code somewhere before you first create your splitter):
kendo.ui.Splitter.fn._addPane = function (config, idx, paneElement) {
var that = this;
if (paneElement.length) {
that.options.panes.splice(idx, 0, config);
that._initPane(paneElement, config);
that._removeSplitBars();
that.trigger("resize");
that._resize();
}
return paneElement;
};
kendo.ui.Splitter.fn.remove = function (pane) {
pane = $(pane);
var that = this;
if (pane.length) {
kendo.destroy(pane);
pane.each(function (idx, element) {
that.options.panes.splice($(element).index(".k-pane"), 1);
$(element).remove();
});
that._removeSplitBars();
if (that.options.panes.length) {
that.trigger("resize");
that._resize();
}
}
return that;
}
See demo

How to find when reportviewer is loaded using reportviewer api

I have created a single page for all my reports and I am loading different versions of those reports (line, pie, chart, graph, etc) with a toolbar I made. All is working well there, except on the non-table type charts (line,pie,bar,etc). When those get rendered, I found that the text in the legends and series become blurry and through some research here and other places found that they are converted to images, which are then getting resized on me though a css class that is auto generated.
Firstly, what i'm trying to do:
I want to remove this class from the image that is generated at the time it is loaded. If i turn off async rendering on my report
AsyncRendering="false"
Along with this bit of jquery (targeting the div that contains the reportviewer):
$(document).ready(function () {
$('#reportDiv img').removeAttr('class');
});
Then the result is as expected. The image is not scaled and all is well. The problem, however, is that some of these reports may be quite large, resulting in the user not having any visual feedback of whether or not something is happening. I would like to continue using async rendering, so I started to look at the reportviewer javascript api.
Sys.Application.add_load(function () {
var reportViewer = $find("ctl00_mainContentPlaceHolder_ReportViewer1");
reportViewer.add_propertyChanged(viewerPropertyChanged);
});
function viewerPropertyChanged(sender, e) {
var viewer = $find("ctl00_mainContentPlaceHolder_ReportViewer1");
if (e.get_propertyName() === "isLoading") {
var button = document.getElementById("ctl00_mainContentPlaceHolder_ctlReportParamModuleId1_btnRunReport");
button.disabled = viewer.get_isLoading();
}
else {
if ($find("ctl00_mainContentPlaceHolder_ReportViewer1").get_reportAreaContent() == Microsoft.Reporting.WebFormsClient.ReportAreaContent.ReportPage) {
alert("here");
}
}
}
The first portion (isLoading) works as expected disabling the button. However immediately upon load I get
Object doesn't support property or method 'get_reportAreaContent'
Am I missing something obvious? These are the links from msdn that I used for reference:
reportviewer isLoading
reportviewer ReportAreaContentType
Bar graphs, Line graphs, pie charts, etc. are rendered as images. The images get re-sized based on the size of the report viewer control. Instead of using AsyncRendering="false", I created this javascript workaround and it has solved my problem.
var app = Sys.Application;
app.add_init(ApplicationInit);
function ApplicationInit(sender) {
var prm = Sys.WebForms.PageRequestManager.getInstance();
if (!prm.get_isInAsyncPostBack()) {
prm.add_endRequest(EndRequest)
}
}
function EndRequest(sender, args) {
var reportViewerControlId = "ReportViewer1";
if (sender._postBackControlClientIDs[0].indexOf(reportViewerControlId) >= 0) {
var reportViewerControlContainer = "reportViewerContainer"; // Id of <DIV>
var renderedReportImage = $("#" + reportViewerControlContainer + " img");
renderedReportImage.removeAttr("style").removeAttr("class");
var styleAttr = renderedReportImage.attr("style");
var classAttr = renderedReportImage.attr("class");
if (typeof styleAttr === 'undefined') {
console.log("Successfully removed the style attribute from the rendered report image!");
}
if (typeof classAttr === 'undefined') {
console.log("Successfully removed the class attribute from the rendered report image!");
}
}
}
Basically, I am listening to the endRequest of the PageRequestManager for my ReportViewerControl's ID, then simply removing the style and class attributes from the image to display it unmodified.

Jscrollpane and internal anchor links

I am using Jscrollpane and everything works great, except when I try to use it with an internal anchor.
It should work like the example on the official page.
But in my example it really destroys my site. The whole content is floating upwards and I can't figure it out myself.
Here is my page: http://kunden.kunstrasen.at/htmltriest/index.php?site=dieanreise&user_lang=de
and if the inner anchor is clicked: http://kunden.kunstrasen.at/htmltriest/index.php?site=dieanreise&user_lang=de#westautobahn
Anybody a clou whats going on here?
Thanks for your help.
jspane does not work with old style anchors
e.g.
<a name="anchor"></a>
instead you have to write
<a id="anchor"></a>
additionaly you have to enable
hijackInternalLinks: true;
in jScrollPane settings Object.
The hijackInternalLinks also captures links from outside the scrollpane, if you only need internal links you can add this code, like hijackInternalLinks it binds the click funktion on the a elements and calls the scrollToElement with the target:
\$(document).ready(function() {
panes = \$(".scroll");
//hijackInternalLinks: true;
panes.jScrollPane({
});
panes.each(function(i,obj){
var pane = \$(obj);
var api = pane.data('jsp');
var links = pane.find("a");
links.bind('click', function() {
var uriParts = this.href.split('#');
if (uriParts.length == 2) {
var target = '#' + uriParts[1];
try{
api.scrollToElement(target, true);
}catch(e){
alert(e);
}
return false;
}
});
});
});
but note you will always have to use the id attribute on a tags.
If you are using tinymce you can repair the code with this function
function myCustomCleanup(type, value) {
switch (type) {
case "get_from_editor_dom":
var as = value.getElementsByTagName("a");
for(var i=0; i< as.length;i++){
if (as[i].hasAttribute('name')){
var name = as[i].getAttribute('name');
as[i].setAttribute('id',name);
}
}
break;
}
return value;
}

Dashcode webapp flickers upon transition, only in iPhone Safari

I created a simple RSS web app using the template in Dashcode. Problem is, when choosing items in the list from the feed the transition flickers (even with the default settings). I am guessing its because of the images in the posts.
I tried disabling the transitions completely but even then I get a flickering when returning to the list. This problem does not appear to affect safari on OSX only on the iphone.
Here is the code that I think is responsible:
var topStories = parseInt(attributes.topStories, 30);
function load()
{
dashcode.setupParts();
// set today's date
var todaysDate = document.getElementById("todaysDate");
todaysDate.innerText = createDateStr(new Date()).toUpperCase();
setupFilters("headlineList");
// This message checks for common errors with the RSS feed or setup.
// The handler will hide the split view and display the error message.
handleCommonErrors(attributes.dataSource,
function(errorMessage) {
var stackLayout = document.getElementById("StackLayout")
if (stackLayout) {
stackLayout.style.display = 'none';
}
showError(errorMessage);
});
// get notifications from the stack layout when the transition ends
document.getElementById("StackLayout").object.endTransitionCallback = function(stackLayout, oldView, newView) {
// clear selection of lists when navigating to the first view
var firstView = stackLayout.getAllViews()[0];
if (newView == firstView) {
document.getElementById("headlineList").object.clearSelection(true);
}
}
}
function articleClicked(event)
{
document.getElementById("StackLayout").object.setCurrentView("articlePage", false, true);
}
function backToArticlesClicked(event)
{
document.getElementById("StackLayout").object.setCurrentView("frontPage", true);
}
function readMoreClicked(event)
{
var headlineList = dashcode.getDataSource('headlineList');
var secondHeadlines = dashcode.getDataSource("secondHeadlines");
var selectedItem = null;
if (headlineList.hasSelection()) {
selectedItem = headlineList.selectedObjects()[0];
} else if (secondHeadlines.hasSelection()) {
selectedItem = secondHeadlines.selectedObjects()[0];
}
if (selectedItem) {
var link = selectedItem.valueForKeyPath('link');
// If the link is an object, not a string, then this may be an ATOM feed, grab the actual
// href from the href attr
if (typeof(link) == 'object') {
link = selectedItem.valueForKeyPath('link.$href');
// If the link is an array (there is more then one link), just grab the first one
if (DC.typeOf(link) == 'array') {
link = link[0];
}
}
window.location = link;
}
}
var headlineListDataSource = {
// The List calls this method once for every row.
prepareRow: function(rowElement, rowIndex, templateElements) {
if (rowIndex >= topStories) {
templateElements['headlineDescription'].style.display = 'none';
templateElements['headlineTitle'].style.fontSize = '15px';
}
}
};
The following CSS rule fixed all of my "-webkit-transition" animation flickering issues on the iPad:
body {-webkit-transform:translate3d(0,0,0);}
I am not sure how well that applies to your problem but in general you should set the backface visibility to hidden if not needed. That will most likely kill all flickering on a page.
-webkit-backface-visibility: hidden;

Categories