Gigya Socialize ShareBar API get provider name on click providers - javascript

I am using the Gigya Socialize ShareBar API in my project. I want to get the Provider name on any provider click in sharing popup.
I can't use onSendDone function ref in the project. Is there callback to get the provider name on click it?
Here is the Gigya Documention link: http://developers.gigya.com/display/GD/socialize.showShareBarUI+JS

You can also use the onShareButtonClicked event to do something with the name of the provider. Note that this will not work for Native login buttons (Google/Facebook on mobile) but if you are doing on the web then this should do what you need. I am attaching a working example (requires a Gigya API key on the page).
// Create a div for the widget (or use an existing div on your page)
var newShareDiv = document.createElement('div');
newShareDiv.id='ShareDiv';
newShareDiv.setAttribute('style', 'position: absolute; z-index: 1000; margin: 0px auto; margin-top: 10px !important; width: 200px; height: 20px; background-color: yellow; border: 2 px solid red;')
document.body.appendChild(newShareDiv);
//
// Create the UserAction for sharing
var gigyaShareAction = new gigya.socialize.UserAction();
gigyaShareAction.linkBack = 'https://demo.gigya.com';
gigyaShareAction.userMessage = 'Check this out!';
//
// Define shareButtons
var shareButtons = 'Facebook, Twitter, LinkedIn, Messenger, share';
//
// Define the Share Bar Plugin's params object
var shareParams = {
userAction: gigyaShareAction,
showCounts: 'none',
containerID: 'ShareDiv',
scope: 'both',
privacy: 'public',
iconsOnly: true,
layout: 'horizontal',
noButtonBorders: false,
operationMode: 'simpleShare',
onShareButtonClicked : function(e) {
console.log(e.shareItem.provider);
},
shareButtons: shareButtons // list of providers
};
//
// Load the Share Bar Plugin:
gigya.socialize.showShareBarUI(shareParams);
This will log to the console the name of the Provider that was clicked, you can alternatively create a var and then send it somewhere, or fire a Google Analytics event with the data.

Related

Openlayers - trying to create the Overlay feature on the map

I am struggling with creating the overlay on my map. I want to incorporate the example like here:
https://openlayers.org/en/latest/examples/overlay.html
https://openlayers.org/en/latest/apidoc/module-ol_Overlay-Overlay.html
but I cannot use the import statement, because I am getting an error:
Uncaught SyntaxError: Cannot use import statement outside a module
which has an explanation here:
https://github.com/TypeStrong/ts-node#syntaxerror
and here:
Why examples don't work? (a struggle with imports)
"Uncaught SyntaxError: Cannot use import statement outside a module" when importing ECMAScript 6
I tried to do sth like this:
<script type="module" src="./layers/overlay.js" type="text/javascript"></script>
but an error still comes out and now it's related to the CORS policy:
Access to script at 'file:///C:/Users.../layers/overlay.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
Unfortunately I need this feature offline.
In this thread I found, that there is an alternative to the import feature:
https://gis.stackexchange.com/questions/310482/unexpected-token-identifier-error-import-openlayers/310501#310501
and I tried to adjust my code into it, which looks like this:
var fromLonLat = ol.proj.fromLonLat
var pos = fromLonLat([-0.21005,52.08093]);
var overlay = new ol.Overlay({
element: container,
autoPan: true,
autoPanAnimation: {
duration: 250,
},
});
var popup = new overlay({
element: document.getElementById('popup'),
});
map.addOverlay(popup);
// Vienna marker
var marker = new overlay({
position: pos,
positioning: 'center-center',
element: document.getElementById('marker'),
stopEvent: false,
});
map.addOverlay(marker);
// Vienna label
var vienna = new overlay({
position: pos,
element: document.getElementById('vienna'),
});
map.addOverlay(vienna);
map.on('click', function (evt) {
var element = popup.getElement();
var coordinate = evt.coordinate;
var hdms = toStringHDMS(toLonLat(coordinate));
$(element).popover('dispose');
popup.setPosition(coordinate);
$(element).popover({
container: element,
placement: 'top',
animation: false,
html: true,
content: '<p>The location you clicked was:</p><code>' + hdms + '</code>',
});
$(element).popover('show');
});
and now I am getting an error like this:
Uncaught TypeError: overlay is not a constructor
at overlay.js:15
similar to the issue here:
openlayers3 undefined is not a constructor error on ol.source.StaticVector
Regarding this I found:
https://github.com/Viglino/ol-ext
including all relevant extensions for OpenLayers. Unfortunately after attaching the relevant scripts, the problem is still the same.
My another approaching was to replace everywhere the new overlay with the new ol.Overlay. In this event the console says nothing, but I can't see an overlay at all.
The code might be specicif, because it comes from the QGIS2web plugin. The major script with map as well as the index.html file you can find in this fiddle link below:
https://jsfiddle.net/2adv41bs/
Many sources refers me to the newest ol package
https://openlayers.org/download/
but since I superseded the link in my HTML code it's still doesn't work at all
I am also not familiar with creating the bundle in openlayers
https://openlayers.org/en/latest/doc/tutorials/bundle.html
A similar thread is here:
https://gis.stackexchange.com/questions/380382/incorporating-overlay-for-the-openlayers-map-generated-by-qgis2web-plugin
Is it possible to launch the overlay option for Openlayers map offline?
The good alternative for import can be found here:
https://gis.stackexchange.com/questions/310482/unexpected-token-identifier-error-import-openlayers/310501#310501
which changes the situation completely, because now the final code can look as this:
HTML
<div id="map" class="map">
<div id="popup" class="ol-popup">
<div id="popup-content"></div>
</div>
</div>
<div style="display: none;">
<!-- Clickable label for Vienna -->
<a class="overlay" id="vienna" target="_blank"
href="http://en.wikipedia.org/wiki/Vienna">Vienna</a>
<div id="marker" title="Marker"></div>
<!-- Popup -->
<div id="popup" title="Welcome to OpenLayers"></div>
</div>
Next, our CSS
#marker {
width: 20px;
height: 20px;
border: 1px solid #088;
border-radius: 10px;
background-color: #0FF;
opacity: 0.5;
}
#vienna {
text-decoration: none;
color: white;
font-size: 11pt;
font-weight: bold;
text-shadow: black 0.1em 0.1em 0.2em;
}
.popover-body {
min-width: 276px;
}
and the JS
var fromLonLat = ol.proj.fromLonLat
var pos = fromLonLat([-0.19610,52.07769]);
var popup = new ol.Overlay({
element: document.getElementById('popup'),
});
map.addOverlay(popup);
var marker = new ol.Overlay({
position: pos,
positioning: 'center-center',
element: document.getElementById('marker'),
stopEvent: false,
});
map.addOverlay(marker);
var vienna = new ol.Overlay({
position: pos,
element: document.getElementById('vienna'),
});
map.addOverlay(vienna);
map.on('click', function (evt) {
var element = popup.getElement();
var coordinate = evt.coordinate;
var hdms = toStringHDMS(toLonLat(coordinate));
$(element).popover('dispose');
popup.setPosition(coordinate);
$(element).popover({
container: element,
placement: 'top',
animation: false,
html: true,
content: '<p>The location you clicked was:</p><code>' + hdms + '</code>',
});
$(element).popover('show');
});
Obviously, both CSS and JS files must be attached to the main index.html file if we want it working.

