I'm attempting to share a link on Facebook via url. I get the share to work, however instead of loading the redirectURI, I want to close the popup window. My code:
Script
function fbs_click(width, height) {
var leftPosition, topPosition, u, t, c;
//Allow for borders.
leftPosition = (window.screen.width / 2) - ((width / 2) + 10);
//Allow for title and status bars.
topPosition = (window.screen.height / 2) - ((height / 2) + 50);
var windowFeatures = "status=no,height=" + height + ",width=" + width + ",resizable=yes,left=" + leftPosition + ",top=" + topPosition + ",screenX=" + leftPosition + ",screenY=" + topPosition + ",toolbar=no,menubar=no,scrollbars=no,location=no,directories=no";
u = 'http://' + share_content.FACEBOOK.SHARE_LINK;
t = share_content.FACEBOOK.SHARE_TITLE;
c = share_content.FACEBOOK.SHARE_CONTENT;
window.open('https://www.facebook.com/dialog/feed?app_id=690028841132472&name='+encodeURIComponent(t)+'&display=popup&caption='+encodeURIComponent(c)+'&link='+encodeURIComponent(u)+'&redirect_uri='+u, 'sharer', windowFeatures);
return false;
}
HTML
I have found a similar question, that suggest to create a new page to close the popup.
Is there any way other than that?
Reference: Close facebook share popup after share is complete?
Related
When the users selects some text, I want to be able to show a tooltip, right below the selected text?
Any ideas how can I do that?
You could add a component that creates the tooltip, such as paper-tooltip, or create one, even with css only, depends on your usecase.
Here is a W3 example of a CSS tooltip
As far as I can tell, react-draft-wysiwyg does not support arbitrary plugins in the same way that draft-js-plugins does.
Searching on NPM, the only text selection related plugin I found is draft-js-delete-selection-plugin. You could use that as a starting point, as well as look at the documentation for SelectionState.
Without any idea of what you have so far it is hard to provide more info. I have created a JS fiddle that shows a simple tool tip with an event listener that gets the selected text by element id
https://jsfiddle.net/03Lu28qb/1/
$(document).ready(function () {
const textSelectionTooltipContainer = document.createElement("div");
textSelectionTooltipContainer.setAttribute(
"id",
"textSelectionTooltipContainer"
);
textSelectionTooltipContainer.innerHTML = `<p id="textSelected">Selected! </p>`;
const bodyElement = document.getElementsByTagName("BODY")[0];
bodyElement.addEventListener("mouseup", function (e) {
var textu = document.getSelection().toString();
if (!textu.length) {
textSelectionTooltipContainer.remove();
}
});
document
.getElementById("textToSelect")
.addEventListener("mouseup", function (e) {
let textu = document.getSelection().toString();
let matchu = /\r|\n/.exec(textu);
if (textu.length && !matchu) {
let range = document.getSelection().getRangeAt(0);
rect = range.getBoundingClientRect();
scrollPosition = $(window).scrollTop();
containerTop = scrollPosition + rect.top - 50 + "px";
containerLeft = rect.left + rect.width / 2 - 50 + "px";
textSelectionTooltipContainer.style.transform =
"translate3d(" + containerLeft + "," + containerTop + "," + "0px)";
bodyElement.appendChild(textSelectionTooltipContainer);
}
});
});
If you trying to do it in react try this.
If you trying to do it in js try this.
I'm trying to make a Hypixel Skyblock remake, and I'm trying to make a sword that teleports you forward. I don't need help with that, but I need help with this: I put some test code, just to see if it works, and it doesn't
#EventHandler(priority=EventPriority.HIGH)
public void onPlayerUse(PlayerInteractEvent event){
Player p = event.getPlayer();
World world = p.getWorld();
Location pLocation = p.getLocation();
Location tLocation = new Location(world, pLocation.getX(), pLocation.getY() + 2, pLocation.getZ());
if(p.getItemInHand() == ItemUtils.Aspect_Of_The_End()){
p.teleport(tLocation);
}
}
But when I right click, it doesn't teleport me 2 blocks upwards, and idk why.
Here is the code for the item itself:
public static ItemStack Aspect_Of_The_End()
{
ItemStack Aspect_Of_The_End = new ItemStack(Material.DIAMOND_SWORD);
ItemMeta itemMeta_aote = Aspect_Of_The_End.getItemMeta();
itemMeta_aote.setDisplayName(ChatColor.BLUE + "Aspect Of The End");
itemMeta_aote.addItemFlags(ItemFlag.HIDE_ENCHANTS);
itemMeta_aote.addItemFlags(ItemFlag.HIDE_ATTRIBUTES);
List<String> l = new ArrayList<String>();
l.add(Utils.chat("&7") + "Damage: " + Utils.chat("&c") + "+100");
l.add(Utils.chat("&7") + "Strength: " + Utils.chat("&c") + "+100");
l.add(" ");
l.add(Utils.chat("&6") + "Item Ability: Instant Transmission " + Utils.chat("&e") + "RIGHT CLICK");
l.add(Utils.chat("&7") + "Teleport " + Utils.chat("&a") + "8 blocks " + Utils.chat("&7") + "ahead of");
l.add(Utils.chat("&7") + "you and gain " + Utils.chat("&a") + "+50 " + Utils.chat("&f") + "✦ Speed");
l.add(Utils.chat("&7") + "for " + Utils.chat("&a") + "3 seconds.");
l.add(Utils.chat("&8") + "Mana Cost: " + Utils.chat("&3") + "50");
l.add(" ");
l.add(Utils.chat("&9") + "RARE SWORD");
itemMeta_aote.setLore(l);
Aspect_Of_The_End.setItemMeta(itemMeta_aote);
ShapedRecipe recipe_aote = new ShapedRecipe(Aspect_Of_The_End);
recipe_aote.shape(" e "," e "," d ");
recipe_aote.setIngredient('e', Material.EYE_OF_ENDER);
recipe_aote.setIngredient('d', Material.DIAMOND);
Bukkit.addRecipe(recipe_aote);
return Aspect_Of_The_End;
}
EDIT: Forgot to say, but there are no errors in console, eclipse, nor when the sword is right clicked.
You want to use .equals() instead of == to check if it is the aspect of the end.
Trying to improve my Coffeescript skills, so thought I'd covert this jcrop demo. However it's not working as expect. Specifically, the redraw function does not appear to be being called.
This works fine.
// Create a new Selection object extended from Selection
var CircleSel = function(){ };
// Set the custom selection's prototype object to be an instance
// of the built-in Selection object
CircleSel.prototype = new $.Jcrop.component.Selection();
// Then we can continue extending it
$.extend(CircleSel.prototype,{
zoomscale: 1,
attach: function(){
this.frame.css({
background: 'url(' + $('#target')[0].src.replace('750','750') + ')'
});
},
positionBg: function(b){
var midx = ( b.x + b.x2 ) / 2;
var midy = ( b.y + b.y2 ) / 2;
var ox = (-midx*this.zoomscale)+(b.w/2);
var oy = (-midy*this.zoomscale)+(b.h/2);
//this.frame.css({ backgroundPosition: ox+'px '+oy+'px' });
this.frame.css({ backgroundPosition: -(b.x+1)+'px '+(-b.y-1)+'px' });
},
redraw: function(b){
// Call original update() method first, with arguments
$.Jcrop.component.Selection.prototype.redraw.call(this,b);
this.positionBg(this.last);
return this;
},
prototype: $.Jcrop.component.Selection.prototype
});
But when I try to write this in Coffescript it fails
CircleSel.prototype = new ($.Jcrop.component.Selection)
$.extend CircleSel.prototype,
zoomscale: 1
attach: ->
#frame.css background: 'url(' + $('#target')[0].src.replace('750', '750') + ')'
return
positionBg: (b) ->
midx = (b.x + b.x2) / 2
midy = (b.y + b.y2) / 2
ox = -midx * #zoomscale + b.w / 2
oy = -midy * #zoomscale + b.h / 2
#frame.css backgroundPosition: -(b.x + 1) + 'px ' + -b.y - 1 + 'px'
return
# this redraw function is not being called, everything else appears to work fine
redraw: (b) ->
$.Jcrop.component.Selection::redraw.call this, b
#positionBg #last
this
prototype: $.Jcrop.component.Selection.prototype
What have I done wrong?
I'm working on my own project using angurarjs and ag-grid.
I have 2 problems:
1. is that i cannot refresh a status bar in case of selection in ag-rig. I can catch the event, and the function is running, but statusText scope element is reresshed only after navigation is happend to an other page. Very strange behaviour.
2. only the first 3 lines of grid is rendered, and only after scrolling the rest is shown.
Could anyone help me?
Code:
$scope[page + 'GridOptions'] = {
columnDefs: [],
rowData: null,
onGridReady: $scope.fillGrid,
rowSelection: 'single',
onSelectionChanged: function(){
$scope.selectRow()
}
}
$scope.selectRow = function(){
localStorageService.set(page + 'SelectedRow', $scope[page + 'GridOptions'].api.getSelectedRows()[0])
console.log($scope[page + 'GridOptions'].api.getSelectedRows()[0])
$scope.statusText = "selected item's id: " + $scope[page + 'GridOptions'].api.getSelectedRows()[0]._id
for(i=0; i<$scope[page + 'GridColumns'].length; i++){
localStorageService.set($scope[page + 'GridColumns'][i].field, $scope[page + 'SelectedRow'][$scope[page + 'GridColumns'][i].field])
$scope[$scope[page + 'GridColumns'][i].field] = localStorageService.get($scope[page + 'GridColumns'][i].field)
}
console.log(page)
localStorageService.set(page + 'DisableButton', false)
$scope[page + 'DisableButton'] = eval(localStorageService.get(page + 'DisableButton'))
$scope[page + 'GridOptions'].api.refreshView()
}
I have two functions that load markers into my map. (Both functions are called on success of an ajax call)
First Function is like this:
function loadEpsMarkers(data) {
for (var i = 0; i < data.length; i++) {
var plateNo = data[i].PLATE_NUMBER;
var permitNo = data[i].PERMITINFOID;
var inventoryId = data[i].INVENTORY_ID;
var icon = epsiconR;
if (data[i].INVENTORY_STATUS === 'Complete') {
icon = epsiconC;
}
var popup = '<h5>EPS</h5>' + 'Plate:' + plateNo + '<br/>' +
' Permit: <a class=\'link\' data-inventoryId="' + inventoryId + '" href=' + url + '>' + permitNo + '</a>' +
'<p style=\"color:blue\">' + '' + '<a class=\'link\' href=' + url + '>' +
'Import' + '</a>' + '<br/>' + '<a class=\'link\' href=' + url + '>' +
'Duplicate' + '</a>' + '<br/>' + '<a class=\'link\' href=' + url + '>' +
'Removed' + '</a>' + '<br/>' + '</p>';
var m = L.marker([data[i].REF_LATITUDE, data[i].REF_LONGITUDE], { icon: icon, draggable: 'true' })
.bindPopup(popup);
markerClusters.addLayer(m);
}
map.addLayer(markerClusters);
map.invalidateSize(false);
}
The second Function is same except the data is different.
This works fine and I get the clustered markers as expected.
Now I have a button, when I click this button, it should hide the markers from the first call.
The easy way out is to remove layers and then redo just the second call. But that seems like an inefficient way of doing this.
This gets more complex if I have 4 such data calls and I want to toggle markers from each of those calls.
I have tried something like this as well:
$('#dvEpsOnlyMarkers').click(function () {
markerClusters.removeLayer(m);
});
But that isn't working. Any ideas on how I can make this work ?
Thanks in advance
A very simple way of achieving what you describe is to store references to markers of each group in arrays, and manipulate those arrays to add / remove the layers into MCG:
var markersCall1 = [],
markersCall2 = [],
markersCall3 = [],
markersCall4 = [];
function loadEpsMarkersX(data) { // Replace X by 1...4
for (var i = 0; i < data.length; i++) {
// Convert data...
var m = L.marker(/* latLng, options, popup... */);
markersCallX.push(m); // Replace X by 1...4
}
// Actually add to MarkerClusterGroup.
// Replace X by 1...4
markerClusters.addLayers(markersCallX); // note the addLayers with "s".
}
$('#dvEpsOnlyMarkersX').click(function (event) { // Replace X by 1...4
// Assuming it is a checkbox, you can use it to toggle.
if (this.checked) {
// Replace X by 1...4
markerClusters.addLayers(markersCallX); // note the "s".
} else {
// Replace X by 1...4
markerClusters.removeLayers(markersCallX); // note the "s".
}
});
When you have batches of markers to add / remove like in your case, you can conveniently use the MarkerClusterGroup methods addLayers and removeLayers (with a trailing s) with an array of the markers to process. These methods are much more efficient than adding / removing markers one by one.