-# リンクのドラッグ＆ドロップでダウンロードできるウィンドウ
!!! 5
%html{:lang => "ja"}
  %head
    %meta{:charset => "utf-8"}/
    %meta{:content => "IE=edge", "http-equiv" => "X-UA-Compatible"}/
    %meta{:content => "width=device-width, initial-scale=1", :name => "viewport"}/
    %meta{:content => "whiteleaf", :name => "author"}/
    %meta{:content => "none", :name => "robots"}/
    %title Narou.rb DnD Window
    %link{:href => "//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css", :rel => "stylesheet"}/
    %link{:href => "/resources/perfect-scrollbar.min.css", :rel => "stylesheet"}/
    %link{:href => "/style.css?_=#{Version}", :rel => "stylesheet"}/
    %link{:href => "/resources/default-style.css?_=#{Version}", :rel => "stylesheet"}/
    / HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries
    /[if lt IE 9]
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  %body
    :css
      html, body, .console {
        position: relative;
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #information {
        position: absolute;
        width: 100%;
        top: 50%;
        margin-top: -1em;
        text-align: center;
        color: white;
        font-size: 20px;
        font-weight: bold;
        opacity: 0.17;
        filter: alpha(opacity=17);
      }
      #queue-text {
        position: absolute;
        top: 3px;
        right: 3px;
        color: white;
        margin: 0;
        padding: 0;
      }

    #console.console.fullscreen
    #information
      このウィンドウ内にダウンロードしたい<br>
      小説のリンクをドラッグ＆ドロップ
    #queue-text.navbar-text.navbar-right
      %span.glyphicon.glyphicon-inbox
      %span#queue 0
    #link-drop-here
      .inner
        .glyphicon.glyphicon-download-alt
      #link-drop-cover.drop-cover(effectAllowed="all")

    %script{:src => "//code.jquery.com/jquery-1.11.1.min.js"}
    %script{:src => "//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"}
    %script{:src => "/resources/perfect-scrollbar.min.js"}
    %script{:src => "//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.6.1/lodash.min.js"}
    %script{:src => "/resources/sprintf.js"}
    %script{:src => "/resources/narou.library.js?_=#{Version}"}
    %script{:src => "/resources/narou.queue.js?_=#{Version}"}
    :javascript
      $(document).ready(function($) {
        $("#link-drop-here").hide();

        var action = new Narou.Action(null);
        var stream_console = new Narou.Console({
          restore: false, buttons: false
        });
        var dnd = new Narou.DragDrop;

        $(window).on("dragenter", function(e) {
          $("#link-drop-here").show();
        });

        $("#link-drop-cover")
          .on("dragover", function(e) {
            e.preventDefault();
            e.dataTransfer.dropEffect = "copy";
            return false;
          })
          .on("dragleave", function(e) {
            $("#link-drop-here").hide();
          })
          .on("drop", function(e) {
            e.preventDefault();
            dnd.getLinkText(e, function(link) {
              action.download(link);
            });
            $("#link-drop-here").hide();
          });
      });