Changeset 31 for trunk/src/ajax


Ignore:
Timestamp:
05/19/09 09:23:26 (16 years ago)
Author:
lgiessmann
Message:

fixed some problems in the json-tmcl module and started to implement the ajax-client

Location:
trunk/src/ajax
Files:
6 added
2 deleted
6 edited
1 moved

Legend:

Unmodified
Added
Removed

  • TabularUnified trunk/src/ajax/css/frame.css

    r26 r31  
    1010/*----------------------------------------------------------------------------*/
    1111
    12 
    13 .topicSummaryTd {
    14     width: 40px;
    15     border: solid 1px gray;
     12ul.fragmentFrame {
     13    list-style-type: none;
    1614}
    1715
    18 #topicTable {
    19     width: 80%;
    20     border: solid 1px gray;
    21     margin-left: auto;
    22     margin-right: auto;
    23     margin-top: 10px;
    24     margin-bottom: 10px;
     16caption {
     17    font-size: 1.5em;
     18    font-weight: bold;
    2519}
    2620
    27 th {
    28     color: red;
    29     border: solid 1px gray;
     21td.controlColumn {
     22    background-color: #eaeaee;
    3023}
    3124
    32 ul.topicTable {
    33     list-style: none;
     25tr.showHiddenRows {
     26    background-color: #eaeaee;
    3427}
    35 
    36 div.naviTopicTable {
    37     width: 80%;
    38     margin-left: auto;
    39     margin-right: auto;
    40 }
    41 
    42 select.topicTable {
    43     margin-left: 20px;
    44 }

  • TabularUnified trunk/src/ajax/css/main.css

    r26 r31  
    1111
    1212
    13 .clickable{
    14     cursor: pointer;
    15     padding-left: 5px;
    16     padding-right: 5px;
     13body {
     14    width: 1024px;
     15    margin-left: auto;
     16    margin-right: auto;
    1717}
    1818
    19 .clickable:hover{
    20     text-decoration: underline;
     19#subPage {
     20    color: #333377;
     21    min-height: 800px;
     22    border-left: 1px solid #d1d1d3;
     23    border-right: 1px solid #d1d1d3;
     24    border-bottom: 1px solid #d1d1d3;
     25    margin-top: -21px;
    2126}
    2227
    23 .clickable:active{
    24     color: red;
     28h1 {
     29    margin-left: 10px;
     30    padding-top: 20px;
    2531}
    2632
    27 .headerRow {
    28     background-color: #EEEEFF;
     33.clickable {
     34    cursor: pointer;
    2935}
    3036
    31 
    32 .topicHeaderRow {
    33     background-color: #CCE5FF;
     37.errorMessage {
     38    color: red;
     39    font-size: 0.85em;
    3440}
    35 
    36 .topicStubsHeaderRow {
    37     background-color: #CCE5FF;
    38 }
    39 
    40 .associationsHeaderRow {
    41     background-color: #CCE5FF;
    42 }
    43 
    44 .tmIdsHeaderRow {
    45     background-color: #CCE5FF;
    46 }
    47 
    48 .frame{
    49     border: 1px outset black;
    50     margin: 5px;
    51 }

  • TabularUnified trunk/src/ajax/css/navi.css

    r26 r31  
    1212
    1313#navi {
    14     border: solid 1px;
    15     margin-top: 10px;
    16     margin-bottom: 10px;
     14    background-color: #aebae3;
     15    width: 1022px;
     16    margin-left: auto;
     17    margin-right: auto;
     18    padding-top: 10px;
     19    padding-bottom: 5px;
     20    border-left: 1px solid #d1d1d3;
     21    border-top: 1px solid #d1d1d3;
     22    border-right: 1px solid #d1d1d3;
    1723}
    1824
    19 .naviElem {
    20     background-color: silver;
     25#navi > span {
     26    color: #fbfcff;
     27    cursor: pointer;
     28    border-left: 1px solid #aebae3;
     29    border-top: 1px solid #aebae3;
     30    border-right: 1px solid #aebae3;
     31    padding-left: 3px;
     32    padding-right: 3px;
     33    padding-top: 3px;
     34    padding-bottom: 5px;
     35    font-weight: bold;
    2136}
     37
     38#navi > span:first-child {
     39    border-left: none;
     40}
     41
     42#navi > span:first-child:hover {
     43    border-left: none;
     44}
     45
     46#navi > span:hover {
     47    color: #333377;
     48    background-color: #fbfcff;
     49    border-left: 1px solid #d1d1d3;
     50    border-top: 1px solid #d1d1d3;
     51    border-right: 1px solid #d1d1d3;
     52}
     53
     54#navi > .isActive {
     55    color: #333377;
     56    background-color: #fbfcff;
     57    border-left: 1px solid #d1d1d3;
     58    border-top: 1px solid #d1d1d3;
     59    border-right: 1px solid #d1d1d3;
     60}
     61
     62#navi > .isActive:hover {
     63    color: #333377;
     64    background-color: #fbfcff;
     65}

  • TabularUnified trunk/src/ajax/isidorus.html

    r27 r31  
    1919    <!-- includes all necessary css-files -->
    2020    <link rel="stylesheet" type="text/css" href="css/main.css"/>
    21     <link rel="stylesheet" type="text/css" href="css/home.css"/>
     21    <link rel="stylesheet" type="text/css" href="css/frame.css"/>
    2222    <link rel="stylesheet" type="text/css" href="css/navi.css"/>
    2323
    … …  
    4646    <!-- includes own javascript files -->
    4747    <script language="JavaScript" type="text/javascript" src="javascripts/constants.js"></script>
    48     <script language="JavaScript" type="text/javascript" src="javascripts/make_fragment_node.js"></script>
    49     <script language="JavaScript" type="text/javascript" src="javascripts/edit_topic.js"></script>
     48    <script language="JavaScript" type="text/javascript" src="javascripts/tmcl_tools.js"></script>
     49    <script language="JavaScript" type="text/javascript" src="javascripts/requests.js"></script>
     50    <script language="JavaScript" type="text/javascript" src="javascripts/datamodel.js"></script>
    5051    <script language="JavaScript" type="text/javascript" src="javascripts/home.js"></script>
     52    <script language="JavaScript" type="text/javascript" src="javascripts/search.js"></script>
     53    <script language="JavaScript" type="text/javascript" src="javascripts/edit.js"></script>
     54    <script language="JavaScript" type="text/javascript" src="javascripts/create.js"></script>
    5155    <script language="JavaScript" type="text/javascript" src="javascripts/navi.js"></script>
    5256  </head>
    … …  
    5559    <div id="page">
    5660      <div id="navi">
    57         <span id="home" class="naviElem clickable">home</span>
    58         <span id="searchTopic" class="naviElem clickable">search topic</span>
    59         <span id="editTopic" class="naviElem clickable">edit topic</span>
    60         <span id="createTopic" class="naviElem clickable">create topic</span>
     61        <span id="home" class="isActive">Home</span>
     62        <span id="searchTopic" class="clickableButton">Search Topics</span>
     63        <span id="editTopic" class="clickableButton">Edit Topics</span>
     64        <span id="createTopic" class="clickableButton">Create Topics</span>
    6165      </div>
    62       <div id="content" style="border: red solid 1px;">
     66      <div id="subPage">
    6367      </div>
    6468    </div>

  • TabularUnified trunk/src/ajax/javascripts/constants.js

    r26 r31  
    1111
    1212
    13 var TIMEOUT = 5000; // const TIMEOUT = 5000 --> "const" doesn't work under IE
     13// --- Some constants fot the http connections via the XMLHttpRequest-Object
     14var TIMEOUT = 10000; // const TIMEOUT = 10000 --> "const" doesn't work under IE
    1415var HOST_PREF = "http://localhost:8000/";
    1516var GET_PREFIX = HOST_PREF + "json/get/";
     17var GET_STUB_PREFIX = HOST_PREF + "json/topicstubs/";
     18var TMCL_TYPE_URL = HOST_PREF + "json/tmcl/type/";
     19var TMCL_INSTANCE_URL = HOST_PREF + "json/tmcl/instance/";
    1620var COMMIT_URL = HOST_PREF + "json/commit/";
    1721var ALL_PSIS_URL = HOST_PREF + "json/psis/";
     22var TYPE_PSIS_URL = HOST_PREF + "json/tmcl/types/";
    1823var OWN_URL = HOST_PREF + "isidorus";
    1924var SUMMARY_URL = HOST_PREF + "json/summary"
    2025
    2126
    22 // --- a kind of enum for the the different pages with an attribute and a value
    23 var PAGES = {"home" : "home", "search" : "searchTopic", "edit" : "editTopic", "create" : "createTopic"};
    2427
    25 // --- contains most css classes used in this project
    26 var CLASSES = {"__addBtnHeader" : "addButton",
    27                "__associationFrame" : "associationFrame",
    28                "__associationsFrame" : "assocaitionsFrame",
    29                "__associationsHeader" : "associationsHeaderRow",
    30                "__button" : "clickable",
    31                "__fragmentFrame" : "fragmentFrame",
    32                "__frame" : "frame",
    33                "__header" : "headerRow",
    34                "__headerTitle" : "title",
    35                "__hideBtnHeader" : "hideButton",
    36                "__inAssociationFrame" : "inAssociationFrame",
    37                "__inNameFrame" : "inNameFrame",
    38                "__inOccurrenceFrame" : "inOccurrenceFrame",
    39                "__inRoleFrame" : "inRoleFrame",
    40                "__instanceOfFrame" : "instanceOf",
    41                "__inTopicFrame" : "inTopicFrame",
    42                "__inTopicStubFrame" : "inTopicStubFrame",
    43                "__inVariantFrame" : "inVariantFrame",
    44                "__itemIdentityFrame" : "itemIdentity",
    45                "__listFrame" : "listFrame",
    46                "__nameFrame" : "nameFrame",
    47                "__namesFrame" : "namesFrame",
    48                "__occurrenceFrame" : "occurrenceFrame",
    49                "__occurrencesFrame" : "occurrencesFrame",
    50                "__playerFrame" : "playerFrame",
    51                "__removeBtnHeader" : "removeButton",
    52                "__removeBtnRow" : "rowDel",
    53                "__resourceFrame" : "resourceFrame",
    54                "__roleFrame" : "roleFrame",
    55                "__rolesFrame" : "roleFrame",
    56                "__row" : "row",
    57                "__scopeFrame" : "scopeFrame",
    58                "__subjectIdentifierFrame" : "subjectIdentifier",
    59                "__subjectLocatorFrame" : "subjectLocator",
    60                "__textareaRow" : "rowTextArea",
    61                "__textRow" : "rowTextfield",
    62                "__tmIdsFrame" : "tmIdsFrame",
    63                "__tmIdsHeader" : "tmIdsHeaderRow",
    64                "__topicFrame" : "topicFrame",
    65                "__topicHeader" : "topicHeaderRow",
    66                "__topicIdFrame" : "topicId",
    67                "__topicStubFrame" : "topicStubFrame",
    68                "__topicStubsHeader" : "topicStubsHeaderRow",
    69                "__topicStubsFrame" : "topicStubsFrame",
    70                "__typeFrame" : "typeFrame",
    71                "__valueFrame" : "valueFrame",
    72                "__variantFrame" : "variantFrame",
    73                "__variantHeader" : "variantHeaderRow",
    74                "__variantsFrame" : "variantsFrame",
     28// --- A kind of enum for the the different pages with an attribute and a value
     29var PAGES = {"home" : "home", "search" : "searchTopic", "edit" : "editTopic", "create" : "createTopic", "current" : ""};
    7530
    76                "addBtnHeader" : function(){ return this.__button + " " + this.__addBtnHeader; },
    77                "associationFrame" : function(){ return this.__frame + " " + this.__associationFrame; },
    78                "associationsFrame" : function(){ return this.__frame + " " + this.__associationsFrame; },
    79                "associationsHeader" : function(){ return this.__associationsHeader; },
    80                "button" : function(){ this.__button; },
    81                "fragmentFrame" : function(){ return this.__frame + " " + this.__fragmentFrame; },
    82                "frame" : function(){ return this.__frame; },
    83                "header" : function(){ return this.__header; },
    84                "headerTitle" : function(){ return this.__headerTitle; },
    85                "hideBtnHeader" : function(){ return this.__button + " " + this.__hideBtnHeader; },
    86                "inAssociationFrame" : function(){ return this.__inAssociationFrame; },
    87                "inNameFrame" : function(){ return this.__inNameFrame; },
    88                "inOccurrenceFrame" : function(){ return this.__inOccurrenceFrame; },
    89                "inRoleFrame" : function(){ return this.__inRoleFrame; },
    90                "instanceOfFrame" : function(){ return this.__instanceOfFrame; },
    91                "inTopicFrame" : function(){ return this.__inTopicFrame; },
    92                "inTopicStubFrame" : function(){ return this.__inTopicStubFrame; },
    93                "inVariantFrame" : function(){ return this.__inVariantFrame; },
    94                "itemIdentityFrame" : function(){ return this.__itemIdentityFrame; },
    95                "listFrame" : function(){ return this.__frame + " " + this.__listFrame; },
    96                "nameFrame" : function(){ return this.__frame + " " + this.__nameFrame; },
    97                "namesFrame" : function(){ return this.__frame + " " + this.__namesFrame; },
    98                "occurrenceFrame" : function(){ return this.__frame + " " + this.__occurrenceFrame; },
    99                "occurrencesFrame" : function(){ return this.__frame + " " + this.__occurrencesFrame; },
    100                "playerFrame" : function(){ return this.__playerFrame; },
    101                "removeBtnHeader" : function(){ return this.__button + " " + this.__removeBtnHeader; },
    102                "removeBtnRow" : function(){ return this.__button + " " + this.__removeBtnRow; },
    103                "roleFrame" : function(){ return this.__frame + " " + this.__roleFrame; },
    104                "rolesFrame" : function(){ return this.__frame + " " + this.__rolesFrame; },
    105                "row" : function(){ return this.__row; },
    106                "scopeFrame" : function(){ return this.__scopeFrame; },
    107                "resourceFrame" : function(){ return this.__frame + " " + this.__resourceFrame; },
    108                "subjectIdentifierFrame" : function(){ return this.__subjectIdentifierFrame; },
    109                "subjectLocatorFrame" : function(){ return this.__subjectLocatorFrame; },
    110                "textareaRow" : function(){ return this.__textareaRow; },
    111                "textRow" : function(){ return this.__textRow; },
    112                "tmIdsFrame" : function(){ return this.__frame + " " + this.__tmIdsFrame; },
    113                "tmIdsHeader" : function(){ return this.__tmIdsHeader; },
    114                "topicFrame" : function(){ return this.__frame + " " + this.__topicFrame; },
    115                "topicHeader" : function(){ return this.__topicHeader; },
    116                "topicIdFrame" : function(){ return this.__topicIdFrame; },
    117                "topicStubFrame" : function(){ return this.__frame + " " + this.__topicStubFrame; },
    118                "topicStubsHeader" : function(){ return this.__topicStubsHeader; },
    119                "topicStubsFrame" : function(){ return this.__frame + " " + this.__topicStubsFrame; },
    120                "typeFrame" : function(){ return this.__typeFrame; },
    121                "valueFrame" : function(){ return this.__valueFrame; },
    122                "variantFrame" : function(){ return this.__frame + " " + this.__variantFrame; },
    123                "variantHeader" : function(){ return this.__variantHeader; },
    124                "variantsFrame" : function(){ return this.__frame + " " + this.__variantsFrame; }
     31var ANY_URI = "http://www.w3.org/2001/XMLSchema#anyURI";
     32var STRING = "http://www.w3.org/2001/XMLSchema#string";
     33
     34// --- Contains most css classes used in this project
     35// --- There should be called only the function to be sure to don't override
     36// --- the original values.
     37var CLASSES = {"__divPage__" : "page",
     38               "__divSubPage__" : "subPage",
     39               "__divContent__" : "content",
     40               "__divTextrowWithRemoveButton__" : "textrowWithRemoveButton",
     41               "__divTextrowWithoutRemoveButton__" : "textrowWithoutRemoveButton",
     42               "__divSelectrowWithRemoveButton__" : "selectrowWithRemoveButton",
     43               "__divSelectrowWithoutRemoveButton__" : "selectrowWithoutRemoveButton",
     44               "__spanClickable__" : "clickable",
     45               "__notVisible__" : "notvisible",
     46               "__divError__" : "errorMessage",
     47               "__ulFragmentFrame__" : "fragmentFrame",
     48               "__tableTopicFrame__" : "topicFrame",
     49               "__trTopicIdFrame__" : "topicIdFrame",
     50               "__tdContent__" : "content",
     51               "__tdDescription__" : "description",
     52               "__divInstanceOfFrame__" : "instanceOfFrame",
     53               "__divItemIdentityFrame__" : "itemIdentityFrame",
     54               "__divSubjectLocatorFrame__" : "subjectLocatorFrame",
     55               "__divSubjectIdentifierFrame__" : "subjectIdentifierFrame",
     56               "__divNameContainer__" : "nameContainer",
     57               "__divNameFrame__" : "nameFrame",
     58               "__trControlColumn__" : "controlColumn",
     59               "__trShowHiddenRows__" : "showHiddenRows",
     60               "__trTypeFrame__" : "typeFrame",
     61               "__divScopeFrame__" : "scopeFrame",
     62               "__divValueFrame__" : "valueFrame",
     63               "__divVariantFrame__" : "variantFrame",
     64               "__divVariantContainer__" : "variantContainer",
     65               "__divDatatypeFrame__" : "datatypeFrame",
     66
     67               "page" : function(){ return this.__divPage__; },
     68               "subPage" : function(){ return this.__divSubPage__; },
     69               "content" : function(){ return this.__divContent__; },
     70               "textrowWithRemoveButton" : function(){ return this.__divTextrowWithRemoveButton__; },
     71               "textrowWithoutRemoveButton" : function(){ return this.__divTextrowWithoutRemoveButton__; },
     72               "selectrowWithRemoveButton" : function(){ return this.__divSelectrowWithRemoveButton__; },
     73               "selectrowWithoutRemoveButton" : function(){ return this.__divSelectrowWithoutRemoveButton__; },
     74               "clickable" : function(){ return this.__spanClickable__; },
     75               "notVisible" : function(){ return this.__notVisible__; },
     76               "error" : function(){ return this.__divError__; },              "fragmentFrame" : function(){ return this.__ulFragmentFrame__; },
     77               "topicFrame" : function(){ return this.__tableTopicFrame__; },
     78               "topicIdFrame" : function(){ return this.__trTopicIdFrame__; },
     79               "content" : function(){ return this.__tdContent__; },
     80               "description" : function(){ return this.__tdDescription__; },
     81               "instanceOfFrame" : function(){ return this.__divInstanceOfFrame__; },
     82               "itemIdentityFrame" : function(){ return this.__divItemIdentityFrame__; },
     83               "subjectLocatorFrame" : function(){ return this.__divSubjectLocatorFrame__; },
     84               "subjectIdentifierFrame" : function(){ return this.__divSubjectIdentifierFrame__; },
     85               "nameContainer" : function(){ return this.__divNameContainer__; },
     86               "nameFrame" : function(){ return this.__divNameFrame__; },
     87               "controlColumn" : function(){ return this.__trControlColumn__; },
     88               "showHiddenRows" : function(){ return this.__trShowHiddenRows__; },
     89               "typeFrame" : function(){ return this.__trTypeFrame__; },
     90               "scopeFrame" : function(){ return this.__divScopeFrame__; },
     91               "valueFrame" : function(){ return this.__divValueFrame__; },
     92               "variantFrame" : function(){ return this.__divVariantFrame__; },
     93               "variantContainer" : function(){ return this.__divVariantContainer__; },
     94               "datatypeFrame" : function(){ return this.__divDatatypeFrame__; }
    12595              };

  • TabularUnified trunk/src/ajax/javascripts/home.js

    r26 r31  
    1111
    1212
    13 // --- with this object there will be set the first and last index of topics to get by the ajax request
    14 // --- further this object handles out of range violations and some other site effects, e.g.
    15 // --- topicsPerPage === -1 -> show all topics, ...
    16 var __idx = {"firstIdx" : 0, "lastIdx" : 10, "lastDirectionForward" : true, "topicsPerPage" : 10, "outOfRange" : false,
    17              "topicPerPageVals" : ["5", "10", "15", "25", "50", "100", "200", "300", "All"],
    18              "getTopicPerPageVals" : function(){ return this.topicPerPageVals; },
    19              "getFirstIdx" : function(){ return this.firstIdx; },
    20              "setFirstIdx" : function(x) { if(typeof(x) === "number" && x >= 0) this.firstIdx = x; },
    21              "getLastIdx" : function(){ return this.lastIdx; },
    22              "setLastIdx" : function(x) { if(typeof(x) === "number" && x >= 0) this.lastIdx = x; },
    23              "getLastDirectionForward" : function() { return this.lastDirectionForward; },
    24              "setLastDirectionForward" : function(x) { if(typeof(x) === "boolean") this.lastDirectionForward = x; },
    25              "getTopicsPerPage" : function() {return (this.topicsPerPage === -1 ? "nil" : this.topicsPerPage); },
    26              "getTopicsPerPageAsNumber" : function(){ return this.topicsPerPage; },
    27              "setTopicsPerPage" : function(x) {
    28                  if(typeof(x) === "number" && x > 0){
    29                      this.topicsPerPage = x;
    30                      this.lastIdx = this.firstIdx + this.topicsPerPage;
    31                  }
    32                  else if(typeof(x) === "number" && x === -1){
    33                      this.topicsPerPage = x;
    34                      this.lastIdx = "nil";
    35                  }
    36              },
    37              "getOutOfRange" : function() { return this.outOfRange; },
    38              "setOutOfRange" : function(x){ if(typeof(x) === "boolean") this.outOfRange = x;  },
    39              "next" : function() {
    40                  if(this.outOfRange) return;
    41                  this.firstIdx += this.topicsPerPage;
    42                  if(this.topicsPerPage !== -1){ this.lastIdx = this.firstIdx + this.topicsPerPage; }
    43                  else { this.lastIdx = "nil"; }
    44                  this.lastDirectionForward = true;
    45              },
    46              "prev" : function() {
    47                  if(this.topicsPerPage !== -1){
    48                      this.firstIdx -= this.topicsPerPage;
    49                      if(this.firstIdx < 0)this.firstIdx = 0;
    50                      this.lastIdx = this.firstIdx + this.topicsPerPage;
    51                  }
    52                  else {
    53                      this.firstIdx = 0;
    54                      this.lastIdx = "nil";
    55                  }
    56                  this.lastDirectionForward = false;
    57              }
    58             };
    59 
    60 
    61 
    62 // --- creates a html table with the id "tableId" and appends it on the element with the id
    63 // --- "parentId", if the variable next ist set to true there will be shown the next
    64 // --- topics otherwise the previous topics
    65 // --- the table looks like the following schema:
    66 // --- itemIdentity | subjectLocator | subjectIdentifier | instanceOf | name | occurrence
    67 function makeHome(parentId, tableId, next)
     13function makeHome()
    6814{
    69     // --- create the ajax-request handlers ------------------------------------
    70     function onSuccessHandler(xhr)
    71     {
    72         // --- creates the navigation div-element with a forward-, backward- button and a
    73         // --- selection box where the user can choose the amount of topics per page
    74         function createTableNavi(top)
    75         {
    76             // --- creates the backwards and forwards buttons, if they don't exist
    77             if(($("naviDivTop") === null && top === true) || ($("naviDivBottom") === null && top === false) && $(parentId)){
    78                 var div = new Element("div", {"id" : (top ? "naviDivTop" : "naviDivBottom"), "class" : "naviTopicTable " + PAGES.home});
    79                 var lftBtn = new Element("input", {"type" : "button", "id" : (top ? "topicTableLftBtnTop" : "topicTableLftBtnBottom")});
    80                 var rgtBtn = new Element("input", {"type" : "button", "id" : (top ? "topicTableRgtBtnTop" : "topicTableRgtBtnBottom")});
    81                 lftBtn.value = "<<";
    82                 rgtBtn.value = ">>";
    83                 rgtBtn.setStyle({"float" : "right"});
    84                 lftBtn.setStyle({"float" : "left"});
    85                 div.insert(lftBtn, {"position" : "top"});
    86                 div.insert(rgtBtn, {"position" : "bottom"});
    87                 $("content").insert(div, {"position" : "top"});
    88                
    89                 rgtBtn.observe("click", function(event)
    90                                {
    91                                    __idx.next();
    92                                    makeHome(parentId, tableId, true);
    93                                });
    94                 lftBtn.observe("click", function(event)
    95                                {
    96                                    __idx.prev();
    97                                    makeHome(parentId, tableId, false);
    98                                });
    99 
    100                 var select = new Element("select", {"id" : (top === true ? "topicTableSelectTop" : "topicTableSelectBottom"), "class" : "topicTable"});
    101                 var selectValues = __idx.getTopicPerPageVals();
    102                 var selectInnerHTML = "";
    103                 selectValues.each(function(value, idx)
    104                                   {
    105                                       var numberValue = value;
    106                                       numberValue = (numberValue === "All" ? "-1" : numberValue);
    107                                       if(Number(numberValue) !== __idx.getTopicsPerPageAsNumber()){
    108                                           select.insert(new Element("option", {"value" : numberValue}).update(value), {"position" : "bottom"});
    109                                       }
    110                                       else {
    111                                           select.insert(new Element("option", {"value" : numberValue, "selected" : "selected"}).update(value), {"position" : "bottom"});
    112                                       }
    113                                   });
    114                 div.insert(select, {"position" : "content"});
    115 
    116                 select.observe("change", function(event)
    117                                {
    118                                    __idx.setTopicsPerPage(Number(event.element().value));
    119                                    makeHome(parentId, tableId, true);
    120                                });
    121             }
    122         }
    123 
    124 
    125         try {
    126             var topicSummaries = xhr.responseText.evalJSON();
    127             // --- inserts or updates the topic table if there is some json data or
    128             // --- if there isn't a table yet
    129             if(topicSummaries !== null || $(tableId) === null){
    130                 // --- removes the old table - if there exists an element with the id "tableId"
    131                 if($(tableId) !== null)$(tableId).remove();
    132                 if($("naviDivTop") !== null)$("naviDivTop").remove();
    133                 if($("naviDivBottom") !== null)$("naviDivBottom").remove();
    134                
    135                 createTableNavi(true);
    136 
    137                 // --- creates the html table
    138                 var topicTable = new Element("table", {"id" : "topicTable", "class" : PAGES.home});
    139                
    140                 // --- creates the header row
    141                 var header = new Element("tr");
    142                 header.insert(new Element("th", {"id" : "itemIdentityTh"}).update("itemIdentity"), {"position" : "bottom"});
    143                 header.insert(new Element("th", {"id" : "subjectLocatorTh"}).update("subjectLocator"), {"position" : "bottom"});
    144                 header.insert(new Element("th", {"id" : "subjectIdentifierTh"}).update("subjectIdentifier"), {"position" : "bottom"});
    145                 header.insert(new Element("th", {"id" : "instanceOfTh"}).update("instanceOf"), {"position" : "bottom"});
    146                 header.insert(new Element("th", {"id" : "nameTh"}).update("name"), {"position" : "bottom"});
    147                 header.insert(new Element("th", {"id" : "occurrenceTh"}).update("occurrence"), {"position" : "bottom"});
    148                 topicTable.insert(header, {"position" : "top"});
    149                
    150                 // --- creates the topic summary data of the json object
    151                 if(topicSummaries !== null){
    152                     topicSummaries.each(function(topicSummary, idx)
    153                                         {
    154                                             var tr = new Element("tr");
    155 
    156                                                                                    
    157                                             var itemIdentity = new Element("td", {"class" : "topicSummaryTd"});
    158                                             var ul = new Element("ul", {"class" : "topicTable"});
    159                                             itemIdentity.insert(ul, {"position" : "top"});
    160                                             if(topicSummary.itemIdentities){
    161                                                 topicSummary.itemIdentities.each(function(itemIdentityJ, innerIdx)
    162                                                                                  {
    163                                                                                      ul.insert(new Element("li").update(itemIdentityJ), {"position" : "bottom"});
    164                                                                                  });
    165                                             }
    166                                            
    167                                             var subjectLocator = new Element("td", {"class" : "topicSummaryTd"});
    168                                             ul = new Element("ul", {"class" : "topicTable"});
    169                                             subjectLocator.insert(ul, {"position" : "top"});
    170                                             if(topicSummary.subjectLocators){
    171                                                 topicSummary.subjectLocators.each(function(subjectLocatorJ, innerIdx)
    172                                                                                   {
    173                                                                                       ul.insert(new Element("li").update(subjectLocatorJ), {"position" : "bottom"});
    174                                                                                   });               
    175                                             }
    176 
    177                                             var subjectIdentifier = new Element("td", {"class" : "topicSummaryTd"});
    178                                             ul = new Element("ul", {"class" : "topicTable"});
    179                                             subjectIdentifier.insert(ul, {"position" : "top"});
    180                                             if(topicSummary.subjectIdentifiers){
    181                                                 topicSummary.subjectIdentifiers.each(function(subjectIdentifierJ, innerIdx)
    182                                                                                      {
    183                                                                                          var li = new Element("li", {"class" : "clickable"}).update(subjectIdentifierJ);
    184                                                                                          ul.insert(li, {"position" : "bottom"});
    185                                                                                          li.observe("click", function(event)
    186                                                                                                     {
    187                                                                                                         var node = event.element();
    188                                                                                                         makePage(PAGES.edit, node.textContent);
    189                                                                                                     });
    190                                                                                      });
    191                                             }
    192                                            
    193                                             var instanceOf = new Element("td", {"class" : "topicSummaryTd"});
    194                                             ul = new Element("ul", {"class" : "topicTable"});
    195                                                 instanceOf.insert(ul, {"position" : "top"});
    196                                             if(topicSummary.instanceOfs){
    197                                                 topicSummary.instanceOfs.each(function(instanceOfJ, innerIdx)
    198                                                                               {
    199                                                                                   if(instanceOfJ){
    200                                                                                           instanceOfJ.each(function(psi, psiIdx)
    201                                                                                                           {
    202                                                                                                               ul.insert(new Element("li").update(psi), {"position" : "top"});
    203                                                                                                           });
    204                                                                                   }
    205                                                                               });
    206                                             }
    207 
    208                                             var name = new Element("td", {"class" : "topicSummaryTd"});
    209                                             ul = new Element("ul", {"class" : "topicTable"});
    210                                             name.insert(ul, {"position" : "top"});
    211                                             if(topicSummary.names){
    212                                                 topicSummary.names.each(function(nameJ, innerIdx)
    213                                                                         {
    214                                                                             ul.insert(new Element("li").update(nameJ), {"position" : "top"});
    215                                                                         });
    216                                             }
    217 
    218                                             var occurrence = new Element("td", {"class" : "topicSummaryTd"});
    219                                             ul = new Element("ul", {"class" : "topicTable"});
    220                                             occurrence.insert(ul, {"position" : "top"});
    221                                             if(topicSummary.occurrences){
    222                                                 topicSummary.occurrences.each(function(occurrenceJ, innerIdx)
    223                                                                               {
    224                                                                                   ul.insert(new Element("li").update(occurrenceJ), {"position" : "top"});
    225                                                                               });
    226                                             }
    227 
    228                                             tr.insert(itemIdentity, {"position" : "bottom"});
    229                                             tr.insert(subjectLocator, {"position" : "bottom"});
    230                                             tr.insert(subjectIdentifier, {"position" : "bottom"});
    231                                             tr.insert(instanceOf, {"position" : "bottom"});
    232                                             tr.insert(name, {"position" : "bottom"});
    233                                             tr.insert(occurrence, {"position" : "bottom"});
    234 
    235                                             topicTable.insert(tr, {"position" : "bottom"});                                         
    236                                         });
    237                 }
    238             }
    239 
    240             // --- there was no data received or not all requested
    241             // --- so it's not allowed to increment the indices of the requested topics
    242             if(topicSummaries === null || topicSummaries.length != __idx.getTopicsPerPage()){
    243                 __idx.setOutOfRange(true);
    244             }
    245             else {
    246                 __idx.setOutOfRange(false);
    247             }
    248 
    249             // --- inserts the table in the parent element
    250             if($(parentId)){
    251                 $(parentId).insert(topicTable, {"position" : "top"});
    252             }
    253             createTableNavi(false);
    254         }
    255         catch(err){
    256             window.alert("got bad json data from: " + SUMMARY_URL + "\n\n" + err);
    257         }
    258     }
    259 
    260 
    261     function onFailureHandler(xhr)
    262     {
    263         window.alert("something went wrong ...\n" + xhr.status + ": " + xhr.statusText);
    264     }
    265 
    266 
    267     // --- the real ajax request
    268     new Ajax.Request(SUMMARY_URL,
    269                      {"method" : "get",
    270                       "onSuccess" : onSuccessHandler,
    271                       "onFailure" : onFailureHandler,
    272                       "parameters" : {"start" : __idx.getFirstIdx(), "end" : __idx.getLastIdx()}
    273                      });
     15    var content = new Element("div", {"class" : CLASSES.content()});
     16    var header = new Element("h1").update("Topic Map Overview");
     17    $(CLASSES.subPage()).insert((content.insert(header, {"position" : "bottom"})), {"position" : "bottom"});
    27418}

  • TabularUnified trunk/src/ajax/javascripts/navi.js

    r26 r31  
    1414function addHandlersToNavi()
    1515{
    16     $(PAGES.home).observe("click", function(){ makePage(PAGES.home, ""); });
    17     $(PAGES.search).observe("click", function(){ makePage(PAGES.search, ""); });
    18     $(PAGES.edit).observe("click", function(){  makePage(PAGES.edit, ""); });
    19     $(PAGES.create).observe("click", function(){ makePage(PAGES.create, ""); });
     16    $(PAGES.home).observe("click", function(event){ setNaviClasses(event.element()); makePage(PAGES.home, ""); });
     17    $(PAGES.search).observe("click", function(event){ setNaviClasses(event.element()); makePage(PAGES.search, ""); });
     18    $(PAGES.edit).observe("click", function(event){ setNaviClasses(event.element());    makePage(PAGES.edit, ""); });
     19    $(PAGES.create).observe("click", function(event){ setNaviClasses(event.element()); makePage(PAGES.create, ""); });
    2020
    2121    // --- necessary for the first call of the page
    22     makePage(PAGES.home);
     22    makePage(PAGES.home, "");
     23}
     24
     25
     26// --- Sets the classes of all navi-elements to the default class.
     27// --- The currently clicked element is set to "isActive".
     28function setNaviClasses(activeNaviElement)
     29{
     30    $(PAGES.home).writeAttribute({"class" : "clickableButton"});
     31    $(PAGES.search).writeAttribute({"class" : "clickableButton"});
     32    $(PAGES.edit).writeAttribute({"class" : "clickableButton"});
     33    $(PAGES.create).writeAttribute({"class" : "clickableButton"});
     34    activeNaviElement.writeAttribute({"class" : "isActive"});
    2335}
    2436
    … …  
    2739function makePage(newPage, psi)
    2840{
     41    // --- if there is called the subpage which is already displayed
     42    // --- there will be done nothing!
     43    if(newPage === PAGES.current) return;
     44    PAGES.current = newPage;
     45
    2946    // --- removes the old content
    30     cleanPage(newPage);
     47    $(CLASSES.subPage()).update();
    3148
    3249    // --- creates the new content
    3350    switch(newPage){
    3451    case PAGES.home:
    35         makeHome("content", "topicTable", true);
     52        makeHome();
    3653        break;
    3754    case PAGES.search:
     55        makeSearch(psi);
    3856        break;
    3957    case PAGES.edit:
    40         makeEdit(psi);
     58        makeEdit(psi)
    4159        break;
    4260    case PAGES.create:
     61        makeCreate(psi);
    4362        break;
    4463    }
    … …  
    4665
    4766
    48 // --- removes all old DOM-Elements - if the page to create is not
    49 // --- the old page
    50 function cleanPage(newPage)
    51 {
    52     $("content").childElements().each(function(nodeToDelete, idx)
    53                                       {
    54                                           if(!nodeToDelete.hasClassName(newPage))
    55                                               nodeToDelete.remove();
    56                                       });
    57 }
    58 
    59 
    6067document.observe("dom:loaded", addHandlersToNavi);
    61 
Note: See TracChangeset for help on using the changeset viewer.