☰

Window floating container

Adds a fixed header element for use by other scripts

当前为 2016-11-29 提交的版本，查看 最新版本。

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

  1. // ==UserScript==
  2. // @name         Window floating container 
  3. // @version      1.1.8
  4. // @description  Adds a fixed header element for use by other scripts
  5. // @author       @_jnblog
  6. // @require      https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js
  7. // @grant        GM_addStyle
  8. // @grant        GM_getValue
  9. // @grant        GM_setValue
  10. // ==/UserScript==
  11. /* jshint -W097 */
  12. /* global $ */
  13. /* jshint asi: true, multistr: true */
  14. 'use strict'
  15.  
  16.  
  17. function getFloater() {
  18.   return $('#ijgWindowFloater')
  19. }
  20.  
  21. var ijgFloater = getFloater()
  22.  
  23. if (!$('#ijgWindowFloater').length) {
  24.   ijgFloater = $('<div id="ijgWindowFloater">')
  25.   $('.nav-Top').append(ijgFloater).css('z-index', 1001)
  26.   addStyles()
  27.  
  28.   $('<i class="ijgWindowFloater-toggle">')
  29.       .appendTo(ijgFloater)
  30.       .on('click', function() {
  31.     $('#ijgWindowFloater').toggleClass('ijg-is-closed')
  32.     GM_setValue('ijgWindowFloater-closed', $('#ijgWindowFloater').hasClass('ijg-is-closed'))
  33.   })
  34.  
  35.   var isClosed = GM_getValue('ijgWindowFloater-closed')
  36.   if (isClosed || typeof ijgWindowFloater-closed === 'undefined') {
  37.     $('#ijgWindowFloater').addClass('ijg-is-closed')
  38.   }
  39. }
  40.  
  41.  
  42.  
  43. function addStyles () {
  44.   GM_addStyle('#ijgWindowFloater {\
  45.     position: absolute;\
  46.     top: 100%;\
  47.     transform: translateY(-50%);\
  48.     left: 0;\
  49.     z-index: 2000;\
  50.     color: white;\
  51.     background-color: #EB6841;\
  52.     box-shadow: 0px 0px 6px 1px white;\
  53.   }\
  54.   #ijgWindowFloater a {\
  55.     color: white !important;\
  56.     padding: 5px;\
  57.     display: inline-block;\
  58.   }\
  59.   #ijgWindowFloater a:hover {\
  60.     color: #FAF667 !important;\
  61.   }\
  62.   .ijgWindowFloater-item {\
  63.     vertical-align: middle;\
  64.     padding-left: .6em;\
  65.     padding-right: .2em;\
  66.     white-space: nowrap;\
  67.   }\
  68.   .ijg-is-closed .ijgWindowFloater-item {\
  69.     display: none;\
  70.   }\
  71.   .ijgWindowFloater-toggle {\
  72.     cursor: pointer;\
  73.     background-color: transparent;\
  74.     box-shadow: inset 0 0 0 32px;\
  75.     -webkit-transform-origin: right;\
  76.     -ms-transform-origin: right;\
  77.     transform-origin: right;\
  78.     transform: rotate(180deg);\
  79.     vertical-align: middle;\
  80.     display: inline-block;\
  81.     position: relative;\
  82.     font-style: normal;\
  83.     color: transparent;\
  84.     text-align: left;\
  85.     text-indent: -9999px;\
  86.     direction: ltr;\
  87.     box-sizing: border-box;\
  88.     border: 2px solid white;\
  89.     transition: all .2s;\
  90.     border-radius: 50%;\
  91.     width: 24px;\
  92.     height: 24px;\
  93.     margin: 2px 5px 3px 2px;\
  94.     padding: 0;\
  95.     top: 0;\
  96.     left: -22px;\
  97.   }\
  98.   .ijgWindowFloater-toggle:before,\
  99.   .ijgWindowFloater-toggle:after {\
  100.     content: "";\
  101.     width: 14px;\
  102.     height: 2px;\
  103.     position: absolute;\
  104.     bottom: 0;\
  105.     margin: auto 0;\
  106.     box-shadow: inset 0 0 0 32px;\
  107.     -webkit-transform-origin: right;\
  108.     -ms-transform-origin: right;\
  109.     transform-origin: right;\
  110.     pointer-events: none;\
  111.     width: 9px;\
  112.     right: 6.5px;\
  113.     color: white;\
  114.   }\
  115.   .ijgWindowFloater-toggle:before {\
  116.     top: 2px;\
  117.     -webkit-transform: rotate(45deg);\
  118.     -ms-transform: rotate(45deg);\
  119.     transform: rotate(45deg);\
  120.   }\
  121.   .ijgWindowFloater-toggle:after {\
  122.     top: 0;\
  123.     -webkit-transform: rotate(-45deg);\
  124.     -ms-transform: rotate(-45deg);\
  125.     transform: rotate(-45deg);\
  126.   }\
  127.   .ijg-is-closed .ijgWindowFloater-toggle:before {\
  128.     top: 12px;\
  129.     right: 8px;\
  130.   }\
  131.   .ijg-is-closed .ijgWindowFloater-toggle:after {\
  132.     top: -10px;\
  133.     right: 8px;\
  134.   }')
  135. }