ResponsivePage

Web responsive. Through a given configuration from a desktop pc or notebook.

  1. // ==UserScript==
  2. // @name ResponsivePage
  3. // @namespace http://lifia.unlp.edu.ar
  4. // @version 0.7
  5. // @description Web responsive. Through a given configuration from a desktop pc or notebook.
  6. // @match https://*/*
  7. // @match http://*/*
  8. // @require http://code.jquery.com/jquery-2.1.4.min.js
  9. // ==/UserScript==
  10.  
  11. if (window.jQuery){
  12. $('head script[src*="js"]').remove();
  13. }
  14.  
  15. GM_registerMenuCommand('runSingle', runSingle);
  16. GM_registerMenuCommand('runDropdownMenu', runDropdownMenu);
  17. GM_registerMenuCommand('import JSON', importJson);
  18.  
  19. function runSingle(buttomMenu){
  20. runWeb(false);
  21. }
  22.  
  23. function runDropdownMenu(){
  24. runWeb(true);
  25. }
  26.  
  27. function runWeb(buttomMenu){
  28. var obj = getLocal();
  29. var objectParent = constructObject(obj);
  30. runPage(objectParent, buttomMenu);
  31. }
  32.  
  33. function importJson() {
  34. var importData = prompt("Import configuration. Add JSON");
  35. if(importData.length >= 218){
  36. dataJson = JSON.parse(importData);
  37. saveLocal();
  38. alert("Successful import!");
  39. } else {
  40. alert("Wrong format. Please try again")
  41. }
  42. }
  43.  
  44. function saveLocal(){
  45. if (typeof(Storage) !== "undefined") {
  46. localStorage.setItem("obj", JSON.stringify(dataJson));
  47. } else {
  48. alert("Sorry, your browser does not support Web Storage...");
  49. }
  50. }
  51.  
  52. function getLocal(){
  53. if (typeof(Storage) !== "undefined") {
  54. return JSON.parse(localStorage.getItem("obj"));
  55. } else {
  56. alert("Sorry, your browser does not support Web Storage...");
  57. }
  58. }
  59. function getElements(xpath){
  60. // Recive algo como obj[0].headerLeft
  61. var node = document.evaluate(
  62. xpath,
  63. document,
  64. null,
  65. XPathResult.FIRST_ORDERED_NODE_TYPE,
  66. null ).singleNodeValue;
  67. return node;
  68. }
  69.  
  70. function concatElement(element){
  71. var stringElements = "";
  72. var getElement;
  73. $.each( element, function( key, value ) {
  74. if (value != "none"){
  75. getElement = getElements(value);
  76. if(getElement !== null){
  77. stringElements += "<div>"+getElement.innerHTML+"</div>";
  78. }
  79. else
  80. stringElements = null;
  81. }
  82. else
  83. stringElements = "none";
  84. });
  85. return stringElements;
  86. }
  87.  
  88. function constructObject(obj){
  89. var object = {};
  90. var error = false;
  91. $.each( obj, function( key, value ) {
  92. if (concatElement(value) === null){
  93. error = true
  94. messagge = "Error xpath. Not load an element in "+key;
  95. return true;
  96. }
  97. if (concatElement(value) == "none"){
  98. object[key] = "";
  99. }
  100. else
  101. object[key] = concatElement(value);
  102. });
  103. if (error === true){
  104. alert(messagge);
  105. return null;
  106. }
  107. else
  108. return object;
  109. }
  110.  
  111. function importElement(source, destination){
  112. $(destination).append(source);
  113. }
  114.  
  115. function insertZoneMenu(element){
  116. dwrap = document.createElement("div");
  117. $(dwrap).html(element);
  118. var links = $(dwrap).find("a");
  119. $("#menu").append("<nav class='navbar navbar-default' role='navigation'> <div class='navbar-header'> <button type='button' class='navbar-toggle' data-toggle='collapse' data-target='#bs-example-navbar-collapse-1'> <span class='sr-only'>Toggle navigation</span><span class='icon-bar'></span><span class='icon-bar'></span><span class='icon-bar'></span></button> </div> <div class='collapse navbar-collapse' id='bs-example-navbar-collapse-1'> <ul id='menu-nav' class='nav navbar-nav'> </ul> </div> </nav> ");
  120. $.each($(links), function(i, e){
  121. var newLinks = document.createElement("li");
  122. $(newLinks).append($(e));
  123. $("#menu-nav").append($(newLinks));
  124. });
  125. }
  126.  
  127. function runPage(objectParent, buttomMenu){
  128. $("head").append("<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">");
  129. $("head").append("<script src='https://code.jquery.com/jquery-2.1.4.min.js'></script>");
  130. $("head").append("<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js'></script>");
  131. $("head").append("<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css'>");
  132. $("head").append("<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'>");
  133. $("head").append("<style>*{min-width: 0px !important;}</style>");
  134. $("head").append("<style>*{max-width: 100% !important;}</style>");
  135.  
  136. if (objectParent !== null){
  137. $("body").html("");
  138. $("body").append("<div class='container-fluid'> <div class='row'> <div id='header-left' class='col-md-4'> </div> <div id='header-center' class='col-md-4'> </div> <div id='header-right' class='col-md-4'> </div> </div> <div class='row'> <div id='menu' class='col-md-12'> </div> </div> <div class='row'> <div id='main-left' class='col-md-4'> </div> <div id='main-center' class='col-md-4'> </div> <div id='main-right' class='col-md-4'> </div> </div> <div class='row'> <div id='footer-left' class='col-md-4'> </div> <div id='footer-center' class='col-md-4'> </div> <div id='footer-right' class='col-md-4'> </div> </div> </div>");
  139. importElement(objectParent.headerLeft,"#header-left");
  140. importElement(objectParent.headerCenter,"#header-center");
  141. importElement(objectParent.headerRight,"#header-right");
  142. if (buttomMenu === true){
  143. insertZoneMenu(objectParent.menu);
  144. }
  145. else
  146. importElement(objectParent.menu,"#menu");
  147. importElement(objectParent.mainLeft,"#main-left");
  148. importElement(objectParent.mainCenter,"#main-center");
  149. importElement(objectParent.mainRight,"#main-right");
  150. importElement(objectParent.footerLeft,"#footer-left");
  151. importElement(objectParent.footerCenter,"#footer-center");
  152. importElement(objectParent.footerRight,"#footer-right");
  153. }
  154. }

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址