Почему rss feed xml / json перевод строки прерывается вместо непрерывной прокрутки - PullRequest
Новая
       14

Почему rss feed xml / json перевод строки прерывается вместо непрерывной прокрутки

0 голосов
/ 04 марта 2020

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

Я проверил html и он показывает неупорядоченный список с элементами списка и без разрывов строк.

Я также проверил консоль и нет ошибок.

Вот html: 

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>jquery.rss example</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="jquery.rss.min.js"></script>
    <script>
      jQuery(function($) {
        $("#rss-feeds").rss("https://www.cbsnews.com/latest/rss/main", {
          limit: 100,
          entryTemplate: "<li>{title}</li>"
        });
      });
    </script>
  </head>

  <body>
    <div class="marquee">
      <div id="rss-feeds"></div>
    </div>
  </body>
</html>

css для создания тикера: 

  color: #fff;
  font-family: "Roboto";
}

ul {
  list-style: none;
  padding-left: 0;
}

li {
  display: inline-block;
  font-weight: 700;
  padding-right: 50px;
}

.marquee {
  height: 1000px;
  overflow: hidden;
  position: relative;
  background: #e1261c;
  color: #fff;
}

.marquee div {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  line-height: 50px;
  text-align: left;
  -moz-transform: translateX(100%);
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  -moz-animation: scroll-left 10s linear infinite;
  -webkit-animation: scroll-left 10s linear infinite;
  animation: scroll-left 50s linear infinite;
}

@-moz-keyframes scroll-left {
  0% {
    -moz-transform: translateX(100%);
  }
  100% {
    -moz-transform: translateX(-100%);
  }
}

@-webkit-keyframes scroll-left {
  0% {
    -webkit-transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(-100%);
  }
}

