Pinterest javascript SDK pinOne метод для всплывающего диалогового окна - PullRequest
Новая
       23

Pinterest javascript SDK pinOne метод для всплывающего диалогового окна

0 голосов
/ 24 сентября 2018

Добрый день

КОНТЕКСТ

Мы используем Pintrest JavaScript SDK, чтобы открыть диалоговое окно для закрепления чего-либо на Pinterest.

ТРЕБОВАНИЕ

Нам бы хотелось, чтобы всплывающее диалоговое окно отображалось по центру экрана.

ПРОБЛЕМА

В настоящее время он работает, но диалоговое окно отображается не в том месте.

CODE 

<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 () отображать диалоговое окно, центрированное наэкран?

С уважением,

Martin Ouimet

1 Ответ

0 голосов
/ 24 сентября 2018

Похоже, вы ссылаетесь на это из API виджетов здесь .

Чтобы ответить на ваш вопрос, я не думаю, что есть способ сообщить , где , чтобы открыть диалог.Это было бы сложно в целом, потому что в зависимости от размера экрана или даже разрешения трудно точно указать, где определено «центрирование».

Просмотр исходного кода 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.Не похоже, что существует какой-либо способ общения «по центру».

При этом я думаю, что это просто ограничение их Widget API.если вы жестко программируете конкретную ссылку для интереса, вам, возможно, удастся просто создать свою собственную и передать windowFeatures.Я попробовал это ниже, и это "своего рода" работает (вероятно, необходимо настроить логику определения позиции. 

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>

StackOverflow отключает всплывающие окна, так что вот jsFiddle

...