OverlayTemplate

by Borom 2014-09-22 [2014/09/22 00:31:07]

オーバーレイ表示の基本テンプレート

@@ -8,7 +8,6 @@
 
 // ToDo
 // [ ] 削除処理をフェードアウトに
-// [ ] オーバーレイサイズを自動調整（パラメータで指定した値よりウィンドウが小さい場合はウィンドウサイズを基準に調整する）
 // [ ] オーバーレイを天地中央に表示する
 
  // プラグイン部分

• /*
   * @title OverlayTemplate
   * @description オーバーレイ表示の基本テンプレート
   * @include http://*
   * @license MIT License
   * @require http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
   */
  
  // ToDo
  // [ ] 削除処理をフェードアウトに
  // [ ] オーバーレイを天地中央に表示する
  
   // プラグイン部分
  (function ( $ ){
    $.fn.letOverlay = function ( options ) {
      // オプション設定
      var settings = $.extend({}, {
        // デフォルトパラメータ指定
        shadowName: "let-overlay-shadow",
        shadowZIndex: 99998,
        shadowOpacity: 0.6,
        shadowColor: "#999",
  
        contentName: "let-overlay-content",
        contentZIndex: 99999,
        contentColor: "#fff",
        contentRadius: "10px",
        contentTop: "10px",
        contentLeft: "10px",
        contentWidth: 400,
        contentHeight: 300,
  
  
        contentClassName: "let-overlay",
  
        closeButtonClassName: "let-close",
      }, options);
  
  
      // プラグイン動作の記述
  
  
      // オーバーレイ生成処理
      if( !$("." + settings.contentClassName ).length){
        createOverlay(settings);
      }
  
      // オーバーレイ削除処理
      $(document).on("keydown", "body", function( e ){
        if( e.keyCode == 27 ) {
          removeOverlay( settings.contentClassName );
        }
      });
      $(document).on("click", "#" + settings.shadowName + " , ." + settings.closeButtonClassName , function() {
        removeOverlay( settings.contentClassName );
      });
  
  
  
      // オーバーレイ生成関数
      function createOverlay ( param ){
        var htmlShadow = "<div id=\"" + param.shadowName + "\" class=\"" + param.contentClassName + "\"></div>";
        var htmlContent = "<div id=\"" + param.contentName + "\" class=\"" + param.contentClassName + "\"></div>";
        var htmlOverlay = htmlShadow + htmlContent;
  
        var idShadow = "#" + param.shadowName;
        var idContent = "#" + param.contentName;
  
        var windowSize = {
          height: 0,
          width: 0,
        };
        var contentSize = {
          height: 0,
          width: 0,
        };
  
        windowSize.width = $(window).width();
        windowSize.height = $(window).height();
  
  
  
        // ウィンドウ幅が指定コンテンツサイズ未満だった場合、
        // コンテンツ幅をウィンドウ幅-40に指定
        if (windowSize.width < param.contentWidth){
          contentSize.width = windowSize.width - 40;
        } else {
          contentSize.width = param.contentWidth;
        }
  
        // ウィンドウ高さが指定コンテンツサイズ以下だった場合、
        // コンテンツ高さをウィンドウ幅-40に指定
        if (windowSize.height < param.contentHeight){
          contentSize.height = windowSize.height - 40;
        } else {
          contentSize.height = param.contentHeight;
        }
  
        var cssSettings = {
          shadow: {
            background: param.shadowColor,
            opacity: param.shadowOpacity,
            position: "fixed",
            top: 0,
            left: 0,
            width: "100%",
            height: "100%",
          }, 
          content : {
            background: param.contentColor,
            borderRadius: param.contentRadius,
            position: "fixed",
            top: param.contentTop,
            left: param.contentLeft,
            width: contentSize.width,
            height: contentSize.height,
          }
        };
  
  
  
        console.log(contentSize);
        console.log(windowSize);
  
        // body 末尾にオーバーレイ用HTMLを追加
        $("body").append(htmlOverlay);
  
        // シャドウのCSS指定
        $(idShadow).css(cssSettings.shadow);
  
        // コンテンツのCSS指定
        $(idContent).css(cssSettings.content);
      };
  
  
  
      // オーバーレイ削除関数
      function removeOverlay( overlayClass ) {
        $("." + overlayClass).remove();
        return false;
      };
  
    };
  }( jQuery ) );
  
  
  // 実行
  $(function(){
    $().letOverlay();
  });

• Permalink RAW Packed Userscript LOADER Metadata ?

  Permalink

  このページへの個別リンクです。

  RAW

  書かれたコードへの直接のリンクです。

  Packed

  文字列が圧縮された書かれたコードへのリンクです。

  Userscript

  Greasemonkey 等で利用する場合の .user.js へのリンクです。

  Loader

  @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。

  Metadata

  コード中にコメントで @xxx と書かれたメタデータの JSON です。