Using croppie to crop images without jquery

I am trying to add an image cropper to a website I am working on. The example I am basing it on is here:
https://jsfiddle.net/Twisty/afb76b7f/8/
The JS panel claims it is plain javascript, but it uses JQuery too ( if I am not wrong, not familiar with it at all ).
I am trying to remove it, to keep the website as easy to maintain as possible, but I am getting an error.
HTML:
<div id="page">
<div id="demo-basic">
</div>
</div>
CSS:
#page
{
background: #FFF;
padding: 20px;
margin: 20px;
}
#demo-basic {
width: 200px;
height: 300px;
}
JS
$(function() {
var basic = $('#demo-basic').croppie ( {
viewport: {
width: 150,
height: 150
}
});
basic.croppie('bind', {
url: 'https://i.imgur.com/xD9rzSt.jpg',
});
});
So, from what I understand, the first $( function () ) can be simplified by calling the onLoad method, and $('demo-croppie' ) can be simplified by using document.getElementById ( 'demo-croppie' )
So, the page imports the croppie javascript files
croppie.js
croppie.min.js
And tried to simplify the script like this ( onLoad event of page body )
var basic = document.getElementById('demo-basic').croppie({
viewport: {
width: 150,
height: 150
}
});
basic.croppie('bind', {
url: previewPictureSource,
});
But I get a reference error:
ReferenceError: croppie is not defined
I cannot find the croppie function anywhere, or understand how to associate it to an object.
Is there an obvious solution to this problem?
I am also happy to try any other library which crops image with a square resulting image, if anybody has more to suggest
You cannot call .croppie() on basic because you initialized it using VanillaJS. However, you can call .bind() on it directly:
basic.bind({
url: previewPictureSource
});
The documentation specifies that you can interact with a Croppie object in the following two ways:
// with jQuery
$('#item').croppie(method, args);
// with VanillaJS
croppieObject.method(args);
Check out the documentation here: https://foliotek.github.io/Croppie/

ERROR Error: Uncaught (in promise): invalid link: SosPopPage

