Merge branch '5.0' into 'master'

Initial conversion from 4.1 to 5.0

See merge request iim/UNL_Search!9

.gitignore

@@ -9,3 +9,5 @@
 /.buildpath
 /vendor
 /tmp
+.DS_Store
+.idea

Gruntfile.js

 var every = require('lodash/collection/every');
 var fs = require('fs');
+const sass = require('node-sass');
 
 module.exports = function (grunt) {
   var lessDir = 'www/less';
   var lessVendorDir = lessDir + '/lib';
+  var sassDir = 'www/scss';
+//   var sassVendorDir = sassDir + '/mixins';
   var cssDir = 'www/css';
   var jsDir = 'www/js';
 
@@ -26,11 +29,28 @@ module.exports = function (grunt) {
     return fs.existsSync(lessVendorDir + '/' + value);
   });
 
+// TODO: Import DCF and UNLedu 5.0 mixins and variables
+//   var dcfMixinLibBaseUrl = 'https://raw.githubusercontent.com/d-c-n/dcf/master/assets/dist/scss/mixins/';
+//   var dcfMixins = [
+//     '_mixins.backgrounds.scss',
+//     '_mixins.margins.scss',
+//     '_mixins.padding.scss',
+//     '_mixins.typography.scss'
+//   ];
+//   var allMixinsExist = every(dcfMixins, function(value) {
+//     return fs.existsSync(sassVendorDir + '/' + value);
+//   });
+
   var lessFiles = {};
   cssFiles.forEach(function(file) {
     lessFiles[cssDir + '/' + file + '.css'] = lessDir + '/' + file + '.less';
   });
 
+  var sassFiles = {};
+  cssFiles.forEach(function(file) {
+    sassFiles[cssDir + '/' + file + '-5.0.css'] = sassDir + '/' + file + '.scss';
+  });
+
   var builtJsFiles = {};
   builtJsFiles[jsDir + '/search.min.js'] = jsFiles;
 
