Google 选择器在后续调用文件夹选择时打开多个视图

Question

我正在使用以下filepicker.js 代码，它适用于显示文档和文件夹。当我打开谷歌选择器来显示文件夹时，在后续调用中会打开多个选择器。

(function() {
/**
 * Initialise a Google Driver file picker
 */
var myType = 'empty';
var FilePicker = window.FilePicker = function (options) {
    // Config

    this.apiKey = options.apiKey;
    this.clientId = options.clientId;
    this.accesstoken = options.accesstoken;
    myType = options.dType;
    // Elements
    this.buttonEl = options.buttonEl;
    // Events
    this.onSelect = options.onSelect;
    this.buttonEl.addEventListener('click', this.open.bind(this));

    // Disable the button until the API loads, as it won't work properly until then.
    this.buttonEl.disabled = true;

    // Load the drive API
    gapi.client.setApiKey(this.apiKey);
    gapi.client.load('drive', 'v2', this._driveApiLoaded.bind(this));
    google.load('picker', '1', { callback: this._pickerApiLoaded.bind(this) });
}

FilePicker.prototype = {
    /**
     * Open the file picker.
     */
    open: function() {      

        // Check if the user has already authenticated

        var token = gapi.auth.getToken();
        if (token) {
           // alert(JSON.stringify(token) +  "   token status");
            this._showPicker();
        } else {
            // The user has not yet authenticated with Google
            // We need to do the authentication before displaying the Drive picker.
            this._doAuth(true, function () {
             //   alert('in the doAuth ')
                this._showPicker();
            }.bind(this));
        }
    },

    /**
     * Show the file picker once authentication has been done.
     * @private
     */
    _showPicker: function () {
        var view = null;
        if (myType == "Folder") {
            view = new google.picker.DocsView(google.picker.ViewId.FOLDERS)
                   .setIncludeFolders(true)
                   .setMimeTypes('application/vnd.google-apps.folder')
                   .setSelectFolderEnabled(true);
        }

        if (myType=="DOC") {
            view = google.picker.ViewId.DOCUMENTS;
        } 

        if (myType == "PPT") {
            view = google.picker.ViewId.PRESENTATIONS;
        }

       // alert("Final access token   "+ this.accesstoken);
       // alert(this.picker);
        this.picker = new google.picker.PickerBuilder().
            addView(view).
            setAppId(this.clientId).
            setOAuthToken(this.accesstoken).
            setCallback(this._pickerCallback.bind(this)).
            build().
            setVisible(true);
        console.log(view);

    },
    /**
     * Called when a file has been selected in the Google Drive file picker.
     * @private
     */
    _pickerCallback: function (data) {
        if (myType == "DOC" || myType == "PPT") {
            if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
                var file = data[google.picker.Response.DOCUMENTS][0];
                url = file[google.picker.Document.URL];
                this._fileGetCallback(url);
            }
        }
        if (myType == "Folder") {
            if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
                console.log(google.picker);
                var url = JSON.stringify(data.docs[0]);
                this._fileGetCallback(url);

            }
        }
    },
    /**
     * Called when file details have been retrieved from Google Drive.
     * @private
     */
    _fileGetCallback: function (abc) {
        if (this.onSelect) {
            this.onSelect(abc);
        }
    },

    /**
     * Called when the Google Drive file picker API has finished loading.
     * @private
     */
    _pickerApiLoaded: function() {
        this.buttonEl.disabled = false;
    },

    /**
     * Called when the Google Drive API has finished loading.
     * @private
     */
    _driveApiLoaded: function() {
        this._doAuth(true);
    },

    /**
     * Authenticate with Google Drive via the Google JavaScript API.
     * @private
     */
    _doAuth: function (immediate, callback) {
        gapi.auth.authorize({
            client_id: this.clientId,
            scope: 'https://www.googleapis.com/auth/drive',
            immediate: immediate
        }, callback);
    }
};

我怎样才能停止制作多个谷歌视图？

Answer 1

为了我的使用，我将 var picker = 行移出函数并进入全局范围，然后如果选择器 var 为空，则检查 createPicker()。如果是，那么我完成了整个创建，如果不是，那么只是 setVisible()。似乎在这里工作，希望这会有所帮助。

var picker = null;
function createPicker() {
    if (pickerApiLoaded && oauthToken && picker === null) {
        var view = new google.picker.View(google.picker.ViewId.DOCS);
        view.setMimeTypes('application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document');
        picker = new google.picker.PickerBuilder().
        addView(view).
        setOAuthToken(oauthToken).
        setDeveloperKey(developerKey).
        setCallback(pickerCallback).
        build();
        picker.setVisible(true);
    } else if(pickerApiLoaded && oauthToken && picker !== null) {
        picker.setVisible(true);
    }
}

Answer 2

您可以为各种视图禁用feature。使用PickerBuilder.enableFeature 和PickerBuilder.disableFeature 打开/关闭视图。

以下是禁用多选视图的示例代码：

var picker = new google.picker.PickerBuilder().disableFeature(google.picker.Feature.MULTISELECT_ENABLED)