Google Search Pane - Geteilt mit Script Lab.

Google Search Pane.yaml

name: Google Search Pane
description: Google Search Pane
author: maninweb
host: EXCEL
api_set: {}
script:
    content: |+
        //
        //
        //

        //  Initialize...

        $(document).ready(function () {

            $("#run").click(onClickRun);
            $("#selection").change(onChangeOptionSelection);

                (function () {
                    var cx = '007558919630150775935:8fvd9kiqgku';
                    var gcse = document.createElement('script');
                    gcse.type = 'text/javascript';
                    gcse.async = true;
                    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
                    var s = document.getElementsByTagName('script')[0];
                    s.parentNode.insertBefore(gcse, s);
                })();
                

        });

        //  Events...

        async function onClickRun() {

            console.log("Search");
            new $.GoogleSearch().search('Excel-Translator', {}, function (data) {
                // just executed a search for the query "search-term"
                console.log(data)
            })
        }

        async function onChangeOptionSelection() {
            try {

        //      Properties...

                $("#keyword").prop("disabled", $("#selection").prop("checked"));
                $("#keyword").css({ "background-color": $("#selection").prop("checked") ? "#fafafa" : "" });

        //      Handler...

                if ($("#selection").prop("checked")) {
                    Office.context.document.addHandlerAsync(
                        Office.EventType.DocumentSelectionChanged,
                        onChangeSheetSelection,
                        function (asyncResult) {
                            if (asyncResult.status == Office.AsyncResultStatus.Failed) {
                                console.log(asyncResult.error.message);
                            }
                        });
                }
                else {
                    Office.context.document.removeHandlerAsync(
                        Office.EventType.DocumentSelectionChanged,
                        { handler: onChangeSheetSelection },
                        function (asyncResult) {
                            if (asyncResult.status == Office.AsyncResultStatus.Failed) {
                                console.log(asyncResult.error.message);
                            }
                        });
                }
            }
            catch (error) {
                OfficeHelpers.Utilities.log(error);
            }
        }

        async function onChangeSheetSelection(eventArgs) {
            try {
                await Excel.run(async (context) => {
                    
         //         Variables...

                    let Range = context.workbook.getSelectedRange();

        //          Load...

                    Range.load("formulas, values, formulasR1C1");

        //          Sync...

                    await context.sync();

        //          Output...

                    $("#keyword").text(Range.values[0][0]);
                });
            }
            catch (error) {
                OfficeHelpers.Utilities.log(error);
            }
        }





        (function ($) {

            //////////////////////////
            // view centric methods //
            //////////////////////////

            $.fn.googleSearch = function () {
                $(this).text('google-search')
            }

            //////////////////////////
            // data centric methods //
            //////////////////////////

            $.GoogleSearch = function () {
                this.target = $('body')
            }

            $.GoogleSearch.libsLoaded = false

            $.GoogleSearch.prototype.search = function (queryString, options, callback) {
                var self = this

                waitForGoogleLibs.call(this, function (err) {
                    if (err) {
                        throw err
                    } else {
                        var query = buildQueryString.call(self, queryString, options)
                            , objects = []

                        execSearch.call(self, query, function (err, results) {
                            if (err) {
                                throw err
                            } else {
                                callback && callback(results)
                            }
                        })
                    }
                })

                return this
            }

            $.GoogleSearch.prototype.cleanUp = function () {
                getSearchContainer.call(this).remove()
                $('.gstl_0.gssb_c').remove()
                $('#private_metadata.gsc-snippet-metadata').parent().remove()

                return this
            }

            /////////////
            // private //
            /////////////

            var waitForGoogleLibs = function (callback) {
                var intervalId = setInterval(function () {
                    if ($.GoogleSearch.libsLoaded) {
                        clearTimeout(timeoutId)
                        clearInterval(intervalId)
                        callback && callback(null)
                    }
                }, 100)

                var timeoutId = setTimeout(function () {
                    clearInterval(intervalId)
                    callback && callback(new Error('Timeout! Google libs aren\'t available!'))
                }, 2000)
            }

            var buildQueryString = function (queryString, options) {
                var query = [queryString]

                for (var key in (options || {})) {
                    query.push(key + ':' + options[key])
                }

                return query.join(" ")
            }

            var execSearch = function (queryString, callback) {
                var timeoutId = null

                google.search.WebSearch.RawCompletion = function (_, response) {
                    clearTimeout(timeoutId)
                    callback && callback(null, response.results)
                }

                timeoutId = setTimeout(function () {
                    callback(new Error('No rendered results found.'), null)
                }, 2000)

                getSearchControl.call(this).execute(queryString)
            }

            var getSearchControl = function () {
                if (!this.searchControl) {
                    this.searchControl = new google.search.SearchControl()
                    this.searchControl.addSearcher(new google.search.WebSearch())
                    this.searchControl.draw(getSearchContainer.call(this).get(0))
                }

                return this.searchControl
            }

            var getSearchContainer = function () {
                if (!this.element) {

                    this.element = $('<div>')
                        .attr('id', 'search-results' + parseInt(Math.random() * 999999999))
                        .css('display', 'none')

                    this.target.append(this.element)
                }

                return this.element
            }

            var loadGoogleLibs = function (callback) {
                $.getScript('https://www.google.com/jsapi').success(function () {
                    google.load('search', '1', { callback: callback })
                })
            }

            loadGoogleLibs(function () {
                $.GoogleSearch.libsLoaded = true
            })
        })(jQuery)


    language: typescript