@@ -41,6 +61,7 @@ module.exports = function (grunt) {
   require('load-grunt-tasks')(grunt);
 
   grunt.initConfig({
+
     'curl-dir': {
       'less-libs': {
         src: wdnMixins.map(function(file) {
@@ -48,19 +69,54 @@ module.exports = function (grunt) {
         }),
         dest: lessVendorDir
       }
+//       'dcf-mixins': {
+//         src: dcfMixins.map(function(file) {
+//           return dcfMixinLibBaseUrl + file;
+//         }),
+//         dest: sassVendorDir
+//       }
+      // TODO: add UNLedu 5.0 mixins
     },
+
     less: {
       all: {
+        files: lessFiles,
         options: {
           paths: [lessDir],
           plugins: [
             autoprefixPlugin,
             cleanCssPlugin
           ]
+        }
+      }
+    },
+
+    sass: {
+			all: {
+				files: sassFiles,
+				options: {
+          implementation: sass,
+					sourceMap: true
+// 					includePaths: [
+// 						__dirname+'/node_modules/modularscale-sass/stylesheets'
+// 					]
+				}
+			},
+    },
+
+		postcss: {
+			options: {
+				processors: [
+					require('autoprefixer'),
+					require('cssnano')() // TODO: advanced config of cssnano
+				],
+				map: true
 			},
-          files: lessFiles
+			dist: {
+				src: cssDir + '/*.css'
 			}
 		},
+
     uglify: {
       options: {
         sourceMap: true
@@ -69,6 +125,7 @@ module.exports = function (grunt) {
         files: builtJsFiles
       }
     },
+
     requirejs: {
       all: {
         options: {
@@ -98,20 +155,29 @@ module.exports = function (grunt) {
         }
       }
     },
+
     clean: {
-      css: Object.keys(lessFiles).concat(lessVendorDir),
+      lessCss: Object.keys(lessFiles).concat(lessVendorDir),
+//       css: Object.keys(sassFiles).concat(sassVendorDir),
+      sassCss: Object.keys(sassFiles),
       js: Object.keys(builtJsFiles).concat(jsDir + '/**/*.map')
     },
+
     watch: {
       less: {
         files: lessDir + '/**/*.less',
         tasks: ['less']
+      },
+      sass: {
+        files: sassDir + '/**/*.scss',
+        tasks: ['sass', 'postcss']
       }
     }
+
   });
 
   // establish grunt default
-  var defaultTasks = ['less', 'uglify', 'requirejs'];
+  var defaultTasks = ['sass', 'postcss', 'uglify', 'requirejs'];
   var localTasks = defaultTasks.slice();
   if (!allMixinsExist) {
     defaultTasks.unshift('curl-dir');

package.json

@@ -4,17 +4,22 @@
   "description": "A web application for searching UNL websites via Google Custom Search.",
   "dependencies": {},
   "devDependencies": {
-    "grunt": "^0.4.5",
-    "grunt-contrib-clean": "^0.6.0",
-    "grunt-contrib-less": "^1.0.1",
-    "grunt-contrib-requirejs": "^0.4.4",
+    "autoprefixer": "^9.1.1",
+    "cssnano": "^4.0.5",
+    "grunt": "^1.0.3",
+    "grunt-contrib-clean": "^1.1.0",
+    "grunt-contrib-less": "^2.0.0",
+    "grunt-contrib-requirejs": "^1.0.0",
     "grunt-contrib-uglify": "^0.9.2",
-    "grunt-contrib-watch": "^0.6.1",
+    "grunt-contrib-watch": "^1.1.0",
     "grunt-curl": "^2.2.0",
-    "less-plugin-autoprefix": "^1.4.2",
+    "grunt-postcss": "^0.9.0",
+    "grunt-sass": "^3.0.1",
+    "less-plugin-autoprefix": "^2.0.0",
     "less-plugin-clean-css": "^1.5.1",
     "load-grunt-tasks": "^3.2.0",
-    "lodash": "^3.10.1"
+    "lodash": "^3.10.1",
+    "node-sass": "^4.9.3"
   },
   "scripts": {},
   "repository": {

www/index.php

@@ -11,6 +11,17 @@ require_once $config_file;
 
 use UNL\Templates\Templates;
 
+$isEmbed = isset($_GET['embed']) && $_GET['embed'];
+
+// While the site proper is skinned with a specific version, the templates used
+// used in embed search need to be supported in legacy sites.
+// ?embed=1 : 4.1
+// ?embed=5.0 : 5.0
+$templatePath = 'templates/4.1/';
+if ($isEmbed && $_GET['embed'] === '5.0') {
+  $templatePath = 'templates/5.0/';
+}
+
 function renderTemplate($file, $params = array())
 {
     ob_start();
@@ -23,7 +34,7 @@ function loadDefaultSections($page)
 {
     $page->titlegraphic = 'UNL Search';
     $page->breadcrumbs = str_replace('Department', 'Search', $page->breadcrumbs);
-    $page->navlinks = file_get_contents('http://www.unl.edu/ucomm/sharedcode/navigation.html');
+    $page->navlinks = file_get_contents('https://www.unl.edu/ucomm/sharedcode/navigation.html');
     $page->contactinfo = renderTemplate('templates/local-footer.tpl.php');
     $page->affiliation = '';
 
@@ -31,8 +42,6 @@ function loadDefaultSections($page)
     $page->navlinks = UNL_Search::removeRelativePaths($page->navlinks, 'https://www.unl.edu/');
 }
 
-$isEmbed = isset($_GET['embed']) && $_GET['embed'];
-
 $localScriptUrl = './js/search.min.js?v=4.1.20';
 $pageTemplate = 'Fixed';
 
@@ -52,13 +61,16 @@ if (!$isEmbed) {
     $page->head = '<link rel="home" href="./" />';
     $page->pagetitle = '';
     $page->breadcrumbs = renderTemplate('templates/breadcrumbs.tpl.php');
+    $page->addStyleSheet('css/search.css?v=20161215');
+}
+
+if ($isEmbed && $_GET['embed'] === '5.0') {
+  $page->addStyleSheet('css/search-5.0.css?v=20180816');
 }
 
 $localResults = '';
 $context = '';
 
-$page->addStyleSheet('css/search.css?v=20161215');
-
 //u is referring site
 if (isset($_GET['u']) && $scanned = UNL_Search::getScannedPage($_GET['u'])) {
     // Add local site search results
@@ -112,7 +124,7 @@ if (isset($_GET['u']) && $scanned = UNL_Search::getScannedPage($_GET['u'])) {
         $context = $_GET['u'];
     }
 
-    $localResults = renderTemplate('templates/google-results.tpl.php', array(
+    $localResults = renderTemplate($templatePath . 'google-results.tpl.php', array(
         'title' => $page->titlegraphic,
         'id' => 'local_results',
     ));
@@ -126,7 +138,7 @@ if (!$isEmbed) {
     $maincontent .= renderTemplate('templates/search-form.tpl.php', array('local_results' => $localResults));
 }
 
-$maincontent .= renderTemplate('templates/search-results.tpl.php', array(
+$maincontent .= renderTemplate($templatePath . 'search-results.tpl.php', array(
     'isEmbed' => $isEmbed,
     'local_results' => $localResults
 ));
@@ -134,7 +146,7 @@ $maincontent .= renderTemplate('templates/search-results.tpl.php', array(
 $initialQuery = json_encode(isset($_GET['q']) ? $_GET['q'] : '');
 $context = json_encode($context);
 
-$maincontent .= renderTemplate('templates/end-scripts.tpl.php', array(
+$maincontent .= renderTemplate($templatePath . 'end-scripts.tpl.php', array(
     'localScriptUrl' => $localScriptUrl,
     'googleLoaderUrl' => 'https://cse.google.com/cse.js?cx=' . $search_engine_id,
     'initialQuery' => $initialQuery,
@@ -147,10 +159,10 @@ if (!$isEmbed) {
     exit;
 }
 
-$template = 'templates/embed.tpl.php';
+$template = $templatePath . 'embed.tpl.php';
 
 if (UNL_Search::$mode === 'debug') {
-    $template = 'templates/embed-debug.tpl.php';
+    $template = $templatePath . 'embed-debug.tpl.php';
 }
 
 echo renderTemplate($template, array(

www/js/search.js

@@ -42,7 +42,7 @@ define(['jquery', 'analytics'], function ($, analytics) {
 	var Directory = function(server, containerId) {
 		var cntSel = '#' + containerId;
 
-		this._server = server || '//directory.unl.edu';
+		this._server = server || 'https://directory.unl.edu';
 		this._cache = new Cache();
 		this._searchCanceled = false;
 		this._viewState = 0;

www/scss/search-google.scss

+// TODO: Import DCF mixins
+// @import "mixins/_mixins.backgrounds.scss";
+// @import "mixins/_mixins.margins.scss";
+// @import "mixins/_mixins.padding.scss";
+// @import "mixins/_mixins.typography.scss";
+
+
+// !UNL Google Search Results Overrides
+.unl .google-results tbody th,
+.unl .google-results tbody td {
+  padding-bottom: 0;
+  padding-top: 0;
+}
+
+.unl .gsc-control-cse {
+//   @include bg-transparent;
+  background-color: transparent;
+  border: 0;
+  font-family: inherit;
+  font-size: inherit;
+  padding: 0;
+}
+
+.unl .cse .gsc-control-cse {
+//   @include bg-transparent;
+  background-color: transparent;
+  border: 0;
+  padding: 0;
+}
+
+.unl .gsc-control-cse .gsc-table-result {
+  font-family: inherit;
+  font-size: inherit;
+}
+
+.unl .gsc-above-wrapper-area {
+  border: 0;
+//   @include mb-7;
+  margin-bottom: 2.37em;
+  padding: 0;
+}
+
+.unl .gsc-result-info {
+//   color: $color-body;
+//   color: ;
+  font-size: inherit;
+  margin: 0;
+  padding: 0;
+}
+
+.unl .gcsc-branding {
+  display: none;
+}
+
+.unl .gsc-webResult .gsc-result {
+  border: 0;
+//   @include pb-6;
+  padding-bottom: 2.37em;
+  padding-top: 0;
+}
+
+.unl .gsc-thumbnail-inside {
+  display: none;
+}
+
+.unl .gsc-thumbnail-left {
+  display: block;
+//   @include mb-1;
+  margin-bottom: .43em;
+}
+
+.unl .gs-snippet {
+//   @include mb-1;
+  margin-bottom: .43em;
+//   @include mt-1;
+  margin-top: .5625em;
+}
+
+.unl .gsc-result .gs-title {
+  height: initial;
+}
+
+// TODO: use line-height crop mixin
+.unl .gsc-result .gs-title::before {
+  content: '';
+  display: block;
+  height: 0;
+  margin-top: -.18em;
+  width: 0;
+}
+
+.unl .gs-result .gs-title,
+.unl .gs-result .gs-title * {
+//   color: $scarlet;
+  color: #d00000;
+  text-decoration: none;
+}
+
+.unl .gsc-control-cse .gs-spelling,
+.unl .gsc-control-cse .gs-result .gs-title,
+.unl .gsc-control-cse .gs-result .gs-title * {
+//   @include lh-3;
+  line-height: 1.125;
+}
+
+.unl .gsc-control-cse .gs-result .gsc-table-cell-snippet-close > .gs-title {
+//   @include txt-h5;
+  font-size: 1.5em;
+  margin-bottom: .18em;
+}
+
+.unl .gsc-control-cse .gs-result .gsc-table-cell-snippet-close > .gs-title * {
+//   @include txt-base;
+  font-size: 1rem;
+}
+
+.unl .gsc-url-top {
+  display: none;
+}
+
+.unl .gsc-control-cse .gs-snippet {
+  color: inherit;
+}
+
+.unl .gsc-thumbnail {
+//   @include pr-5;
+  padding-right: 1em;
+}
+
+.unl .gs-web-image-box,
+.unl .gs-promotion-image-box {
+  padding: 0;
+}
+
+.unl .gs-promotion-image-box img.gs-promotion-image,
+.unl .gs-web-image-box img.gs-image {
+  max-height: none;
+  max-width: 100%;
+}
+
+.unl .gs-image-box.gs-web-image-box.gs-web-image-box-landscape,
+.unl .gs-image-box.gs-web-image-box.gs-web-image-box-portrait {
+//   width: #{ms(10)}rem;
+  width: 4.21em;
+}
+
+.unl .gs-image-box.gs-web-image-box.gs-web-image-box-portrait {
+  height: auto;
+}
+
+// .unl .gs-result img.gs-image,
+// .unl .gs-result img.gs-promotion-image {
+//   border-color: $color-border;
+// }
+
+.unl .gsc-result.gsc-webResult:hover {
+  border: 0;
+}
+
+.unl .gsc-url-bottom {
+  display: block;
+//   @include txt-xs;
+  font-size: .75em;
+}
+
+// .unl .gsc-snippet-metadata,
+// .unl .gsc-role,
+// .unl .gsc-tel,
+// .unl .gsc-org,
+// .unl .gsc-location,
+// .unl .gsc-reviewer,
+// .unl .gsc-author,
+// .unl .gs-result .gs-visibleUrl,
+// .unl .gs-result a.gs-visibleUrl {
+//   color: $color-light-text;
+// }
+
+.unl .gsc-results .gsc-cursor-box {
+//   border-color: $color-border;
+//   @include bt-1;
+  border-top: 1px solid #ccc;
+  margin: 0;
+  padding: 1em 0 0 0; // TODO: use variable or mixin
+}
+
+.unl .gsc-results .gsc-cursor-box .gsc-cursor-page {
+//   color: $scarlet;
+//   color: @scarlet;
+  display: inline-block;
+//   @include p-1;
+  padding: .43em;
+  text-align: center;
+}
+
+.unl .gsc-results .gsc-cursor-box .gsc-cursor-page:not(:last-child) {
+//   @include mr-4;
+  margin-right: 1em;
+
+}
+
+.unl .gsc-results .gsc-cursor-box .gsc-cursor-current-page {
+//   color: $color-body;
+  font-weight: 400;
+  text-decoration: none;
+}
+
+.unl .gsc-snippet-metadata,
+.unl .gsc-role,
+.unl .gsc-tel,
+.unl .gsc-org,
+.unl .gsc-location,
+.unl .gsc-reviewer,
+.unl .gsc-author
+.unl .gs-result a.gs-visibleUrl,
+.unl .gs-result .gs-visibleUrl {
+  color: #6d6d6c; // TODO: replace with color variable
+}
+
+.unl .gs-result a.gs-visibleUrl,
+.unl .gs-result .gs-visibleUrl {
+  padding-bottom: 0;
+}

www/scss/search.scss

+// TODO: Import DCF mixins
+// @import "mixins/_mixins.padding.scss";
+
+
+// Template overrides
+.embed #visitorChat,
+#wdn_search {
+  display: none !important;
+}
+
+
+// TODO: update search form to use app sub-theme
+#searchform {
+  background: #38431b url(../images/050419.jpg) 50% 50% no-repeat;
+  background-size: cover;
+  text-align: center;
+}
+
+#searchform .wdn-input-group {
+  margin: 0 auto;
+  max-width: 30em;
+}
+
+// #search_wrapper {
+// 	display: none;
+// }
+
+.result-tab li + li::before {
+  content: '\b7'; // middle-dot + space
+  padding-left: .43em;
+  padding-right: .43em;
+}
+
+.result-tab li.selected a {
+  color: #2e2e2d;
+}
+
+.search-results {
+  opacity: 0;
+  transition: opacity 400ms;
+}
+
+.search-results.active {
+  opacity: 1;
+}
+
+.search-results h3 {
+  display: none;
+}
+
+.google-search {
+	display: none;
+}
+
+
+// Directory Styles
+// TODO: revisit (and remove?) after Directory has been updated to 5.0
+#ppl_results h3,
+#ppl_results h4,
+#ppl_results .result_head {
+  display: none;
+}
+
+#ppl_results .pfResult {
+  padding: 0;
+  list-style: none;
+}
+
+#ppl_results .ppl_Sresult,
+#ppl_results .dep_result {
+  margin: 1em 0;
+}
+
+#ppl_results .cInfo {
+  display: none;
+}
+
+#ppl_results .overflow {
+  display: flex;
+}
+
+#ppl_results .overflow > .profile_pic {
+  min-width: 40px;
+  margin-right: 1em;
+  width: 40px;
+}
+
+#ppl_results .overflow > .recordDetails {
+  align-self: center;
+  flex: 1 1 auto;
+}
+
+#ppl_results .overflow .photo {
+  border-radius: 50%;
+  height: 40px;
+  margin-top: 0.375em;
+  object-fit: cover;
+  width: 100%;
+}
+
+#ppl_results .overflow .roles {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+#ppl_results .overflow .roles li {
+  margin-bottom: 0.618rem;
+}
+
+#ppl_results .overflow .roles:last-child {
+  margin-bottom: 0;
+}
+
+#ppl_results .overflow .roles .title,
+#ppl_results .overflow .roles .organization-unit {
+  display: block;
+}
+
+#ppl_results .overflow .roles	.organization-name {
+  display: none;
+}
+
+#ppl_results .fn {
+  font-size: 1.128em;
+  font-weight: bold;
+}
+
+#ppl_results .given-name {
+  font-size: 1rem;
+  margin-left: 1em;
+  text-transform: uppercase;
+}
+
+[data-uid="kfarrell2"] .given-name {
+	display: none;
+}

www/templates/search-results.tpl.php → www/templates/4.1/search-results.tpl.php

@@ -17,7 +17,7 @@
                 </div>
                 <div class="search-results">
                 <?php echo $local_results ?>
-                <?php echo renderTemplate('templates/google-results.tpl.php', array(
+                <?php echo renderTemplate('templates/4.1/google-results.tpl.php', array(
                     'title' => 'All of UNL',
                     'id' => 'unl_results',
                 )) ?>

www/templates/5.0/embed-debug.tpl.php

+<!DOCTYPE html>
+<html class="no-js embed" lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="x-ua-compatible" content="ie=edge" />
+  <title>Search | University of Nebraska&ndash;Lincoln</title>
+  <link rel="stylesheet" href="https://cloud.typography.com/7717652/616662/css/fonts.css" />
+  <link rel="stylesheet" href="/wdn/templates_5.0/css/all.css" />
+  <script data-main="js/embed-src/main.js" src="js/embed-src/require.js"></script>
+  <?php echo $head ?>
+</head>
+<body class="unl">
+  <main>
+    <?php echo $maincontent ?>
+  </main>
+</body>
+</html>

www/templates/5.0/embed.tpl.php

+<!DOCTYPE html>
+<html class="no-js embed" lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="x-ua-compatible" content="ie=edge" />
+  <title>Search | University of Nebraska&ndash;Lincoln</title>
+  <link rel="stylesheet" href="https://cloud.typography.com/7717652/616662/css/fonts.css" />
+  <link rel="stylesheet" href="https://unlcms.unl.edu/wdn/templates_5.0/css/all.css" />
+  <script src="js/embed/all.js?v=20170404"></script>
+  <?php echo $head ?>
+</head>
+<body class="unl">
+  <main>
+    <?php echo $maincontent ?>
+  </main>
+</body>
+</html>

www/templates/5.0/end-scripts.tpl.php

+<script>
+require(['jquery', '<?php echo $localScriptUrl ?>'], function($, UNLSearch) {
+    var gSearchDefer = $.Deferred();
+	window.searchInit = function() {
+        window.searchInit = $.noop;
+        gSearchDefer.resolve(google);
+    };
+
+    window.__gcse = {
+      parsetags: 'explicit',
+      callback: window.searchInit
+    };
+
+    $('<script>', {
+        src: '<?php echo $googleLoaderUrl ?>',
+        async: 'async',
+        defer: 'defer',
+        type: 'text/javascript'
+    }).appendTo($('body'));
+
+    var $localCss = $('<link>', {
+        'href': './css/search-google-5.0.css?v=20180816'
+    });
+
+    gSearchDefer.done(function(google) {
+        // ensure this CSS is loaded AFTER google
+        require(['css!' + $localCss[0].href], function() {
+    	   UNLSearch.initialize(<?php echo $initialQuery ?>, <?php echo $localContext ?>)
+        });
+    });
+});
+</script>

www/templates/5.0/google-results.tpl.php

+<?php if (isset($title)): ?>
+<h3><?php echo $title ?> Results</h3>
+<?php endif; ?>
+<div id="<?php echo isset($id) ? $id : '' ?>" class="google-results"></div>

www/templates/5.0/search-results.tpl.php

+<section class="dcf-wrapper dcf-grid dcf-col-gap-vw dcf-pt-9 dcf-txt-xs unl-font-sans unl-search-results" id="search_wrapper">
+
+  <div class="dcf-col-67%-start@sm dcf-col-50%-start@lg results-group" id="search_results">
+    <div class="result-head">
+      <h2>Web Results</h2>
+      <ul class="dcf-d-flex dcf-list-bare result-tab<?php if (empty($local_results)): ?> no-local<?php endif; ?>">
+        <?php if (!empty($local_results)): ?>
+        <li><a href="#">This unit</a></li>
+        <?php endif; ?>
+        <li><a href="#">All of UNL</a></li>
+      </ul>
+    </div>
+    <div class="search-results">
+    <?php echo $local_results ?>
+    <?php echo renderTemplate('templates/5.0/google-results.tpl.php', array(
+      'title' => 'All of UNL',
+      'id' => 'unl_results',
+    )) ?>
+    </div>
+  </div>
+
+  <div class="dcf-col-33%-end@sm dcf-col-50%-end@lg dcf-pb-10 results-group" id="directory_results">
+    <div class="result-head">
+      <h2>Directory Results</h2>
+      <ul class="dcf-d-flex dcf-list-bare result-tab">
+        <li><a href="#">People</a></li>
+        <li><a href="#">Departments</a></li>
+      </ul>
+    </div>
+    <div id="ppl_results" class="search-results"></div>
+  </div>
+
+</section>

www/templates/breadcrumbs.tpl.php

 <ul>
-    <li><a href="http://www.unl.edu/" title="University of Nebraska&ndash;Lincoln">UNL</a></li>
+    <li><a href="https://www.unl.edu/" title="University of Nebraska&ndash;Lincoln">Nebraska</a></li>
     <li>Search</li>
 </ul>