☰

Window floating container

Adds a fixed header element for use by other scripts

当前为 2017-01-23 提交的版本，查看 最新版本。

此脚本不应直接安装。它是供其他脚本使用的外部库，要使用该库请加入元指令 // @require https://update.cn-greasyfork.org/scripts/18233/171235/Window%20floating%20container.js 

// ==UserScript==
// @name         Window floating container 
// @version      2.0.0
// @description  Adds a fixed header element for use by other scripts
// @author       @_jnblog
// @require      https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js
// @grant        GM_addStyle
// @grant        GM_getValue
// @grant        GM_setValue
// ==/UserScript==
/* jshint -W097 */
/* global $ */
/* jshint asi: true, multistr: true */
'use strict'

window.windowFloaterUtils = {
  getFloater: function getFloater() {
    return $('#ijgWindowFloater')
  }
}

;(function _makeFloater() {
  var ijgFloater
  if ($('#ijgWindowFloater').length) {
    return
  }

  ijgFloater = $('<div id="ijgWindowFloater">')
  $('.nav-Top').append(ijgFloater).css('z-index', 1001)
  _addStyles()

  $('<i class="ijgWindowFloater-toggle">')
    .appendTo(ijgFloater)
    .on('click', function() {
    $('#ijgWindowFloater').toggleClass('ijg-is-closed')
    GM_setValue('ijgWindowFloater-closed', $('#ijgWindowFloater').hasClass('ijg-is-closed'))
  })

  var isClosed = GM_getValue('ijgWindowFloater-closed')
  if (isClosed || typeof ijgWindowFloater-closed === 'undefined') {
    $('#ijgWindowFloater').addClass('ijg-is-closed')
  }

  function _addStyles () {
  GM_addStyle('\
    #ijgWindowFloater {\
      position: absolute;\
      top: 100%;\
      transform: translateY(-50%);\
      left: 0;\
      z-index: 2000;\
      color: white;\
      background-color: black;\
      box-shadow: 0px 0px 6px 1px white;\
    }\
    #ijgWindowFloater a {\
      color: white !important;\
      padding: 5px;\
      display: inline-block;\
    }\
    #ijgWindowFloater a:hover {\
      text-decoration: underline;\
    }\
    .ijgWindowFloater-item {\
      vertical-align: middle;\
      padding-left: .6em;\
      padding-right: .2em;\
      white-space: nowrap;\
    }\
    .ijg-is-closed .ijgWindowFloater-item {\
      display: none;\
    }\
    .ijgWindowFloater-toggle {\
      cursor: pointer;\
      background-color: transparent;\
      box-shadow: inset 0 0 0 32px;\
      -webkit-transform-origin: right;\
      -ms-transform-origin: right;\
      transform-origin: right;\
      transform: rotate(180deg);\
      vertical-align: middle;\
      display: inline-block;\
      position: relative;\
      font-style: normal;\
      color: transparent;\
      text-align: left;\
      text-indent: -9999px;\
      direction: ltr;\
      box-sizing: border-box;\
      border: 2px solid white;\
      transition: all .2s;\
      border-radius: 50%;\
      width: 24px;\
      height: 24px;\
      margin: 2px 5px 3px 2px;\
      padding: 0;\
      top: 0;\
      left: -22px;\
    }\
    .ijgWindowFloater-toggle:before,\
    .ijgWindowFloater-toggle:after {\
      content: "";\
      width: 14px;\
      height: 2px;\
      position: absolute;\
      bottom: 0;\
      margin: auto 0;\
      box-shadow: inset 0 0 0 32px;\
      -webkit-transform-origin: right;\
      -ms-transform-origin: right;\
      transform-origin: right;\
      pointer-events: none;\
      width: 9px;\
      right: 6.5px;\
      color: white;\
    }\
    .ijgWindowFloater-toggle:before {\
      top: 2px;\
      -webkit-transform: rotate(45deg);\
      -ms-transform: rotate(45deg);\
      transform: rotate(45deg);\
    }\
    .ijgWindowFloater-toggle:after {\
      top: 0;\
      -webkit-transform: rotate(-45deg);\
      -ms-transform: rotate(-45deg);\
      transform: rotate(-45deg);\
    }\
    .ijg-is-closed .ijgWindowFloater-toggle:before {\
      top: 12px;\
      right: 8px;\
    }\
    .ijg-is-closed .ijgWindowFloater-toggle:after {\
      top: -10px;\
      right: 8px;\
    }')
  }
})()