Merge pull request #172 from papyri/jquery-updates

jQuery updates and search page refactor

pn-site/css/custom-theme/jquery-ui-dul-theme-shim.css

@@ -0,0 +1,50 @@
+/* Interaction Cues
+----------------------------------*/
+.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #d3d3d3; background: #c0d3bc url(images/ui-bg_glass_75_c0d3bc_1x400.png) 50% 50% repeat-x; font-weight: normal; color: #555555; }
+.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #555555; text-decoration: none; }
+.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #999999; background: #ebf1e8 url(images/ui-bg_glass_75_ebf1e8_1x400.png) 50% 50% repeat-x; font-weight: normal; color: #212121; }
+.ui-state-hover a, .ui-state-hover a:hover { color: #212121; text-decoration: none; }
+.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #aaaaaa; background: #a6c698 url(images/ui-bg_glass_65_a6c698_1x400.png) 50% 50% repeat-x; font-weight: normal; color: #212121; }
+.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #212121; text-decoration: none; }
+.ui-widget :active { outline: none; }
+
+/* Component containers
+----------------------------------*/
+.ui-widget { font-family: Verdana,Arial,sans-serif; font-size: 1.1em; }
+.ui-widget .ui-widget { font-size: 1em; }
+.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Verdana,Arial,sans-serif; font-size: 1em; }
+.ui-widget-content { border: 1px solid #aaaaaa; background: #ffffff url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x; color: #222222; }
+.ui-widget-content a { color: #222222; }
+.ui-widget-header { border: 1px solid #aaaaaa; background: #cccccc url(images/ui-bg_highlight-soft_75_cccccc_1x100.png) 50% 50% repeat-x; color: #222222; font-weight: bold; }
+.ui-widget-header a { color: #222222; }
+
+/* Interaction Cues
+----------------------------------*/
+.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight  {border: 1px solid #fcefa1; background: #fbf9ee url(images/ui-bg_glass_55_fbf9ee_1x400.png) 50% 50% repeat-x; color: #363636; }
+.ui-state-highlight a, .ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a { color: #363636; }
+.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {border: 1px solid #cd0a0a; background: #fef1ec url(images/ui-bg_inset-soft_95_fef1ec_1x100.png) 50% bottom repeat-x; color: #cd0a0a; }
+.ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a { color: #cd0a0a; }
+.ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text { color: #cd0a0a; }
+.ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: bold; }
+.ui-priority-secondary, .ui-widget-content .ui-priority-secondary,  .ui-widget-header .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; }
+.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); background-image: none; }
+
+.custom-combobox { position: relative;  display: inline-block; }
+.custom-combobox-toggle { position: absolute; top: 0; bottom: 0; margin-left: -1px; padding: 0; float: right }
+.custom-combobox-input { margin: 0; padding: 5px 10px; float: left}
+
+/* Search Sidebar
+----------------------------------*/
+div.content.search {
+  .facet-widget p { display: flex }
+  .facet-widget #volume-wrapper, .facet-widget #idno-wrapper, .stringsearch-section p { display: block }
+  .facet-widget:last-child p { display: block }
+  .facet-widget p span.option-label, .facet-widget p label[for="SERIES"], .facet-widget p label[for="COLLECTION"] { width: 100px }
+  .facet-widget p label[for="COLLECTION"] { width: 100px }
+  .facet-widget p span.custom-combobox, #author-selector p span.option-label, #work-selector p span.option-label, #transl-selector p span.option-label, #lang-selector p span.option-label { flex: 1 }
+  .facet-widget p span.custom-combobox, input.custom-combobox-input { width: 100% }
+  .facet-widget.date-facet-widget { display: flex }
+  .search-closed .facet-widget.date-facet-widget { display: none }
+  .facet-widget.date-facet-widget input.custom-combobox-input { width: auto }
+  #id-selector-wrapper input.custom-combobox-input { width: auto }
+}

pn-site/facetbrowse.html

@@ -5,11 +5,13 @@
     <title>PN Search</title>
     <link rel="stylesheet" href="/css/yui/reset-fonts-grids.css" type="text/css" media="screen" title="no title" charset="utf-8">
     <link rel="stylesheet" href="/css/master.css" type="text/css" media="screen" title="no title" charset="utf-8">
-    <link rel="stylesheet" href="/css/custom-theme/jquery-ui-1.8.14.custom.css" type="text/css" media="screen" title="no title" charset="utf-8">
+    <link rel="stylesheet" href="/css/custom-theme/jquery-ui-1.14.1.min.css" type="text/css" media="screen" title="no title" charset="utf-8">
+    <link rel="stylesheet" href="/css/custom-theme/jquery-ui-dul-theme-shim.css" type="text/css" media="screen" title="no title" charset="utf-8">
     <link rel="stylesheet" href="/css/jquery.bubblepopup.v2.1.5.css" type="text/css" media="screen" title="no title" charset="utf-8">
     <link rel="stylesheet" href="/css/autocomplete/autocomplete.css" type="text/css" media="screen" title="no title" charset="utf-8">
-    <script src="/js/jquery-1.7.min.js" type="text/javascript" charset="utf-8"></script>
-   <script src="/js/jquery-ui-1.8.14.custom.min.js" type="text/javascript" charset="utf-8"></script>
+    <script src="/js/jquery-3.7.1.min.js" type="text/javascript" charset="utf-8"></script>
+    <script src="/js/jquery-migrate-3.5.2.min.js" type="text/javascript" charset="utf-8"></script>
+   <script src="/js/jquery-ui-1.14.1.min.js" type="text/javascript" charset="utf-8"></script>
     <script src="/js/jquery.bubblepopup.v2.1.5.min.js" type="text/javascript" charset="utf-8"></script>
     <script src="/js/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
     <!-- typegreek code written by Randy Hoyt, http://www.typegreek.com/overview/. Used with gratitude and permission -->
@@ -176,25 +178,30 @@
 
       .facet-widget select, .facet-widget input{
 
-        float: right;
         padding-top: 0;
         margin-top: 0;
 
       }
 
+      .facet-widget input#id-idno, .facet-widget input#id-volume, .facet-widget select[name=TRANSC] {
+
+      	float: right;
+
+      }
+
       #text-search-widget select, #text-search-widget input, #img-select input{
 
         float: none;
 
       }
 
-      #place-selector input{
+      #place-selector .custom-combobox {
 
       	width: 63%;
 
       }
 
-      #nome-selector input{
+      #nome-selector .custom-combobo {
 
       	width: 63%;
 
@@ -706,13 +713,19 @@
 
       #after-era-selector, #before-era-selector{
 
-      		float: left;
+      		float: inline-end;
       		position: relative;
       		margin-left: 2em;
       		padding-top: 2px;
 
       }
 
+      .custom-combobox {
+        float: right;
+        margin-right: 1em;
+        vertical-align: middle;
+      }
+
 	#after-era-selector input, #before-era-selector input{
 
       	float: none;
@@ -974,10 +987,10 @@
       $(document).ready(function(){
 
      	$("#opening-info h2, #info").css("display", "block");
-        $(".info-section h4").click(function(){
+        $(".info-section h4").on('click', (e) => {
 
         	var startHeight = $("#facet-wrapper").height();
-        	$(this).next(".info-content").slideToggle(200, 'linear', function(){
+        	$(e.currentTarget).next(".info-content").slideToggle(200, 'linear', function(){
 
         		var newHeight = $("#facet-wrapper").height();
         	    if(newHeight != startHeight){

pn-site/index.html

@@ -5,9 +5,11 @@
   <title>Papyri.info</title>
   <link rel="stylesheet" href="/css/yui/reset-fonts-grids.css" type="text/css" media="screen" title="no title" charset="utf-8">
   <link rel="stylesheet" href="/css/master.css" type="text/css" media="screen" title="no title" charset="utf-8">
-  <link rel="stylesheet" href="/css/custom-theme/jquery-ui-1.8.14.custom.css" type="text/css" media="screen" title="no title" charset="utf-8">
-  <script src="/js/jquery-1.5.1.min.js" type="text/javascript" charset="utf-8"></script>
-  <script src="/js/jquery-ui-1.8.14.custom.min.js" type="text/javascript" charset="utf-8"></script>
+  <link rel="stylesheet" href="/css/custom-theme/jquery-ui-1.14.1.min.css" type="text/css" media="screen" title="no title" charset="utf-8">
+  <link rel="stylesheet" href="/css/custom-theme/jquery-ui-dul-theme-shim.css" type="text/css" media="screen" title="no title" charset="utf-8">  <script src="/js/jquery-1.5.1.min.js" type="text/javascript" charset="utf-8"></script>
+  <script src="/js/jquery-3.7.1.min.js" type="text/javascript" charset="utf-8"></script>
+  <script src="/js/jquery-migrate-3.5.2.min.js" type="text/javascript" charset="utf-8"></script>
+  <script src="/js/jquery-ui-1.14.1.min.js" type="text/javascript" charset="utf-8"></script>
   <script src="/js/init.js" type="text/javascript" charset="utf-8"></script>
   <script>
     var _paq = window._paq = window._paq || [];
@@ -148,8 +150,16 @@ <h3 id="about-hdr">About:</h3>
     </div>
   </div>
   <script type="text/javascript" charset="utf-8">
-    jQuery("#searchbutton").button();
-    jQuery("#editorbutton").button();
+    // Over the years jquery ui moved from more explict classes
+    // to pseudo classes but we're still using some of the old classes
+    const buttonOptions = {
+      classes: {
+        "ui-button": "ui-state-default"
+      }
+    };
+
+    $("#searchbutton").button(buttonOptions);
+    $("#editorbutton").button(buttonOptions);
   </script>
 </body>
 </html>