Как использовать секцию поиска CSS / HTML для ссылок в Сайтах Google с помощью скрипта приложений? - PullRequest
Новая
       14

Как использовать секцию поиска CSS / HTML для ссылок в Сайтах Google с помощью скрипта приложений?

0 голосов
/ 30 августа 2018

Мое рабочее место использует сайт Google, и я смог создать раскрывающееся меню CSS для размещения информации о ссылках, как показано ниже: enter image description here

Однако мне было интересно, есть ли способ дать пользователям текстовое поле вверху, которое они могли бы использовать для поиска во всем контейнере быстрее, чем необходимость вручную нажимать на каждый раздел. Что-то вроде того, что есть у W3Schools , но специально для этого контейнера с подразделами в нем.

Буду очень признателен за любую помощь / направление, которое вы можете оказать.

Вот код. GS 

function doGet() {
var result=HtmlService.createTemplateFromFile('TestSidebar').evaluate();
return result;
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}

Вот HTML 

<!DOCTYPE html>
<!-- Notes for whoever looks at this in the future:
HTML/CSS modified in December 2017, taken from https://codepen.io/alexdevero/pen/avKpLX
Groups are in incremental numbers, along with sub-group and sub-sub-group

group-X
sub-group-X
sub-sub-group-X
sub-sub-sub-group-X

Technically, the CSS stylesheet allows for unlimited nesting. However, if more than 4 groups
are needed, then more sub-groups will need to be defined on the stylesheet

Body beautified at https://codebeautify.org/htmlviewer/
-->  


<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CSS sliding multi-level accordion</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,300'>


      <?!= include('Stylesheet'); ?>
</head>

<body>
    <header role="banner">
        <nav class="nav" role="navigation">
            <ul class="nav__list">

                <!-- Forms -->
                <li>
                    <input id="group-Delivery/Tracking" type="checkbox" hidden />
                    <label for="group-Delivery/Tracking">
                        <span class="fa fa-angle-right"></span> Forms

                    </label>
                    <ul class="group-list">
                        <li>
                            <li>
                                <a href="https://www.google.com/forms/about/" target="_blank">Google Forms</a>
                            </li>
                            <li>
                                <a href="https://www.surveymonkey.com/" target="_blank">Survey Monkey</a>
                            </li>
                    </ul>
                    </li>

                    <li>
                    <input id="group-links" type="checkbox" hidden />
                    <label for="group-links">
                        <span class="fa fa-angle-right"></span> Links

                    </label>
                    <ul class="group-list">
                        <li>
                            <li>
                                <a href="https://stackoverflow.com/" target="_blank">Stack Overflow</a>
                            </li>
                            <li>
                                <a href="https://www.google.com/" target="_blank">Google</a>
                            </li>
                    </ul>
                    </li>            
                                        <!-- Final </ul> needed for Nav Pane -->
            </ul>
        </nav>
        <!-- Commenting out; social media links not needed now, but maybe in the future  
<footer><ul class="soc-media"><li><a href="https://twitter.com/alexdevero" target="_blank"><span class="fa fa-twitter"></span></a></li><li><a href="https://www.facebook.com/deveroalex" target="_blank"><span class="fa fa-facebook"></span></a></li><li><a href="https://plus.google.com/+AlexDevero" target="_blank"><span class="fa fa-google-plus"></span></a></li><li><a href="http://blog.alexdevero.com" target="_blank"><span class="fa fa-globe"></span></a></li></ul></footer>
-->
    </header>
</body>
</html>

А вот и CSS (где, я предполагаю, пойдет любое окно поиска?) 

<style>
body {

  vertical-align: true;
  font: 100% "Roboto", "Trebuchet MS", sans-serif;

}

a {
  text-decoration: none;
}

/**
 * Hidden fallback
 */
[hidden] {
  display: none;
  visibility: hidden;
}

/**
 * Styling navigation
 */
header {
  margin-right: auto;
  margin-left: auto;
  vertical-align: true;
  /*max-width: 22.5rem;*/
  -webkit-box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
          box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
}

/**
 * Styling top level items
 */
.nav a,
.nav label {
  display: block;
  padding: .25rem;
  color: #fff;
  font-size: 100%;
  background-color: #012F60;
  vertical-align: true;
  -webkit-box-shadow: inset 0 -1px #1d1d1d;
          box-shadow: inset 0 -1px #1d1d1d;
  -webkit-transition: all .10s ease-in;
  transition: all .10s ease-in;
  border-radius: 0px;
}

.nav a:focus, .nav a:hover,
.nav label:focus,
.nav label:hover {
  color: #012F60;
  background: #DEB01A;
}

.nav label {
  cursor: pointer;
}

/**
 * Styling first level lists items
 */
