Newer
Older
istex-api-demo / index.html
<!DOCTYPE html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
  <!--<![endif]-->

  <head lang="fr">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>ISTEX - Demonstrateur</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="js/vendor/jsonview/jquery.jsonview.css">
    <link rel="stylesheet" href="//cdn.jsdelivr.net/qtip2/2.2.1/jquery.qtip.css">
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
    <link rel="stylesheet" href="css/main.min.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>

  </head>

  <body ng-app="istexApp" ng-controller="istexAppCtrl">
    <!--[if lt IE 7]>
              <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
                  your browser</a> to improve your experience.</p>
    <![endif]-->

    <div class="container">
      <div id="topHeader"></div>
      <div id="header" class="istex-header jumbotron">
        <h1>&nbsp;</h1>
      </div>
      <div id="searchHeader">
        <div class="row">
          <div class="col-xs-4">

            <button class="btn btn-info dropdown-toggle" data-toggle="modal" data-target="#helpMenu">
              Aide
            </button>
            <!-- Modal aide -->
            <div class="modal fade" id="helpMenu" tabindex="-1" role="dialog" aria-labelledby="helpLabel" aria-hidden="true">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <button class="close" data-dismiss="modal" type="button">
                      <span aria-hidden="true">&times;</span>
                      <span class="sr-only">Fermer</span>
                    </button>
                    <h4 class="modal-title text-center" id="helpLabel">
                      <strong>Bienvenue</strong> sur le démonstrateur de l'API
                      <strong>ISTEX</strong>!
                    </h4>
                  </div>
                  <div class="modal-body">
                    <p class="text-justify">Avant toute chose, ce site ne constitue pas une portail sur l'API. Il s'agit ici de montrer les différents aspects de l'API ISTEX. Le corps du site peut cependant être matière de base à la construction d'un portail. Le code sera bientôt disponible publiquement.</p>
                    <br>
                    <u>Pour effectuer une recherche :</u>
                    <br>
                    <br>
                    <img src="img/help/help1.png" class="img-responsive center-block" alt="">
                    <p class="text-justify">Entrer votre requête simplement dans le champs "Titre ou mot clef". La recherche se lance dès que ce champ est renseigné. Vous pouvez également sélectionner "Recherche avancée" pour mieux préciser votre recherche. Il est dans ce cas nécessaire de cliquer sur l'icone en forme de loupe pour démarrer la recherche.</p>
                    <br>
                    <u>Pour comprendre comment ces résultats sont obtenus :</u>
                    <br>
                    <br>
                    <img src="img/help/help2.png" class="img-responsive center-block" alt="">
                    <p class="text-justify">Une fois la requête effectuée, il est possible de consulter la réponse brute fournie par l'API en cliquant sur le bouton correspondant. La requête envoyée est également visible à gauche du bouton précédent.</p>
                    <br>
                    <p class="text-justify">Pour toute aide supplémentaire ou suggestion, vous pouvez nous écrire à istex@inist.fr (lien disponible en bas de page).</p>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
                  </div>
                </div>
              </div>
            </div>

          </div>

          <div class="col-xs-4">
            <div id="searchFieldRow">

              <div class="row">
                <div class="col-xs-12">
                  <form role="form" class="form-inline" id="searchform">
                    <div data-toggle="istex-tooltip" class="form-group">
                      <div class="input-group">
                        <input type="text" class="form-control" id="searchField" placeholder="Titre ou mot clef" ng-model="searchfield" ng-change="search()">
                        <span class="input-group-btn">
                          <button id="searchButton" type="submit" class="btn" data-loading-text='<img src="img/loading.gif" class="loading" id="loading"/>'>
                            <span class="glyphicon glyphicon-search"></span>
                          </button>
                        </span>
                      </div>
                    </div>
                    <div class="istex-tooltip">
                      <h5>Mot clef</h5>
                      <p>Ce champ permet la recherche d'un ou plusieurs mot(s) clef(s). Cette recherche peut être affinée grâce aux options de recherche avancées et aux facettes.</p>
                      <div class="references">
                        <h6>
                          <span class="label label-istex-documentation">ISTEX API Documentation:</span>
                        </h6>
                        <ul>
                          <li>
                            <a class="link-external" target="_blank" href="{{ app.apiUrl}}/documentation/300-search.html#syntaxe-des-requ-tes">
                              Syntaxe des requêtes
                            </a>
                          </li>
                          <li>
                            <a  class="link-external" target="_blank" href="{{ app.apiUrl}}/documentation/300-search.html#recherche-de-documents">
                              Recherche de documents
                            </a>
                          </li>
                        </ul>
                      </div>
                      <div data-ng-if="helper.searchKeys.query">
                        <hr>
                        <p>Morceau de la requête généré par le champ: </p>
                        <p class="query-chunk">
                          <mark data-ng-bind="helper.searchKeys.query"></mark>
                        </p>
                      </div>
                    </div>
                  </form>
                </div>
              </div>

              <div class="row">
                <div class="col-xs-12">
                  <div id="advancedSearchTitle" class="panel-heading row col-xs-6 col-xs-offset-3">
                    <h4 class="panel-title">
                      <a data-toggle="collapse" data-parent="#accordion" href="#advancedSearchPanel">
                        Recherche avancée
                      </a>
                    </h4>
                  </div>
                </div>
              </div>

              <div class="row">
                <div class="col-xs-12">
                  <div id="advancedSearchPanel" class="panel-collapse collapse">
                    <div class="panel-body">
                      <div class="row">
                        <form role="form" id="advancedSearchForm" class="clearfix">
                          <div data-toggle="istex-tooltip" class="form-group col-xs-6">
                            <label for="editorField">Éditeur :</label>
                            <select id="editorField" class="form-control">
                              <option value="-1">Tous</option>
                            </select>
                          </div>
                          <div class="istex-tooltip" data-my-position="right middle" data-at-position="left middle">
                            <h5>Éditeur</h5>
                            <p>Cette facette permet de préciser <strong>un unique</strong> <b class="text-primary">corpus éditeur</b> sur lequel va porter la requête.</p>
                            <div class="references">
                              <h6>
                                <span class="label label-istex-documentation">ISTEX API Documentation:</span>
                              </h6>
                              <ul>
                                <li>
                                  <a class="link-external" target="_blank" href="{{ app.apiUrl}}/documentation/300-search.html#recherche-par-corpus">
                                    Recherche par corpus
                                  </a>
                                </li>
                                <li>
                                  <a class="link-external" target="_blank" href="{{ app.apiUrl}}/documentation/300-search.html#facettes">
                                    Facettes
                                  </a>
                                </li>
                                <li>
                                  <a class="link-external" target="_blank" href="{{ app.apiUrl}}/corpus/">
                                    Liste des éditeurs disponible via l'API
                                  </a>
                                </li>
                              </ul>
                            </div>
                            <div data-ng-if="helper.corpus.query">
                              <hr>
                              <h6 class="h5">Morceau de la requête généré par la facette: </h6>
                              <p class="query-chunk">
                                <mark data-ng-bind="helper.corpus.query"></mark>
                              </p>
                            </div>
                          </div>
                          <div class="form-group col-xs-6" data-toggle="istex-tooltip">
                            <label for="titleField">Titre :</label>
                            <input type="text" class="form-control" id="titleField" placeholder="Titre">
                          </div>
                          <div class="istex-tooltip" data-my-position="left middle" data-at-position="right middle">
                            <h5>Titre</h5>
                            <p>Ce champ permet la recherche sur le titre.</p>
                            <div class="references">
                              <h6>
                                <span class="label label-istex-documentation">ISTEX API Documentation:</span>
                              </h6>
                              <ul>
                                <li>
                                  <a class="link-external" target="_blank" href="{{ app.apiUrl}}/documentation/300-search.html#syntaxe-des-requ-tes">
                                    Syntaxe des requêtes
                                  </a>
                                </li>
                                <li>
                                  <a class="link-external" target="_blank" href="{{ app.apiUrl}}/documentation/300-search.html#recherche-de-documents">
                                    Recherche de documents
                                  </a>
                                </li>
                              </ul>
                            </div>
                            <div data-ng-if="helper.title.query">
                              <hr>
                              <p>Morceau de la requête généré par le champ: </p>
                              <p class="query-chunk">
                                <mark data-ng-bind="helper.title.query"></mark>
                              </p>
                            </div>
                          </div>
                          <div data-toggle="istex-tooltip" class="form-group col-xs-6">
                            <label for="authorField">Auteur :</label>
                            <input type="text" class="form-control" id="authorField" placeholder="Auteur">
                          </div>
                          <div class="istex-tooltip" data-my-position="right middle" data-at-position="left middle">
                            <h5>Éditeur</h5>
                            <p>Cette facette permet de préciser un auteur sur lequel va porter la requête.</p>
                            <div class="references">
                              <h6>
                                <span class="label label-istex-documentation">ISTEX API Documentation:</span>
                              </h6>
                              <ul>
                                <li>
                                  <a class="link-external" target="_blank" href="{{ app.apiUrl}}/documentation/300-search.html#recherche-par-auteur">
                                    Recherche par auteur
                                  </a>
                                </li>
                              </ul>
                            </div>
                            <div data-ng-if="helper.author.query">
                              <hr>
                              <h6 class="h5">Morceau de la requête généré par le champ: </h6>
                              <p class="query-chunk">
                                <mark data-ng-bind="helper.author.query"></mark>
                              </p>
                            </div>
                          </div>
                          <div class="form-group col-xs-6" data-toggle="istex-tooltip">
                            <label for="themeField">Mot clef :</label>
                            <input type="text" class="form-control" id="themeField" placeholder="Mot clef">
                          </div>
                          <div class="istex-tooltip" data-my-position="left middle" data-at-position="right middle">
                            <h5>Mot clef/sujet</h5>
                            <p>Ce champ permet de préciser un sujet sur lequel va porter la requête.</p>
                            <div class="references">
                              <h6>
                                <span class="label label-istex-documentation">ISTEX API Documentation:</span>
                              </h6>
                              <ul>
                                <li>
                                  <a class="link-external" target="_blank" href="{{ app.apiUrl}}/documentation/300-search.html#recherche-par-sujet">
                                    Recherche par sujet
                                  </a>
                                </li>
                              </ul>
                            </div>
                            <div data-ng-if="helper.subject.query">
                              <hr>
                              <h6 class="h5">Morceau de la requête généré par le champ: </h6>
                              <p class="query-chunk">
                                <mark data-ng-bind="helper.subject.query"></mark>
                              </p>
                            </div>
                          </div>
                          <button class="hidden" type="submit"></button>
                        </form>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

            </div>
            <!--#searchFieldRow-->
          </div>
        </div>
        <div class="row">
          <div class="col-xs-12">
            <hr>
          </div>
        </div>
      </div>
      <!--#searchHeader-->


      <div id="result" class="hide">

        <div class="row">
          <div class="col-xs-12">
            <div class="input-group" data-toggle="istex-tooltip">
              <span class="input-group-addon">Requête</span>
              <input id="reqForApi" class="form-control" type="text" placeholder="Requete">

              <span class="input-group-btn">
                <button class="btn btn-info" data-toggle="modal" data-target="#completeResponse">
                  Réponse brute complète
                </button>
              </span>
            </div>
            <div id="request-tooltip" class="istex-tooltip" data-my-position="bottom center" data-at-position="top center">
              <h5>Requête</h5>
              <hr>
              <div id="request-tooltip-content"></div>
            </div>
          </div>
        </div>
        <!-- Modal réponse complète -->
        <div class="modal fade" id="completeResponse" tabindex="-1" role="dialog" aria-labelledby="responseLabel" aria-hidden="true">
          <div class="modal-dialog modal-lg">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                  <span aria-hidden="true">&times;</span>
                  <span class="sr-only">Fermer</span>
                </button>
                <h4 class="modal-title" id="responseLabel">Réponse brute complète de l'API</h4>
              </div>
              <div class="modal-body">
                <div id="jsonFromApi"></div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
              </div>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-xs-3">

            <h6 class="clearfix">
              <span class="glyphicon glyphicon-search"></span>&nbsp;Affiner les résultats
              <button class="js-resetFacet btn btn-warning btn-xs glyphicon-flip-horizontal glyphicon glyphicon-refresh pull-right" type="button" title="Remettre les facette à zéro"></button>
            </h6>

            <div class="panel-group" id="accordion-facets" role="tablist" aria-multiselectable="true">

              <div class="panel panel-primary" data-toggle="istex-tooltip" data-content-text="div.istex-tooltip">
                <div class="panel-heading" role="tab" id="headingOne">
                  <h4 class="panel-title">
                    <a role="button" data-toggle="collapse" data-parent="#accordion-facets" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                      Corpus </a>
                    <span id="nbCorpusFacet" class="badge pull-right"></span>
                  </h4>
                </div>
                <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                  <div class="panel-body">
                    <div id="facetCorpus">
                    </div>
                  </div>
                </div>
                <div class="istex-tooltip">
                  <h5>Corpus</h5>
                  <p>Cette facette permet de préciser le <b class="text-primary">corpus éditeur</b> sur lequel porte la requête.</p>
                  <p class="alert alert-info"><i class="glyphicon glyphicon-info-sign" aria-hidden="true"></i> Les choix proposés par les facettes dépendent de vos critères de recherche et de recherche avancée</p>
                  <div class="references">
                    <h6>
                      <span class="label label-istex-documentation">ISTEX API Documentation:</span>
                    </h6>
                    <ul>
                      <li>
                        <a class="link-external" target="_blank" href="{{ app.apiUrl}}/documentation/300-search.html#recherche-par-corpus">
                          Recherche par corpus
                        </a>
                      </li>
                      <li>
                        <a class="link-external" target="_blank" href="{{ app.apiUrl}}/documentation/300-search.html#facettes">
                          Facettes
                        </a>
                      </li>
                      <li>
                        <a class="link-external" target="_blank" href="{{ app.apiUrl}}/corpus/">
                          Liste des éditeurs disponible via l'API
                        </a>
                      </li>
                    </ul>
                  </div>
                  <div data-ng-if="helper.corpus.query">
                    <hr>
                    <h6 class="h5">Morceau de la requête généré par la facette: </h6>
                    <p class="query-chunk">
                      <mark data-ng-bind="helper.corpus.query"></mark>
                    </p>
                  </div>
                </div>
              </div>


              <div data-toggle="istex-tooltip" class="panel panel-primary" data-content-text="div.istex-tooltip">
                <div class="panel-heading" role="tab" id="headingTwo">
                  <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion-facets" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                      Copyright
                    </a>
                  </h4>
                </div>
                <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                  <div class="panel-body">
                    <div class="col-xs-12">
                      <label for="amountCopyrightDate" class="col-xs-5">Entre :</label>
                      <input type="text" id="amountCopyrightDate" readonly class="col-xs-7 amount">
                    </div>
                    <div id="slider-range-copyright" class="panel-collapse collapse in col-xs-12"></div>
                  </div>
                </div>
                <div class="istex-tooltip">
                  <h5>Copyright</h5>
                  <p>Cette facette permet de préciser la <b class="text-primary">période de copyright</b> sur laquelle porte la requête.</p>
                  <p class="alert alert-info"><i class="glyphicon glyphicon-info-sign" aria-hidden="true"></i> Les choix proposés par les facettes dépendent de vos critères de recherche et de recherche avancée</p>
                  <div class="references">
                    <h6>
                      <span class="label label-istex-documentation">ISTEX API Documentation:</span>
                    </h6>
                    <ul>
                      <li>
                        <a class="link-external" target="_blank" href="{{ app.apiUrl}}/documentation/300-search.html#facettes">
                          Facettes
                        </a>
                      </li>
                    </ul>
                  </div>
                  <div data-ng-if="helper.copyrightDate.query">
                    <hr>
                    <h6 class="h5">Morceau de la requête généré par la facette: </h6>
                    <p class="query-chunk">
                      <mark data-ng-bind="helper.copyrightDate.query"></mark>
                    </p>
                  </div>
                </div>
              </div>


              <div data-toggle="istex-tooltip" class="panel panel-primary" data-content-text="div.istex-tooltip">
                <div class="panel-heading" role="tab" id="headingThree">
                  <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion-facets" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                      Publication
                    </a>
                  </h4>
                </div>
                <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                  <div class="panel-body">
                    <div class="col-xs-12">
                      <label for="amountPubDate" class="col-xs-5">Entre :</label>
                      <input type="text" id="amountPubDate" readonly class="col-xs-7 amount">
                    </div>
                    <div id="slider-range-pubdate" class="panel-collapse collapse in col-xs-12"></div>
                  </div>
                </div>
                <div class="istex-tooltip">
                  <h5>Publication</h5>
                  <p>Cette facette permet de préciser la <b class="text-primary">période de publication</b> sur laquelle porte la requête.</p>
                  <p class="alert alert-info"><i class="glyphicon glyphicon-info-sign" aria-hidden="true"></i> Les choix proposés par les facettes dépendent de vos critères de recherche et de recherche avancée</p>
                  <div class="references">
                    <h6>
                      <span class="label label-istex-documentation">ISTEX API Documentation:</span>
                    </h6>
                    <ul>
                      <li>
                        <a class="link-external" target="_blank" href="{{ app.apiUrl}}/documentation/300-search.html#facettes">
                          Facettes
                        </a>
                      </li>
                    </ul>
                  </div>
                  <div data-ng-if="helper.pubDate.query">
                    <hr>
                    <h6 class="h5">Morceau de la requête généré par la facette: </h6>
                    <p class="query-chunk">
                      <mark data-ng-bind="helper.pubDate.query"></mark>
                    </p>
                  </div>
                </div>
              </div>

              <div data-toggle="istex-tooltip" class="panel panel-primary" data-content-text="div.istex-tooltip">
                <div class="panel-heading" role="tab" id="headingSix">
                  <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion-facets" href="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
                      Langue(s)
                    </a>
                    <span id="nbLangFacet" class="badge pull-right"></span>
                  </h4>
                </div>
                <div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSix">
                  <div class="panel-body">
                    <div id="facetLang">
                    </div>
                  </div>
                </div>
                <div class="istex-tooltip">
                  <h5>Langue(s)</h5>
                  <p>Cette facette permet de préciser la <b class="text-primary">langue du document</b> sur laquelle porte la requête.</p>
                  <p class="alert alert-info"><i class="glyphicon glyphicon-info-sign" aria-hidden="true"></i> Les choix proposés par les facettes dépendent de vos critères de recherche et de recherche avancée</p>
                  <div class="references">
                    <h6>
                      <span class="label label-istex-documentation">ISTEX API Documentation:</span>
                    </h6>
                    <ul>
                      <li>
                        <a class="link-external" target="_blank" href="{{ app.apiUrl}}/documentation/300-search.html#facettes">
                          Facettes
                        </a>
                      </li>
                    </ul>
                  </div>
                  <div data-ng-if="helper.lang.query">
                    <hr>
                    <h6 class="h5">Morceau de la requête généré par la facette: </h6>
                    <p class="query-chunk">
                      <mark data-ng-bind="helper.lang.query"></mark>
                    </p>
                  </div>
                </div>
              </div>

              <div data-toggle="istex-tooltip" class="panel panel-primary" data-content-text="div.istex-tooltip">
                <div class="panel-heading" role="tab" id="headingFive">
                  <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion-facets" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
                      Catégorie(s) WOS
                    </a>
                    <span id="nbWOSFacet" class="badge pull-right"></span>
                  </h4>
                </div>
                <div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
                  <div class="panel-body">
                    <div id="facetWos">
                    </div>
                  </div>
                </div>
                <div class="istex-tooltip">
                  <h5>Catégorie(s) WOS</h5>
                  <p>Cette facette permet de préciser la <b class="text-primary">catégorie Web Of Science (WOS)</b> sur laquelle porte la requête.</p>
                  <p class="alert alert-info"><i class="glyphicon glyphicon-info-sign" aria-hidden="true"></i> Les choix proposés par les facettes dépendent de vos critères de recherche et de recherche avancée</p>
                  <div class="references">
                    <h6>
                      <span class="label label-istex-documentation">ISTEX API Documentation:</span>
                    </h6>
                    <ul>
                      <li>
                        <a class="link-external" target="_blank" href="{{ app.apiUrl}}/documentation/300-search.html#facettes">
                          Facettes
                        </a>
                      </li>
                    </ul>
                    <h6>
                      <span class="label label-istex-documentation">Liens externes:</span>
                    </h6>
                    <ul>
                      <li>
                        <a class="link-external" target="_blank" href="http://thomsonreuters.com/thomson-reuters-web-of-science/">
                          Site officiel du Web Of Science
                        </a>
                      </li>
                      <li>
                        <a class="link-external" target="_blank" href="https://fr.wikipedia.org/wiki/Web_of_Science">
                          Web Of Science sur Wikipédia
                        </a>
                      </li>
                    </ul>
                  </div>
                  <div data-ng-if="helper.WOS.query">
                    <hr>
                    <h6 class="h5">Morceau de la requête généré par la facette: </h6>
                    <p class="query-chunk">
                      <mark data-ng-bind="helper.WOS.query"></mark>
                    </p>
                  </div>
                </div>
              </div>

              <div data-toggle="istex-tooltip" class="panel panel-primary" data-content-text="div.istex-tooltip">
                <div class="panel-heading" role="tab" id="headingFour">
                  <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion-facets" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
                      Qualité
                    </a>
                  </h4>
                </div>
                <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
                  <div class="panel-body">
                    <div class="panel panel-info">
                      <div class="panel-heading">Score</div>
                      <div class="panel-body">
                        <label for="amountScore" class="col-xs-5">Entre :</label>
                        <input type="text" id="amountScore" readonly class="col-xs-7 amount">
                        <div id="slider-range-score" class="panel-collapse collapse in col-xs-12"></div>
                      </div>
                    </div>

                    <div class="panel panel-info">
                      <div class="panel-heading">Nombre de mots</div>
                      <div class="panel-body">
                        <label for="amountPDFWordCount" class="col-xs-5">Entre :</label>
                        <input type="text" id="amountPDFWordCount" readonly class="col-xs-7 amount">
                        <div id="slider-range-PDFWordCount" class="panel-collapse collapse in col-xs-12"></div>
                      </div>
                    </div>

                    <div class="panel panel-info">
                      <div class="panel-heading">Nombre de caractères</div>
                      <div class="panel-body">
                        <label for="amountPDFCharCount" class="col-xs-5">Entre :</label>
                        <input type="text" id="amountPDFCharCount" readonly class="col-xs-7 amount">
                        <div id="slider-range-PDFCharCount" class="panel-collapse collapse in col-xs-12"></div>
                      </div>
                    </div>

                    <div class="panel panel-info">
                      <div class="panel-heading">Version du PDF</div>
                      <div class="panel-body">
                        <div id="facetPDFVersion">
                        </div>
                      </div>
                    </div>

                    <div class="panel panel-info">
                      <div class="panel-heading">Références citées natives</div>
                      <div class="panel-body" style="padding-left:0;">
                        <div id="facetRefBibsNative">
                        </div>
                      </div>
                    </div>

                  </div>
                </div>
                <div class="istex-tooltip">
                  <h5>Qualité</h5>
                  <p>Cet ensemble de facettes permet de préciser la <b class="text-primary">qualité du document</b> souhaitée sur laquelle porte la requête. La qualité porte sur le nombre de mots et de caractères dans le texte, ou sur la version du PDF proposé par l'éditeur.</p>
                  <p class="alert alert-info"><i class="glyphicon glyphicon-info-sign" aria-hidden="true"></i> Les choix proposés par les facettes dépendent de vos critères de recherche et de recherche avancée</p>
                  <div class="references">
                    <h6>
                      <span class="label label-istex-documentation">ISTEX API Documentation:</span>
                    </h6>
                    <ul>
                      <li>
                        <a class="link-external" target="_blank" href="{{ app.apiUrl}}/documentation/300-search.html#facettes">
                          Facettes
                        </a>
                      </li>
                    </ul>
                  </div>
                  <div data-ng-if="helper.score.query">
                    <hr>
                    <h6 class="h5">Morceau de la requête généré par la facette: </h6>
                    <p class="query-chunk">
                      <mark class="" data-ng-bind="helper.quality.query"></mark>
                    </p>
                  </div>
                </div>
              </div>

            </div>
            <!--.panel-group-->
          </div>
          <!--.col-xs-3-->




          <div class="col-xs-9">
            <div id="topResultPager" class="pager-placeholder"></div>
            <table class="table table-striped table-hover" data-toggle="istex-tooltip" data-tooltip-target=".requestTimeDisplay" style="table-layout: fixed; word-wrap: break-word;">
              <thead>
                <tr class="row">
                  <th class="col-xs-12 text-left">
                    <span class="requestTimeDisplay ">
                      Résultats obtenus :
                      <input type="text" id="totalResults" readonly style="border:0; text-align: center; width: 80px"><i>en</i>
                      <input type="text" id="totalms" readonly style="border:0; text-align: center; width: 40px"> ms
                    </span>
                  </th>
                </tr>
              </thead>
              <tbody id="tableResult"></tbody>
            </table>
            <div class="istex-tooltip" data-my-position="bottom center" data-at-position="top center">
              <h5>Stats</h5>
              <p>Des <b class="text-primary">statistiques</b> sur le resultat de la requête à l'API Istex peuvent êtres obtenus.</p>
              <div>
                <hr>
                <h6 class="h5">Morceau de la requête: </h6>
                <p class="query-chunk">
                  <mark class="bg-stats">&amp;stats</mark>
                </p>
              </div>
            </div>
            <div class="pager-placeholder"></div>
          </div>
        </div>

        <hr>
      </div><!--#result-->


      <div id="footer">
        <div class="row">

          <div class="col-xs-5">
            Site officiel du projet :
            <a target="_blank" href="http://www.istex.fr">www.istex.fr</a>
          </div>

          <div class="col-xs-2" id="logoIA">
            <img src="./img/Label-IA-mini.jpg" alt="">
          </div>

          <div class="col-xs-5">Pour toute suggestion, vous pouvez nous
            <a target="_blank" href="mailto:istex@inist.fr">écrire ici</a>
            <div class="small">
              Favicon réalisé par <a href="http://www.freepik.com" title="Freepik">Freepik</a> sous licence <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0">CC BY 3.0</a>
            </div>
          </div>
        </div>

        <!--[if IE]>
          <div class="row" style='margin-top:15px;'>
            Ce démonstrateur a été optimisé pour <b>Mozilla Firefox</b> et <b>Google Chrome</b>, la compatibilité <b>Internet Explorer</b> ne peut être garantie.
          </div>
          <![endif]-->
      </div>
    </div>

    <div id="pager-prototype" class="text-center">
      <div class="istex-pager hide" role="group">
        <nav class="btn-group ">
          <a data-toggle="istex-tooltip"  href="#" class="first btn btn-primary">&#8676;</a>
          <div class="istex-tooltip" data-my-position="right center" data-at-position="left center">
            <h5>Première page</h5>
            <p>Le lien <b class="text-primary">firstPageURI</b> dans la réponse de l'API permet d'accéder à la première page des résultats de la requête : firstPageURI:<b class="js-firstPageURI"></b>
            </p>
          </div>
          <a data-toggle="istex-tooltip"  href="#" class="prev btn btn-primary">&#8672;</a>
          <div class="istex-tooltip" data-my-position="bottom center" data-at-position="top center">
            <h5>Page précédente</h5>
            <p>Le lien <b class="text-primary">prevPageURI</b> dans la réponse de l'API permet d'accéder à la page précédente des résultats de la requête : prevPageURI:<b class="js-prevPageURI"></b>
            </p>
          </div>
          <a data-toggle="istex-tooltip" href="#" class="next btn btn-primary">&#8674;</a>
          <div class="istex-tooltip" data-my-position="bottom center" data-at-position="top center">
            <h5>Page suivante</h5>
            <p>Le lien <b class="text-primary">nextPageURI</b> dans la réponse de l'API permet d'accéder à la page suivante des résultats de la requête : nextPageURI:<b class="js-nextPageURI"></b>
            </p>
          </div>
          <a data-toggle="istex-tooltip"  href="#" class="last btn btn-primary">&#8677;</a>
          <div class="istex-tooltip" data-my-position="bottom center" data-at-position="top center">
            <h5>Dernière page</h5>
            <p>Le lien <b class="text-primary">lastPageURI</b> dans la réponse de l'API permet d'accéder à la dernière page des résultats de la requête : lastPageURI:<b class="js-lastPageURI"></b>
            </p>
          </div>
        </nav>
        <div class="page">
          <span class="current">*</span>/
          <span class="total">*</span>
        </div>
      </div>
    </div>

    <script src="//cdn.jsdelivr.net/qtip2/2.2.1/jquery.qtip.min.js"></script>
    <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/vendor/jsonview/jquery.jsonview.js"></script>
    <script type="text/javascript" src="js/vendor/noty/packaged/jquery.noty.packaged.min.js"></script>
    <script type="text/javascript" src="js/vendor/jquery-jsonp/src/jquery.jsonp.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.dotdotdot/1.7.3/jquery.dotdotdot.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.20/require.min.js"></script>
    <script src="js/plugins.js"></script>
    <script src="js/main.js"></script>
  </body>
</html>