Pinterest javascript SDK pinOne 弹出对话框的方法
Pinterest javascript SDK pinOne method to pop up dialog
下午好
上下文
我们正在使用 Pintrest JavaScript SDK 弹出一个对话框以将某些内容固定在 Pinterest 上。
要求
我们希望弹出对话框显示在屏幕中央。
问题
目前可以使用,但对话框出现在错误的位置。
代码
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
$.getScript('https://assets.pinterest.com/js/pinit.js', function () {
var pinObj = {
url: url,
media: ogImg.attr("content")
};
pinObj.description = 'description';
PinUtils.pinOne(pinObj);
问题
有没有办法让 pinOne() 方法在屏幕居中弹出对话框?
此致,
马丁·欧梅特
看来您是从 Widgets API here 中引用的。
为了回答您的问题,我不认为有一种沟通方式在哪里打开对话框。这通常很难,因为根据屏幕尺寸甚至分辨率,很难确定 "centered" 的定义位置。
查看pinOne
的源代码
pinOne: function(a) {
if (a.href) {
var b = e.f.parse(a.href, {
url: !0,
media: !0,
description: !0
});
b.url && b.url.match(/^http/i) && b.media && b.media.match(/^http/i) ? (b.description || (e.f.log("&type=config_warning&warning_msg=no_description&href=" + encodeURIComponent(e.d.URL)), b.description = e.d.title), e.w.open(a.href, "pin" + (new Date).getTime(), e.a.pop.base.replace("%dim%", e.a.pop.small))) : (e.f.log("&type=config_error&error_msg=invalid_url&href=" + encodeURIComponent(e.d.URL)), e.f.util.pinAny())
} else a.media ? (a.url || (e.f.log("&type=config_warning&warning_msg=no_url&href=" + encodeURIComponent(e.d.URL)), a.url = e.d.URL), a.description || (e.f.log("&type=config_warning&warning_msg=no_description&href=" + encodeURIComponent(e.d.URL)), a.description = e.d.title), e.f.log("&type=button_pinit_custom"), a.href = e.v.config.pinterest + "/pin/create/button/?guid=" + e.v.guid + "&url=" + encodeURIComponent(a.url) + "&media=" + encodeURIComponent(a.media) + "&description=" + encodeURIComponent(a.description), e.w.open(a.href, "pin" + (new Date).getTime(), e.a.pop.base.replace("%dim%", e.a.pop.small))) : (e.f.log("&type=config_error&error_msg=no_media&href=" + encodeURIComponent(e.d.URL)), e.f.util.pinAny());
a.v && a.v.preventDefault ? a.v.preventDefault() : e.w.event.returnValue = !1
},
为您提供的唯一真正的自定义选项包括 url
、media
和 description
。似乎真的没有任何沟通方式 "centered".
话虽如此,我认为这只是他们的 Widget API 的一个限制。如果您正在对特定的 pinterest link 进行硬编码,您可能只需创建自己的并传入 windowFeatures
即可。我在下面试过了,它 "kinda" 有效(可能需要调整确定位置的逻辑。
document.getElementById('pinterest-link').addEventListener('click', function(e) {
var URL = e.target.getAttribute('data-pin-myownlink');
// assuming you want a 450x450 popup
var w = 450;
var h = 450;
// plagiarized from http://www.nigraphic.com/blog/java-script/how-open-new-window-popup-center-screen
var dualScreenLeft = window.screenLeft != undefined ? window.screenLeft : screen.availLeft;
var dualScreenTop = window.screenTop != undefined ? window.screenTop : screen.availTop;
width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;
var left = ((width / 2) - (w / 2)) + dualScreenLeft;
var top = ((height / 2) - (h / 2)) + dualScreenTop;
window.open(URL, "Pinterest Link", 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+width+', height='+height+', top='+top+', left='+left);
});
<a id="pinterest-link" href="#" data-pin-myownlink="https://www.pinterest.com/pin/create/button/?guid=Nsp1JckZPYuE-6&url=https%3A%2F%2Fwww.flickr.com%2Fphotos%2Fkentbrew%2F6851755809%2F&media=https%3A%2F%2Ffarm8.staticflickr.com%2F7027%2F6851755809_df5b2051c9_z.jpg&description=Next%20stop%3A%20Pinterest">Click here</a>
Whosebug 禁用弹出窗口,所以这里是 jsFiddle
下午好
上下文
我们正在使用 Pintrest JavaScript SDK 弹出一个对话框以将某些内容固定在 Pinterest 上。
要求
我们希望弹出对话框显示在屏幕中央。
问题
目前可以使用,但对话框出现在错误的位置。
代码
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
$.getScript('https://assets.pinterest.com/js/pinit.js', function () {
var pinObj = {
url: url,
media: ogImg.attr("content")
};
pinObj.description = 'description';
PinUtils.pinOne(pinObj);
问题
有没有办法让 pinOne() 方法在屏幕居中弹出对话框?
此致,
马丁·欧梅特
看来您是从 Widgets API here 中引用的。
为了回答您的问题,我不认为有一种沟通方式在哪里打开对话框。这通常很难,因为根据屏幕尺寸甚至分辨率,很难确定 "centered" 的定义位置。
查看pinOne
pinOne: function(a) {
if (a.href) {
var b = e.f.parse(a.href, {
url: !0,
media: !0,
description: !0
});
b.url && b.url.match(/^http/i) && b.media && b.media.match(/^http/i) ? (b.description || (e.f.log("&type=config_warning&warning_msg=no_description&href=" + encodeURIComponent(e.d.URL)), b.description = e.d.title), e.w.open(a.href, "pin" + (new Date).getTime(), e.a.pop.base.replace("%dim%", e.a.pop.small))) : (e.f.log("&type=config_error&error_msg=invalid_url&href=" + encodeURIComponent(e.d.URL)), e.f.util.pinAny())
} else a.media ? (a.url || (e.f.log("&type=config_warning&warning_msg=no_url&href=" + encodeURIComponent(e.d.URL)), a.url = e.d.URL), a.description || (e.f.log("&type=config_warning&warning_msg=no_description&href=" + encodeURIComponent(e.d.URL)), a.description = e.d.title), e.f.log("&type=button_pinit_custom"), a.href = e.v.config.pinterest + "/pin/create/button/?guid=" + e.v.guid + "&url=" + encodeURIComponent(a.url) + "&media=" + encodeURIComponent(a.media) + "&description=" + encodeURIComponent(a.description), e.w.open(a.href, "pin" + (new Date).getTime(), e.a.pop.base.replace("%dim%", e.a.pop.small))) : (e.f.log("&type=config_error&error_msg=no_media&href=" + encodeURIComponent(e.d.URL)), e.f.util.pinAny());
a.v && a.v.preventDefault ? a.v.preventDefault() : e.w.event.returnValue = !1
},
为您提供的唯一真正的自定义选项包括 url
、media
和 description
。似乎真的没有任何沟通方式 "centered".
话虽如此,我认为这只是他们的 Widget API 的一个限制。如果您正在对特定的 pinterest link 进行硬编码,您可能只需创建自己的并传入 windowFeatures
即可。我在下面试过了,它 "kinda" 有效(可能需要调整确定位置的逻辑。
document.getElementById('pinterest-link').addEventListener('click', function(e) {
var URL = e.target.getAttribute('data-pin-myownlink');
// assuming you want a 450x450 popup
var w = 450;
var h = 450;
// plagiarized from http://www.nigraphic.com/blog/java-script/how-open-new-window-popup-center-screen
var dualScreenLeft = window.screenLeft != undefined ? window.screenLeft : screen.availLeft;
var dualScreenTop = window.screenTop != undefined ? window.screenTop : screen.availTop;
width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;
var left = ((width / 2) - (w / 2)) + dualScreenLeft;
var top = ((height / 2) - (h / 2)) + dualScreenTop;
window.open(URL, "Pinterest Link", 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+width+', height='+height+', top='+top+', left='+left);
});
<a id="pinterest-link" href="#" data-pin-myownlink="https://www.pinterest.com/pin/create/button/?guid=Nsp1JckZPYuE-6&url=https%3A%2F%2Fwww.flickr.com%2Fphotos%2Fkentbrew%2F6851755809%2F&media=https%3A%2F%2Ffarm8.staticflickr.com%2F7027%2F6851755809_df5b2051c9_z.jpg&description=Next%20stop%3A%20Pinterest">Click here</a>
Whosebug 禁用弹出窗口,所以这里是 jsFiddle