template:
    content: "<div class=\"app\">\n<!-- Header  -->\n  <div class=\"header\">\n    <h1>Google Search Pane</h1>\n  </div>\n<!-- Content -->\n  <div class=\"content\">\n    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna\taliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no\tsea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores\tet ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>\n    <h2>Options</h2>\n    <div class=\"options\">\n      <input type=\"checkbox\" value=\"1\" id=\"selection\" name=\"selection\" />\n      <label for=\"selection\">Get value from top left cell of the selected range.</label>\n    </div>\n    <h2>Keywords</h2>\n    <div class=\"search\">\n\t    <textarea id=\"keyword\" rows=\"1\"></textarea>\n\t\t  <button id=\"run\" value=\"1\" type=\"submit\"><i class=\"fa fa-refresh\"></i></button>\n\t  </div>\n\t  <h2>Results</h2>\n    <div id=\"GoogleSearch\" name=\"GoogleSearch\"><gcse:search> </gcse:search></div>\n\t  <div class=\"results\">\n      &nbsp;\n    </div>\n    \n  </div>\n<!-- Footer -->  \n  <div class=\"footer\">\n    <span>Version 1.00.171029 · &copy 2017 by Mourad Louha · All rights reserved</span>\n  </div>\n</div>"
    language: html
style:
    content: "@import url(\"https://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css\");\r\n\r\n* {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\n*, *:before, *:after {\r\n  box-sizing: border-box;\r\n}\r\n\r\nhtml, body {\r\n  height: 100%;\r\n}\r\n\r\n.app {\r\n  display: flex;\r\n  flex-direction: column;\r\n  overflow: hidden;\r\n  font: 12px/1 \"Segoe UI\";\r\n  color: #000;\r\n  height: 100%;\r\n  width: 100%;\r\n}\r\n\r\n.header {\r\n  flex: none;\r\n  padding: 10px;\r\n  background: #eee;\r\n  border-bottom: #ddd 1px solid;\r\n  white-space: nowrap;\r\n}\r\n\r\n.header h1 {\r\n  display: inline;\r\n  font-size: 18px;\r\n  font-weight: bold;\r\n  margin: 0px;\r\n}\r\n\r\n.content {\r\n  flex: auto;\r\n  background-color: #fff;\r\n  overflow-x: hidden;\r\n  overflow-y: scroll;\r\n  padding: 10px;\r\n}\r\n\r\n.content h2 {\r\n  font-size: 14px;\r\n  font-weight: bold;\r\n  margin: 10px 0px 0px 0px;\r\n}\r\n\r\n.content p {\r\n  font-size: 14px;\r\n  margin: 10px 0px 0px 0px;\r\n  line-height: 1.25em;\r\n  text-align: justify;\r\n}\r\n\r\n.options {\r\n  width: 100%;\r\n\tmargin: 10px 0px 0px 0px;\r\n}\r\n\r\n.options input[type=checkbox] {\r\n  border: #ddd 1px solid;\r\n  cursor: pointer;\r\n}\r\n\r\n.options label {\r\n  padding: 0px 5px;\r\n  cursor: pointer;\r\n  font-size: 14px;\r\n  font-weight: normal;\r\n}\r\n\r\n.results {\r\n  background-color: #ddd;\r\n  margin: 10px 0px 0px 0px;\r\n  font-size: 14px;\r\n  font-weight: normal;\r\n  width: 100%;\r\n  min-height: 100px;\r\n}\r\n\r\n.search {\r\n  width:100%;\r\n  display:inline-block;\r\n  position: relative;\r\n  margin: 10px 0px 0px 0px;\r\n}\r\n\r\n.search button {\r\n  text-align: center;\r\n  font: 12px fontawesome;\r\n  border: 1px solid #ddd;\r\n  background-color: #eee;\r\n  width: 25px;\r\n  height: 28px;\r\n  cursor: pointer;\r\n  position:absolute;\r\n  right:0px;\r\n}\r\n\r\n.search textarea {\r\n  background-color: #fff;\r\n  border: 1px solid #ddd;\r\n  margin: 0;\r\n  padding: 5px 0px 0px 5px;\r\n  width: 100%;\r\n  height: 28px;\r\n  overflow: hidden;\r\n}\r\n\r\n.footer {\r\n  flex: none;\r\n  padding: 5px 10px;\r\n  background: #eee;\r\n  border-top: #ddd 1px solid;\r\n  font-size: 11px;\r\n  white-space: nowrap;\r\n  color:#666;\r\n}\r\n\r\n.information {\r\n  padding: 0 0 5px 0;\r\n  display: none;\r\n  color: #333;\r\n}\r\n"
    language: css
libraries: |-
    # Office.js
    https://appsforoffice.officeapps.live.com/afo/lib/beta/hosted/office.js

    # Google

    https://www.google.com/jsapi

    # CSS Libraries
    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

    # NPM libraries
    core-js@2.4.1/client/core.min.js
    @microsoft/office-js-helpers@0.6.0/dist/office.helpers.min.js
    # Previous = jquery@3.1.1
    jquery@3.2.1
    whatwg-fetch

    # IntelliSense: @types/library or node_modules paths or URL to d.ts files
    @types/office-js
    @types/core-js
    @microsoft/office-js-helpers/dist/office.helpers.d.ts
    @types/jquery
    @types/whatwg-fetch
    @types/whatwg-streams