I am coding a SOS page, when I click the button that I want it showing a popup page like this. Then user can choose phone number.
sos.html page
<button ion-button color="light" (click)="openSosPop()">Call</button>
sos.ts page
openSosPop() {
this.openModal('SosPopPage');
// let contactModal = this.modalCtrl.create(SosPopPage);
// contactModal.present();
}
openModal(pageName) {
this.modalCtrl.create(pageName, null, { cssClass: 'inset-modal' })
.present();
}
sos.css page
ion-modal.inset-modal {
// transparent black background overlay
background-color: rgba(0, 0, 0, .5) !important;
transition: opacity .25s ease-in-out;
padding: 20vh 10vw;
}
I am not using lazy loading
If you are not using lazy loading, it is not an IonicPage.
Adding IonicPage decorator allows you to use string names to handle pages.
This will automatically create a link to the MyPage component using the same name as the class, name: 'MyPage'. The page can now be navigated to by using this name.
Since you are not lazy loading, you cannot use a string to navigate or create modals and popups. You have to use the actual page/component.
Import the page.
import <path_to_page>;
this.openModal(SosPopPage);//create the modal.

MVC3 .net issue to show loading image when page loads

I'm pretty new to the MVC3 .net programming & recently in one of my internal projects I'm trying to implement a functinality where to display a loading image while the page is being loaded. (using jquery function calls.)
Issue:
If i browse the default URL as we define in the route mapping. The image is not getting loaded but i can see all the styles getting populated on the page. But if i navigate to same page using the hyper link defined on the webpage the image is getting loaded as expected. I'm not sure what I'm missing here. It is same case for jquery load & jquery-ajax request/response functions (default navigation is not working while the hyperlink navigation is working).
Links:
http://testserver/sitename --> this link uses default route where the image is not loading.
http://testserver/sitename/ --> this is a hyper link on the webpage defined as below where the image is loading as expected.
#Html.ActionLink("menu_item_1", "Index", "Home", null, new {#class = "menu"})
Both links are calling the same controller & redirecting to index view page.
Code:
<style type="text/css">
#loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('content/themes/base/images/preloader_8.gif') 50% 50% no-repeat rgb(249,249,249);
opacity: .8;
}
</style>
<script src="#Url.Content("~/Scripts/jquery.min.js")" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function () {
$("#loader").fadeOut("slow");
});
$(document).ready(function () {
$(document).ajaxStart(function () {
$("#loader").show();
}).ajaxStop(function () {
$("#loader").hide();
});
});
</script>
And I have following tag defined in the body of index/home page,
<div id="loader"></div>
route mapping in my config file: (I don't think there is an issue here, because i can see the transparency style but not the defined image(preloader_8.gif).)
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
"Default", // Route name
"{controller}/{action}/", // URL with parameters
new { controller = "Home", action = "Index"} // Parameter defaults
);
}

How to change Dojo TabContainer behaviour to simply open an external link instead of showing a ContentPane?

I am working with a TabContainer having several different ContentPane children. Each of them is equipped with a href param to fetch external AJAX content shown when a tab is being selected:
dojo.addOnLoad(function() {
var tc_nav = new dijit.layout.TabContainer({
style: 'width: 98%;',
doLayout: false
}, 'tc_nav');
var cp1 = new dijit.layout.ContentPane({
title: 'Test 1',
href: 'ajax?test1',
style: 'padding: 10px;',
selected: true
});
dojo.connect(cp1, 'onShow', function() {
cp1.refresh();
});
/*
* ...
*/
tc_nav.addChild(cp1);
/*
* ...
*/
tc_nav.startup();
});
Now I want to integrate a tab among the others which should be different in its behaviour: Instead of loading content into a ContentPane the tab should follow a simple link in the same window (like a Link), leaving the page containing the js/dojo app. I didn't find any satisfying solution yet, nor a dojo widget matching this requirement. What would be the best approach?
As an unpleasant workaround I created an overridden onShow event firing a window.location.href = '...';:
var cp2 = new dijit.layout.ContentPane({
title: 'Test 2',
style: 'padding: 10px;'
});
dojo.connect(cp2, 'onShow', function() {
window.location.href = 'http://www.google.com/';
});
An annoying disadvantage of this workaround is the fact the ContentPane is loaded first and afterwards the window.location.href is set, which leads to a quite peculiar lazy reload effect and consequently to a bad user experience. I would like to avoid this intermediate step.
ContentPanes are not actually iframes, so setting window.location.href would change the url of your entire page (dojo app) not just the ContentPane. Have you tried something like this:
cp2.set('href', 'http://www.google.com/')
A possible workaround to meet the above mentioned requirements is to override the onClick event of the ContentPane's controlButton:
/*
* ...
*/
var cp2 = new dijit.layout.ContentPane({
title: 'Test 2',
style: 'padding: 10px;'
});
/*
* ...
*/
tc_nav.addChild(cp2);
/*
* ...
*/
tc_nav.startup();
/*
* ...
*/
cp2.controlButton.onClick = function() {
window.location.href = 'http://www.google.com/';
};
Please note not to attach another function to the onClick event (e. g. by dojo.connect(cp2.controlButton, 'onClick', function() { /* ... */ });), but rather to override it, otherwise the ContentPane's content would be called up first.
Please note further the TabContainer's startup() function has to be invoked first to make the controlButton object accessible.

Categories