ニコニコ動画のプレイヤーをポップアップ表示するjQueryプラグインを作成しました(修正版)

コピペで使うとバグるかもしれません
前回の記事でバグあるかもって書きましたがIE11で盛大にバグってました。
動画プレイヤが意図した場所に表示されずに画面の一番下に表示されてしまいます。
原因はdocument.currentScriptがIE11だと使用できない&polyfillもうまくいかないことでした。
polyfill
そんな中でどう修正したかというと、document.currentScriptがnullの場合にniconico動画の読み込みスクリプトへの参照を設定しました。無理やりですね。。。

前置きが長くなりましたが一応改善できたので記事にします。

(function ($, window) {
    var NiconicoDialog = null,
        defaultCss = {},
        methods = {
            //initialize plugin
            init: function (options) {
                options = $.extend({}, $.fn.NiconicoPopup.defaults, options);
                // initialize Niconico Player Dialog
                if (NiconicoDialog === null) {
                    NiconicoDialog = $('<div>').css({
                        display: 'none',
                        padding: 0
                    });
                    $('body').append(NiconicoDialog);
                    NiconicoDialog.dialog({
                        autoOpen: false,
                        resizable: false,
                        draggable: options.draggable,
                        modal: options.modal,
                        dialogClass: options.cssClass,
                        create: function () {
                            defaultCss.backgroundImage = $(".ui-dialog").css('background-image');
                            defaultCss.border = $(".ui-dialog").css('border');
                            defaultCss.backgroundColor = $(".ui-dialog").css('background-color');
                        },
                        close: function () {
                            NiconicoDialog.html('');
                            $(".ui-dialog-titlebar").show();
                            $(".ui-dialog").css({
                                'background-image': defaultCss.backgroundImage,
                                'border': defaultCss.border,
                                'background-color': defaultCss.backgroundColor
                            });
                        }
                    });
                }
                return this.each(function () {
                    var obj = $(this),
                        data = obj.data('Niconico'),
                        niconicoId,
                        NiconicoURL,
                        $titleBar;
                    if (!data) { //check if event is already assigned
                        obj.data('Niconico', {
                            target: obj
                        });
                        $(obj).bind('click.NiconicoPopup', function (event) {
                            niconicoId = options.niconicoId;
                            if ($.trim(niconicoId) === '' || niconicoId === false) {
                                niconicoId = obj.attr(options.idAttribute);
                            }
                            //Format Niconico URL
                            NiconicoURL = '//embed.nicovideo.jp/watch/' + niconicoId + '/script?w=640&h=360';
                            NiconicoDialog.dialog({ //reset width and height
                                width: 'auto',
                                height: 'auto'
                            });
                            NiconicoDialog.dialog({
                                minWidth: options.width,
                                minHeight: options.height
                            });
                            NiconicoDialog.dialog('open');
                            $(".ui-widget-overlay").fadeTo('fast', options.overlayOpacity); //set Overlay opacity
                            $titleBar = $(".ui-dialog-titlebar");
                            if (options.hideTitleBar && options.modal) { //hide Title Bar (only if Modal is enabled)
                                $titleBar.hide(); //hide Title Bar
                                $(".ui-widget-overlay").click(function () { //automatically assign Click event to overlay
                                    NiconicoDialog.dialog("close");
                                });
                            }
                            if (options.clickOutsideClose && options.modal) { //assign clickOutsideClose event only if Modal option is enabled
                                $(".ui-widget-overlay").click(function () {
                                    NiconicoDialog.dialog("close");
                                });
                            }
                            $titleBar.removeClass("ui-corner-all").addClass("ui-corner-top"); //only round the top corners on titlebar
                            if (!options.showBorder) {
                                $(".ui-dialog").css({
                                    'background-image': 'none',
                                    'border': 'none',
                                    'background-color': 'transparent'
                                });
                            }
                            event.preventDefault();
                        });
                    }
                });
            },
            destroy: function () {
                return this.each(function () {
                    $(this).unbind(".NiconicoPopup");
                    $(this).removeData('Niconico');
                });
            }
        };
    function getNiconicoPlayer(URL) {
        var script = document.createElement('script');
        script.setAttribute('type', 'text/javascript');
        script.setAttribute('src', URL);
        if (!document.currentScript) {
            document.currentScript = script
            script.onload = function () {
                document.currentScript = null
                script.onload = null
            }
        }
        return script;
    }
    $.fn.NiconicoPopup = function (method) {
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error('Method ' + method + ' does not exist on jQuery.NiconicoPopup');
        }
    };
    //default configuration
    $.fn.NiconicoPopup.defaults = {
        'niconicoId': '',
        'title': '',
        'idAttribute': 'rel',
        'cssClass': 'NiconicoDialog',
        'draggable': false,
        'modal': true,
        'width': 640,
        'height': 380,
        'hideTitleBar': true,
        'clickOutsideClose': true,
        'overlayOpacity': 0.5,
        'autohide': 2,
        'autoplay': 1,
        'color': 'red',
        'controls': 1,
        'fs': 1,
        'loop': 0,
        'showinfo': 0,
        'theme': 'light',
        'showBorder': true
    };
})(jQuery, window);
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.