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: |
    declare var moment: any;
    $("#search").click(run);

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

    function getSelectedText(result) {
      $("#result").empty();
      $("#result").append('<ul class="ms-List"></ul>');
      if (result.status === "succeeded") {
        searchWiki(result.value);
      } else {
        console.log("failed");
      }
    }

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

      fetch(url)
        .then((response) => {
          return response.json();
        })
        .then((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 getWikiLink(pageid, itemHTML) {
      var pageinfo = build_wiki_pageinfo(pageid);
      fetch(pageinfo)
        .then((response) => {
          return response.json();
        })
        .then((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((data) => {
          getWikiImages(pageid, itemHTML);
        });
    }

    function getWikiImages(pageid, itemHTML) {
      var pageInfo = build_wiki_image_search(pageid);
      fetch(pageInfo)
        .then((response) => {
          return response.json();
        })
        .then(async (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);
            let pageInfoResult = await fetch(pageInfo);
            return pageInfoResult.json();
          }
        })
        .then((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 + '" />');
            }
          }
        });
    }

    /* Wikipedia API query */
    function wiki_base(pattern) {
      const base_url = "https://en.wikipedia.org/w/api.php";
      const base_query = "?origin=*&action=query&format=json&prop=";
      return base_url + base_query + pattern;
    }

    function build_wiki_search_url(pattern) {
      let qry = "pageimages&list=search&srsearch=";
      return wiki_base(qry + pattern);
    }

    function build_wiki_image_search(pattern) {
      let qry = "pageimages&piprop=original&pilicense=any&pageids=";
      return wiki_base(qry + pattern);
    }

    function build_wiki_file_search(pattern) {
      let qry = "pageimages|pageterms&pilicense=any&titles=";
      return wiki_base(qry + pattern);
    }

    function build_wiki_pageinfo(pattern) {
      let qry = "info|images&inprop=url&pageids=";
      return wiki_base(qry + pattern);
    }

    /* Render */
    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: "<header class=\"ms-welcome__header ms-bgColor-neutralLighter\" style='text-align: center'>\n\t<h1 class=\"ms-font-su\">Search Wikipedia</h1>\n</header>\n\n<section class=\"ms-font-m\">\n\t<p>This sample shows how to query external API using selected text in the presentation.</p>\n\t<p>The result then will be displayed in the task pane.</p>\n</section>\n\n<section class=\"setup ms-font-m\">\n\t<h3>Try it out</h3>\n\t<p>The search result will be provided by Wikipedia API. Select on any word/sentence in the presentation and, click\n\t\t\"Search\"</p>\n\t<ol>\n\t\t<li>In the presentation, select any word/sentence</li>\n\t\t<li>Click Search button: <br /><br />\n\t\t\t<button id=\"search\" class=\"ms-Button\">\n\t       <span class=\"ms-Button-label\">Run</span>\n\t    </button>\n\t\t</li>\n\t</ol>\n</section>\n\n<section class=\"sample ms-font-m\">\n\t<h3>Result</h3>\n\t<div id=\"result\">\n\t</div>\n</section>"
  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


  [email protected]/dist/css/fabric.min.css

  [email protected]/dist/css/fabric.components.min.css

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


  [email protected]/client/core.min.js

  @types/core-js


  [email protected]

  @types/[email protected]


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