Как я могу добавить функцию Twitter Share, чтобы использовать строку, динамически генерируемую в div с помощью JavaScript? - PullRequest
Новая
       24

Как я могу добавить функцию Twitter Share, чтобы использовать строку, динамически генерируемую в div с помощью JavaScript?

1 голос
/ 07 июля 2019

Есть генератор комплиментов на основе JavaScript, который генерирует новые комплименты одним нажатием кнопки.Пользователи могут постоянно генерировать новые комплименты, пока не получат понравившийся.

Я хотел бы добавить возможность делиться любым сгенерированным комплиментом через Twitter, но не уверен, как добавить текст комплимента в ссылку для обмена в Twitter.В настоящее время текст комплимента отображается только внутри div с определенным идентификатором.

Сгенерированный комплимент выводится в DIV с идентификатором «комплимент» и работает так, как мне нужно.Тем не менее, я не знаю, как ТАКЖЕ вывести текст комплимента в ссылку на общий доступ в Твиттере - особенно если текст должен быть отформатирован иначе, чем он отображается в div).

IЯ настроил два jsfiddles с прогрессом, которого я добился до сих пор.

Вот моя первая попытка:

http://jsfiddle.net/LosHantos/g04u3qxa/

Вот JavaScript отта скрипка: 

var Complimenter = primish({
  a: 'lovely,beautiful,gorgeous,kind,wonderful,nice,perfect'.split(','),
  b: 'good-looking,super-duper,awesome'.split(','),
  c: 'pal,friend,person,human'.split(','),
  d: 'improver,supporter,juggler'.split(','),

  combos: ['a,b,c', 'a,b,d', 'b,c', 'b,d'],

  constructor: function(element) {
    element && (this.element = element);
    this.combos = this.combos.map(function(c) {
      return c.split(',')
    });
    this.compliment();
  },

  compliment: function(e) {
    e && e.preventDefault();
    var compliment = this.get();

    this.element && (this.element.innerHTML = compliment);

    return compliment;
  },

  get: function() {
    var c = this.combos,
      self = this;

    return c[Math.random() * c.length >> 0].map(function(k) {
      return self[k][Math.random() * self[k].length >> 0]
    }).join(' ');
  }
});

(function() {
  var complimenter = new Complimenter(document.getElementById('compliment'));
  document.querySelector('.heading').addEventListener('click', complimenter.compliment.bind(complimenter));
}());

Я дошел до того, что изменил ссылку на общий доступ Twitter с оригинальной скрипки, а затем добавил эту новую переменную в JS: 

var link = "https://twitter.com/intent/tweet?hashtags=compliment&related=complimenttime&text=" + complimenter;
document.getElementById('tweet').setAttribute("href", link); //assigns url above as href to twitter button
document.getElementById('compliment').innerHTML = "<span class='bold'>" + complimenter + "</span>" + "<br />";

Скрипка для этого измененияздесь http://jsfiddle.net/LosHantos/catx520n/ (Моя вторая попытка)

Но проблемы, с которыми я сталкиваюсь:

  • Отображает строку [object object] вместо комплимента
  • Если вы нажмете generate a new compliment, комплимент затем заменит [object object], но разделяющий Твиттер все еще использует [object object]

1 Ответ

0 голосов
/ 07 июля 2019

Это потому, что вы объединяете объект complimenter вместо его вывода - который вы получаете, вызывая complimenter.get().

Еще одна вещь, которую вы хотите подарить и поделиться тем же комплиментом, но каждый get() возвращает различные комплименты, поэтому вам нужно get один раз и использовать его для рендеринга HTML-кода div, а также передать его в ссылку href. 

const compliment = complimenter.get();
var link = "https://twitter.com/intent/tweet?hashtags=compliment&related=complimenttime&text=" + compliment;
document.getElementById('tweet').setAttribute("href", link); //assigns url above as href to twitter button
document.getElementById('compliment').innerHTML = "<span class='bold'>" + compliment + "</span>" + "<br />";

Рабочий код: 

// idea + dictionary by hnldesign from b3ta
var Complimenter = primish({
    a:  'lovely,beautiful,gorgeous,kind,wonderful,nice,perfect'.split(','),
    b: 'good-looking,super-duper,awesome'.split(','), 
    c: 'pal,friend,person,human'.split(','),
    d: 'improver,supporter,juggler'.split(','),
    
    combos: ['a,b,c', 'a,b,d', 'b,c', 'b,d'],

    constructor: function(element){
        element && (this.element = element);
        this.combos = this.combos.map(function(c){return c.split(',')});
        this.compliment();
    },

    compliment: function(e){
        e && e.preventDefault();
        var compliment= this.get();
        
        this.element && (this.element.innerHTML = compliment);
  			reGenerateLink(compliment);      
        return compliment;
    },
    
    get: function(){
        var c = this.combos, 
            self = this;
        
        return c[Math.random()*c.length>>0].map(function(k){
            return self[k][Math.random()*self[k].length>>0]
        }).join(' ');    
    }        
});