@keyframes scroll-left {
  0% {
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  100% {
    -moz-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}

и, наконец, javascript / jquery для получения источника новостей: 

(function(d) {
  var e = function(a, b, c, f) {
    this.target = a;
    this.url = b;
    this.html = [];
    this.effectQueue = [];
    this.options = d.extend(
      {
        ssl: !1,
        host: "www.feedrapp.info",
        limit: null,
        key: null,
        layoutTemplate: "<ul>{entries}</ul>",
        entryTemplate: "<li>{title}</li>",
        tokens: {},
        outputMode: "json",
        dateFormat: "dddd MMM Do",
        effect: "show",
        offsetStart: !1,
        offsetEnd: !1,
        error: function() {
          console.log("jQuery RSS: url doesn't link to RSS-Feed");
        },
        onData: function() {},
        success: function() {}
      },
      c || {}
    );
    this.options.ssl &&
      "www.feedrapp.info" === this.options.host &&
      (this.options.host = "feedrapp.herokuapp.com");
    this.callback = f || this.options.success;
  };
  e.htmlTags = "doctype,html,head,title,base,link,meta,style,script,noscript,body,article,nav,aside,section,header,footer,h1-h6,hgroup,address,p,hr,pre,blockquote,ol,ul,li,dl,dt,dd,figure,figcaption,div,table,caption,thead,tbody,tfoot,tr,th,td,col,colgroup,form,fieldset,legend,label,input,button,select,datalist,optgroup,option,textarea,keygen,output,progress,meter,details,summary,command,menu,del,ins,img,iframe,embed,object,param,video,audio,source,canvas,track,map,area,a,em,strong,i,b,u,s,small,abbr,q,cite,dfn,sub,sup,time,code,kbd,samp,var,mark,bdi,bdo,ruby,rt,rp,span,br,wbr".split(
    ","
  );
  e.prototype.load = function(a) {
    var b =
      "http" +
      (this.options.ssl ? "s" : "") +
      "://" +
      this.options.host +
      "?callback=?&q=" +
      encodeURIComponent(this.url);
    this.options.offsetStart &&
      this.options.offsetEnd &&
      (this.options.limit = this.options.offsetEnd);
    null !== this.options.limit && (b += "&num=" + this.options.limit);
    null !== this.options.key && (b += "&key=" + this.options.key);
    d.getJSON(b, a);
  };
  e.prototype.render = function() {
    var a = this;
    this.load(function(b) {
      try {
        (a.feed = b.responseData.feed),
          (a.entries = b.responseData.feed.entries);
      } catch (c) {
        return (a.entries = []), (a.feed = null), a.options.error.call(a);
      }
      b = a.generateHTMLForEntries();
      a.target.append(b.layout);
      0 !== b.entries.length &&
        (d.isFunction(a.options.onData) && a.options.onData.call(a),
        a.appendEntriesAndApplyEffects(d("entries", b.layout), b.entries));
      0 < a.effectQueue.length
        ? a.executeEffectQueue(a.callback)
        : d.isFunction(a.callback) && a.callback.call(a);
    });
  };
  e.prototype.appendEntriesAndApplyEffects = function(a, b) {
    var c = this;
    d.each(b, function(b, e) {
      var d = c.wrapContent(e);
      "show" === c.options.effect
        ? a.before(d)
        : (d.css({ display: "none" }),
          a.before(d),
          c.applyEffect(d, c.options.effect));
    });
    a.remove();
  };
  e.prototype.generateHTMLForEntries = function() {
    var a = this,
      b = { entries: [], layout: null };
    d(this.entries).each(function() {
      var c = a.options.offsetStart,
        f = a.options.offsetEnd;
      c && f
        ? index >= c &&
          index <= f &&
          a.isRelevant(this, b.entries) &&
          ((c = a.evaluateStringForEntry(a.options.entryTemplate, this)),
          b.entries.push(c))
        : a.isRelevant(this, b.entries) &&
          ((c = a.evaluateStringForEntry(a.options.entryTemplate, this)),
          b.entries.push(c));
    });
    b.layout = this.options.entryTemplate
      ? this.wrapContent(
          this.options.layoutTemplate.replace(
            "{entries}",
            "<entries></entries>"
          )
        )
      : this.wrapContent("<div><entries></entries></div>");
    return b;
  };
  e.prototype.wrapContent = function(a) {
    return 0 !== d.trim(a).indexOf("<") ? d("<div>" + a + "</div>") : d(a);
  };
  e.prototype.applyEffect = function(a, b, c) {
    switch (b) {
      case "slide":
        a.slideDown("slow", c);
        break;
      case "slideFast":
        a.slideDown(c);
        break;
      case "slideSynced":
        this.effectQueue.push({ element: a, effect: "slide" });
        break;
      case "slideFastSynced":
        this.effectQueue.push({ element: a, effect: "slideFast" });
    }
  };
  e.prototype.executeEffectQueue = function(a) {
    var b = this;
    this.effectQueue.reverse();
    var c = function() {
      var f = b.effectQueue.pop();
      f ? b.applyEffect(f.element, f.effect, c) : a && a();
    };
    c();
  };
  e.prototype.evaluateStringForEntry = function(a, b) {
    var c = a,
      f = this;
    d(a.match(/(\{.*?\})/g)).each(function() {
      var a = this.toString();
      c = c.replace(a, f.getValueForToken(a, b));
    });
    return c;
  };
  e.prototype.isRelevant = function(a, b) {
    var c = this.getTokenMap(a);
    return this.options.filter
      ? this.options.filterLimit && this.options.filterLimit === b.length
        ? !1
        : this.options.filter(a, c)
      : !0;
  };
  e.prototype.getTokenMap = function(a) {
    if (!this.feedTokens) {
      var b = JSON.parse(JSON.stringify(this.feed));
      delete b.entries;
      this.feedTokens = b;
    }
    this.formattedDate =
      "undefined" !== typeof moment
        ? moment(new Date(a.publishedDate)).format(this.options.dateFormat)
        : this.options.dateFormatFunction
        ? this.options.dateFormatFunction(a.publishedDate)
        : a.publishedDate;
    return d.extend(
      {
        feed: this.feedTokens,
        url: a.link,
        author: a.author,
        date: this.formattedDate,
        title: a.title,
        body: a.content,
        shortBody: a.contentSnippet,
        bodyPlain: (function(a) {
          for (
            var a = a.content
                .replace(/<script[\\r\\\s\S]*<\/script>/gim, "")
                .replace(/<\/?[^>]+>/gi, ""),
              b = 0;
            b < e.htmlTags.length;
            b++
          )
            a = a.replace(RegExp("<" + e.htmlTags[b], "gi"), "");
          return a;
        })(a),
        shortBodyPlain: a.contentSnippet.replace(/<\/?[^>]+>/gi, ""),
        index: d.inArray(a, this.entries),
        totalEntries: this.entries.length,
        teaserImage: (function(a) {
          try {
            return a.content.match(/(<img.*?>)/gi)[0];
          } catch (b) {
            return "";
          }
        })(a),
        teaserImageUrl: (function(a) {
          try {
            return a.content.match(/(<img.*?>)/gi)[0].match(/src="(.*?)"/)[1];
          } catch (b) {
            return "";
          }
        })(a)
      },
      this.options.tokens
    );
  };
  e.prototype.getValueForToken = function(a, b) {
    var c = this.getTokenMap(b),
      d = a.replace(/[\{\}]/g, ""),
      d = c[d];
    if ("undefined" !== typeof d) return "function" === typeof d ? d(b, c) : d;
    throw Error("Unknown token: " + a + ", url:" + this.url);
  };
  d.fn.rss = function(a, b, c) {
    new e(this, a, b, c).render();
    return this;
  };
})(jQuery);

Я использовал это Github-репозиторий для скрипта:

https://github.com/sdepold/jquery-rss

Как заставить тикер прокручивать заголовки новостей, не добавляя разрыв строки, как традиционный тикер новостей? Спасибо!

...