.group-list a,
.group-list label {
  padding-left: .5rem;
  vertical-align: true;
  font-size: 85%;
  color: #fff;
  background: #8E8E8F;
  -webkit-box-shadow: inset 0 -1px #373737;
          box-shadow: inset 0 -1px #373737;
}

.group-list a:focus, .group-list a:hover,
.group-list label:focus,
.group-list label:hover {
  background: #DEB01A;
}

/**
 * Styling second level list items
 */
.sub-group-list a,
.sub-group-list label {
  padding-left: 1rem;
  background: #012F60;
  color: #fff;
  -webkit-box-shadow: inset 0 -1px #474747;
          box-shadow: inset 0 -1px #474747;
}

.sub-group-list a:focus, .sub-group-list a:hover,
.sub-group-list label:focus,
.sub-group-list label:hover {
  background: #DEB01A;
}

/**
 * Styling third level list items
 */
.sub-sub-group-list a,
.sub-sub-group-list label {
  padding-left: 1.5rem;
  background: #8E8E8F;
  color: #fff;
  -webkit-box-shadow: inset 0 -1px #575757;
          box-shadow: inset 0 -1px #575757;
}

.sub-sub-group-list a:focus, .sub-sub-group-list a:hover,
.sub-sub-group-list label:focus,
.sub-sub-group-list label:hover {
  background: #DEB01A;
}


/**
 * Styling fourth level list items
 */
.sub-sub-sub-group-list a,
.sub-sub-sub-group-list label {
  padding-left: 2rem;
  background: #012F60;
  color: #fff;
  -webkit-box-shadow: inset 0 -1px #474747;
          box-shadow: inset 0 -1px #474747;
}

.sub-sub-sub-group-list a:focus, .sub-sub-group-list a:hover,
.sub-sub-sub-group-list label:focus,
.sub-sub-sub-group-list label:hover {
  background: #DEB01A;
}


/**
 * Hide nested lists
 */
.group-list,
.sub-group-list,
.sub-sub-group-list,
.sub-sub-sub-group-list{
  height: 100%;
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height .25s ease-in-out;
  transition: max-height .25s ease-in-out;
  -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1.0, 1.0);
    transform: translateZ(0);
}

.nav__list input[type=checkbox]:checked + label + ul {
  /* reset the height when checkbox is checked */
  max-height: 1000px;
}

/**
 * Rotating chevron icon
 */
label > span {
  float: +.1rem + left + .1rem;
   vertical-align: true;
  -webkit-transition: -webkit-transform .25s ease;
  transition: -webkit-transform .25s ease;
  transition: transform .25s ease;
  transition: transform .25s ease, -webkit-transform .25s ease;
}

.nav__list input[type=checkbox]:checked + label > span {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

/**
 * Styling footer
 */
footer {
  padding-top: 1rem;
  padding-bottom: 1rem;
  background-color: #050505;
}

.soc-media {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.soc-media li:nth-child(n+2) {
  margin-left: 1rem;
}

.soc-media a {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.65);
  -webkit-transition: color .25s ease-in;
  transition: color .25s ease-in;
}

.soc-media a:focus, .soc-media a:hover {
  color: rgba(255, 255, 255, 0.2);
}
</style>

Спасибо за внимание!

1 Ответ

0 голосов
/ 30 августа 2018

Если вы используете решение, показанное в W3Schools, и просто измените итерацию списка, чтобы включить один дополнительный уровень для своих категорий, то вы должны добиться определенного успеха.

Так что все, что вам нужно сделать, это добавить поле ввода и добавить функцию фильтра в onkeyup. 

<input type="text" onkeyup="filterfunction()"/>

И, например, вы можете взять их функцию фильтра 

function filterFunction() {
    var input, filter, ul, li, a, i;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    div = document.getElementById("myDropdown");
    a = div.getElementsByTagName("a");
    for (i = 0; i < a.length; i++) {
        if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
            a[i].style.display = "";
        } else {
            a[i].style.display = "none";
        }
    }
}

и преобразуйте его во что-то подобное сейчас 

function filterFunction() {
    var input, filter, ul, li, cat, rows, i, j;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    div = document.getElementById("myDropdown");
    cat = div.children;
    for (i = 0; i < cat.length; i++) {
        var displayCat = false;
        rows = cat[i].getElementsByTagName("*");
        for (j = 0; j < rows.length; j++){
            if (rows[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
                rows[i].style.display = "";
                displayCat = true;
            } else {
                rows[i].style.display = "none";
            }
        }
        if(displayCat){
            cat[i].style.display = "";
            //add some code to expand your list automatically
        }else{
            cat[i].style.display = "none";
        }
    }
}

и если вы решите включить дополнительные категории, вы можете упростить весь процесс, изменив его на итерацию дерева.

...