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>
    <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">

    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
    <link rel="stylesheet/less" type="text/css" href="css/main.less">

    <script src="js/vendor/modernizr-2.6.2.min.js"></script>
    <script src="js/vendor/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="header" class="istex-header jumbotron row">
            <h1>&nbsp;</h1>
        </div>

        <div id="searchHeader" class="col-md-12">
            <div class="col-md-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 type="button" class="close" data-dismiss="modal">
                                    <span aria-hidden="true">&times;</span>
                                    <span class="sr-only">Fermer</span>
                                </button>
                                <h4 class="modal-title text-center">
                                    <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" />
                                <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" />
                                <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-md-4">
                <div id="searchFieldRow" class="row">
                    <form role="form" class="form-inline" id="searchform">
                        <div 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>
                    </form>
                </div>

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

                <div class="row">
                    <div id="collapse" class="panel-collapse collapse">
                        <div class="panel-body">
                            <form role="form" id="advancedSearchForm">
                                <div class="form-group col-md-6">
                                    <label for="editorField">Editeur :</label>
                                    <select id="editorField" class="form-control">
                                        <option value="-1">All</option>
                                    </select>
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="titleField">Titre :</label>
                                    <input type="text" class="form-control" id="titleField" placeholder="Titre">
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="authorField">Auteur :</label>
                                    <input type="text" class="form-control" id="authorField" placeholder="Auteur">
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="themeField">Mot-clef :</label>
                                    <input type="text" class="form-control" id="themeField" placeholder="Mot clef">
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-12">
            <hr>
        </div>

        <div id="result" class="row hide col-md-12">

            <div class="input-group">
                <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>

            <!-- 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">
                            <pre id="jsonFromApi"></pre>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-3">
                <h6>
                    <span class="glyphicon glyphicon-search"></span>
                    Affiner les résultats
                </h6>

                <div class="panel-group" id="accordeon">

                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a data-parent="#accordeon" href="#collapseOne"> Corpus </a>
                                <span id="nbCorpusFacet" class="badge pull-right"></span>
                            </h4>
                        </div>
                        <div id="collapseOne" class="panel-collapse collapse in">
                            <div class="panel-body">
                                <div id="facetCorpus">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a data-parent="#accordeon" href="#collapseTwo"> Date de copyright </a>
                            </h4>
                        </div>
                        <div id="collapseTwo" class="panel-collapse collapse in">
                            <div class="panel-body">
                                <p>
                                    <label for="amountCopyrightDate">Entre :</label>
                                    <input type="text" id="amountCopyrightDate" readonly style="border:0;">
                                </p>
                                <div id="slider-range-copyright" class="panel-collapse collapse in"></div>
                                <div>
                                    <p>
                                        <input type="text" id="totalCopyrightDate" readonly style="border:0; text-align: right;" class="col-md-6">
                                        <p class="col-md-6" style="padding-left: 0;">document(s)</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a data-parent="#accordeon" href="#collapseThree"> Date de publication </a>
                            </h4>
                        </div>
                        <div id="collapseThree" class="panel-collapse collapse in">
                            <div class="panel-body">
                                <p>
                                    <label for="amountPubDate">Entre :</label>
                                    <input type="text" id="amountPubDate" readonly style="border:0;">
                                </p>
                                <div id="slider-range-pubdate" class="panel-collapse collapse in"></div>
                                <div>
                                    <p>
                                        <input type="text" id="totalPubDate" readonly style="border:0; text-align: right;" class="col-md-6">
                                        <p class="col-md-6" style="padding-left: 0;">document(s)</p>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <div class="col-md-9">
                <table class="table table-striped table-hover" style="table-layout: fixed; word-wrap: break-word;">
                    <thead>
                        <tr class="row">
                            <th class="col-md-12" style='text-align:left;'>Résultats obtenus :
                                <input type="text" id="totalResults" readonly style="border:0; text-align: left;">
                            </th>
                        </tr>
                    </thead>
                    <tbody id="tableResult"></tbody>
                </table>
            </div>
        </div>

        <div id="paginRow" class="row hide">
            <ul id="pagination" class="pager">
                <li id="first"><a href="#">&#8676;</a>
                </li>
                <li id="prev"><a href="#">&#8672;</a>
                </li>
                <li id="next"><a href="#">&#8674;</a>
                </li>
                <li id="last"><a href="#">&#8677;</a>
                </li>
            </ul>
        </div>

        <div id="pageNumber" class="row hide">
            <span id=currentPage>*</span>/
            <span id=totalPages>*</span>
        </div>

        <div class="col-md-12">
            <hr>
        </div>

        <div id="footer">
            <div class="col-md-5">Site officiel du projet :
                <a target="_blank" href="http://www.istex.fr">www.istex.fr</a>
            </div>
            <div class="col-md-2" id="logoIA">
                <img src="./img/Label-IA-mini.jpg">
            </div>
            <div class="col-md-5">Pour toute suggestion, vous pouvez nous
                <a target="_blank" href="mailto:istex@inist.fr">écrire ici</a>
            </div>
            <div>Icône faite 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>

    <script type="text/javascript" src="js/vendor/less-1.6.3.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.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/require.js"></script>
    <script src="js/plugins.js"></script>
    <script src="js/main.js"></script>
</body>

</html>