(function(){
    var complimenter = new Complimenter(document.getElementById('compliment'));
    document.querySelector('.heading').addEventListener('click', complimenter.compliment.bind(complimenter));
    
    const compliment = complimenter.get();
	reGenerateLink(compliment);
  //assigns url above as href to twitter button
	document.getElementById('compliment').innerHTML = "<span class='bold'>" + compliment + "</span>" + "<br />";
}());

function reGenerateLink(compliment) {
    var link = "https://twitter.com/intent/tweet?hashtags=compliment&related=complimenttime&text=" + compliment;
	document.getElementById('tweet').setAttribute("href", link); 
}
@import url(http://fonts.googleapis.com/css?family=Russo+One);
* {
  font-family: arial;
  font-weight: bold;
}

body,
html {
  height: 100%;
  margin: 0;
}

body {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHhtbG5zOnhsaW5rPSdodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rJyB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJz4KICA8ZGVmcz4KICAgIDxnIGlkPSdhJz4KICAgICAgPHBhdGggZD0nTTUgNmwtNiAtNiB2LTIgbDYgNicgZmlsbC1vcGFjaXR5PScwJyBzdHJva2U9JyMyYjNhNzUnIC8+CiAgICAgIDxwYXRoIGQ9J001IDVsNiAtNiB2LTIgbC02IDYnIGZpbGwtb3BhY2l0eT0nMCcgc3Ryb2tlPScjMzE0MTdkJyAvPgogICAgPC9nPgogICAgPHBhdHRlcm4gcGF0dGVyblVuaXRzPSd1c2VyU3BhY2VPblVzZScgeD0nMCcgeT0nMCcgaWQ9J3AnIHdpZHRoPScyMCcgaGVpZ2h0PScyMCcgdmlld0JveD0nMCAwIDEwIDEwJz4KICAgICAgPHVzZSB4bGluazpocmVmPScjYScvPiAgCiAgICAgIDx1c2UgeGxpbms6aHJlZj0nI2EnIHk9Jy00Jy8+CiAgICAgIDx1c2UgeGxpbms6aHJlZj0nI2EnIHk9JzQnLz4KICAgICAgPHVzZSB4bGluazpocmVmPScjYScgeT0nOCcvPgogICAgICA8dXNlIHhsaW5rOmhyZWY9JyNhJyB5PScxMicvPgogICAgPC9wYXR0ZXJuPgogICAgPHJhZGlhbEdyYWRpZW50IGdyYWRpZW50VW5pdHM9J3VzZXJTcGFjZU9uVXNlJyBpZD0nZycgY3g9JzUwJScgY3k9JzUwJScgZng9JzMwJScgZnk9JzMwJScgcj0nNjAlJz4KICAgICAgPHN0b3Agb2Zmc2V0PScwJScgc3RvcC1jb2xvcj0nI2FhYWFhYScgc3RvcC1vcGFjaXR5PScuNScgLz4KICAgICAgPHN0b3Agb2Zmc2V0PScxMDAlJyBzdG9wLWNvbG9yPScjMDAwMDAwJyBzdG9wLW9wYWNpdHk9Jy43JyAvPgogICAgICA8L3JhZGlhbEdyYWRpZW50PgogIDwvZGVmcz4KICA8cmVjdCB4PSctNSUnIHk9Jy01JScgd2lkdGg9JzExMCUnIGhlaWdodD0nMTEwJScgZmlsbD0nIzAwMDAyMicvPgogIDxyZWN0IHdpZHRoPScxMTAlJyBoZWlnaHQ9JzExMCUnIGZpbGw9J3VybCgjcCknLz4KICA8cmVjdCB4PSctNSUnIHk9Jy01JScgd2lkdGg9JzExMCUnIGhlaWdodD0nMTEwJScgZmlsbD0ndXJsKCNnKScvPgo8L3N2Zz4=');
}

.box {
  text-align: center;
  width: 600px;
  height: 276px;
  color: rgba(255, 255, 255, .7);
  text-shadow: 1px 1px 5px rgba(0, 0, 0, .7);
}

#compliment {
  font-family: "Russo One";
  text-transform: uppercase;
  font-size: 4em;
}

button.heading {
  outline: none;
  -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  padding: 5px;
  border: 1px solid #808080;
  background-color: #f5f5f5;
  background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
  font-size: 14px;
  font-family: "Russo One";
  text-transform: uppercase;
  margin: 15px auto 50px;
}

.ac {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.twitter-share a,
.twitter-share a:visited {
  color: #fff;
}
<script src="https://rawgit.com/DimitarChristoff/primish/master/primish-min.js"></script>
<div class="ac box">
  Random compliment generator. <br/>Generate compliments until you get one you like.<br/>
  <button class="heading">
        generate new compliment
    </button>

  <div id="compliment"></div>

  <div>
    <a target="_blank" role="button" class="btn btn-info my-btn" id="tweet"><i class="fa fa-twitter"></i> Tweet this</a>
  </div>
</div>

http://jsfiddle.net/moshfeu/n71L9skg/6/

...