Search Wikipedia based on the selected text.

ScriptLab Search Wiki.POWERPOINT.yaml

name: ScriptLab Search Wiki
description: Search Wikipedia based on the selected text.
host: POWERPOINT
api_set: {}
script:
  content: |
    $("#insert").click(run);

    Office.onReady((info) => {
      console.log(info.host);
    });

    function getSelectedText(result) {
      $(".ms-ListItem").empty();
      if (result.status === "succeeded") {
        searchWiki(result.value);
        //console.log(result)
      } else {
        console.log("failed");
      }
    }

    function run() {
      Office.context.document.getSelectedDataAsync(Office.CoercionType.Text, {}, getSelectedText);
    }

    function loadData(queryUrl) {
      return $.ajax({
        type: "GET",
        url: queryUrl,
        dataType: "jsonp"
      });
    }

    function getWikiLink(pageid, itemHTML) {
      var pageinfo = build_wiki_pageinfo(pageid);
      loadData(pageinfo)
        .then(function(data) {
          var itemUrl = data.query.pages[pageid].fullurl;
          var images = data.query.pages[pageid].images;
          var title = $(itemHTML)
            .find(".listItem-link")
            .html();
          $(itemHTML)
            .find(".listItem-link")
            .html('<a href="' + itemUrl + '">' + title + "</a>");
          if (typeof images !== "undefined") {
            $(itemHTML)
              .find(".ms-ListItem-image")
              .attr("data-image", images[0].title);
          }
        })
        .then(function(data) {
          getWikiImages(pageid, itemHTML);
        });
    }

    function getWikiImages(pageid, itemHTML) {
      var pageInfo = build_wiki_image_search(pageid);
      loadData(pageInfo)
        .then(function(data) {
          if (typeof data.query.pages[pageid].original !== "undefined") {
            var img = data.query.pages[pageid].original.source;
            $(itemHTML)
              .find(".ms-ListItem-image")
              .append('<img width="70px" src="' + img + '" />');
            return true;
          } else {
            var img = $(itemHTML)
              .find(".ms-ListItem-image")
              .data("image");
            pageInfo = build_wiki_file_search(img);
            return loadData(pageInfo);
          }
        })
        .then(function(data) {
          if (typeof data.query !== "undefined") {
            var key = Object.keys(data.query.pages)[0];
            if (data.query.pages[key].title !== "Undefined") {
              var img = data.query.pages[key].thumbnail.source;
              $(itemHTML)
                .find(".ms-ListItem-image")
                .append('<img width="70px" src="' + img + '" />');
            }
          }
        });
    }

    function searchWiki(pattern) {
      var url = build_wiki_search_url(pattern);

      loadData(url)
        .then(function(data) {
          $.each(data.query.search, function(i, val) {
            var date = moment(val.timestamp).format("YYYY-MM-DD hh:mm A");
            var listItem = build_list_item(val.title, val.pageid, val.snippet, date);
            $(".ms-List").append(listItem);
          });
          return data.query;
        })
        .then(function(data) {
          $(".ms-ListItem").each(function(i, item) {
            if ($(this).find(".listItem-link a").length === 0) {
              getWikiLink($(this).data("pageid"), $(this));
            }
          });
        });
    }

    function build_wiki_search_url(pattern) {
      var base_url = "https://en.wikipedia.org/w/api.php";
      var request_url = "?action=query&format=json&prop=pageimages&list=search&srsearch=";
      var url = base_url + request_url + pattern;
      return url;
    }

    function build_wiki_image_search(pattern) {
      var base_url = "https://en.wikipedia.org/w/api.php";
      var request_url = "?action=query&format=json&prop=pageimages&piprop=original&pilicense=any&pageids=";
      var url = base_url + request_url + pattern;
      return url;
    }

    function build_wiki_file_search(pattern) {
      var base_url = "";
      var request_url =
        "https://en.wikipedia.org/w/api.php?action=query&format=json&prop=pageimages|pageterms&pilicense=any&titles=";
      return request_url + pattern;
    }

    function build_wiki_pageinfo(pattern) {
      var request_url = "https://en.wikipedia.org/w/api.php?action=query&prop=info|images&format=json&inprop=url&pageids=";
      var url = request_url + pattern;
      return url;
    }
    function list_item(title, summary) {
      return '<li class="ms-ListItem ms-ListItem--image" tabindex="0">test</li>';
    }

    function build_list_item(title, pageid, summary, ts) {
      return (
        '<li class="ms-ListItem ms-ListItem--image" tabindex="0" data-pageid="' +
        pageid +
        '">' +
        '<div class="ms-ListItem-image" ></div>' +
        '<span class="ms-ListItem-secondaryText listItem-link">' +
        title +
        "</span>" +
        "<span>" +
        summary +
        "</span>" +
        '<div class="ms-ListItem-selectionTarget" > </div>' +
        '<div class="ms-ListItem-actions" >' +
        '<div class="ms-ListItem-action" >' +
        '<i class="ms-Icon ms-Icon--Flag" > </i>' +
        "</div>" +
        '<div class="ms-ListItem-action" >' +
        '<i class="ms-Icon ms-Icon--Pinned" > </i>' +
        "</div>" +
        "</div>" +
        "</li>"
      );
    }
  language: typescript
template:
  content: "<body>\n\t<header class=\"ms-welcome__header ms-bgColor-neutralLighter\" style='text-align: center'>\n\t\t<h1 class=\"ms-font-su\">Demo Script Lab</h1>\n\t</header>\n\t<main id=\"app-body\" class=\"ms-welcome__main\">\n\t\t<span class=\"ms-font-xl\">Select a text and click 'Run' to search from Wikipedia! </span>\n\t</main>\n\t<section id=\"sideload-msg\" class=\"ms-welcome__main\" style='margin-top: 10px;'>\n\t\t<button id=\"insert\" class=\"ms-Button\">\n\t    <span class=\"ms-Button-label\">Run</span>\n\t</button>\n\t</section>\n\n\n\t<ul class=\"ms-List\">\n\n\t</ul>\n</body>"
  language: html
style:
  content: |-
    section.samples {
        margin-top: 20px;
    }

    section.samples .ms-Button, section.setup .ms-Button {
        display: block;
        margin-bottom: 5px;
        margin-left: 20px;
        min-width: 80px;
    }
  language: css
libraries: >
  https://appsforoffice.microsoft.com/lib/1/hosted/office.js

  @types/office-js


  office-ui-fabric-js@1.4.0/dist/css/fabric.min.css

  office-ui-fabric-js@1.4.0/dist/css/fabric.components.min.css

  https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/js/fabric.min.js


  core-js@2.4.1/client/core.min.js

  @types/core-js


  jquery@3.1.1

  @types/jquery@3.3.1


  https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.js