| CODENOTIFIER | HelpYou are not signed inSign in |
Project: Alfresco
Revision: 2850
Author: ewinlof
Date: 02 Sep 2008 10:15:39
Changes:Customise dashboards layout can now be changed by clicking on the layout icon.
Files:| ... | ...@@ -90,6 +90,7 @@ | |
| 90 | 90 | padding:1em; |
| 91 | 91 | vertical-align:middle; |
| 92 | 92 | height:10em; |
| 93 | cursor: pointer; | |
| 93 | 94 | } |
| 94 | 95 | |
| 95 | 96 | /* Add a bit of green around the current layout */ |
| ... | ...@@ -58,7 +58,7 @@ | |
| 58 | 58 | <div class="layoutDescription">${layout.description}</div> |
| 59 | 59 | <div class="layoutBox"> |
| 60 | 60 | <span> |
| 61 | <img class="layoutIcon" src="${url.context}/components/dashboard/images/${layout.templateId}.png"/> | |
| 61 | <img id="${args.htmlid}-select-img-${layout.templateId}" class="layoutIcon" src="${url.context}/components/dashboard/images/${layout.templateId}.png"/> | |
| 62 | 62 | <input id="${args.htmlid}-select-button-${layout.templateId}" type="button" value="${msg("button.select")}"/> |
| 63 | 63 | </span> |
| 64 | 64 | </div> |
| ... | ...@@ -141,29 +141,41 @@ | |
| 141 | 141 | this.widgets.selectButtons = []; |
| 142 | 142 | for (var layoutId in this.options.layouts) |
| 143 | 143 | { |
| 144 | this.widgets.selectButtons[layoutId] = Alfresco.util.createYUIButton(this, "select-button-" + layoutId, this.onSelectButtonClick); | |
| 144 | this.widgets.selectButtons[layoutId] = Alfresco.util.createYUIButton(this, "select-button-" + layoutId, function (event, button) | |
| 145 | { | |
| 146 | // Find out what layout that is chosen by lokking at the clicked button's id | |
| 147 | var id = button.get("id"); | |
| 148 | var selectedLayoutId = id.substring((this.id + "-select-button-").length); | |
| 149 | this.onSelectLayoutClick(selectedLayoutId); | |
| 150 | }); | |
| 151 | ||
| 152 | var selectLayoutLink = document.getElementById(this.id + "-select-img-" + layoutId); | |
| 153 | YAHOO.util.Event.addListener(selectLayoutLink, "click", function (event) | |
| 154 | { | |
| 155 | // Find out what layout that is chosen by lokking at the clicked button's id | |
| 156 | var id = event.target.id; | |
| 157 | var selectedLayoutId = id.substring((this.id + "-select-img-").length); | |
| 158 | this.onSelectLayoutClick(selectedLayoutId); | |
| 159 | }, this, true); | |
| 160 | ||
| 145 | 161 | } |
| 146 | 162 | }, |
| 147 | 163 | |
| 148 | 164 | /** |
| 149 | * Fired when the user clicks one of the select buttons for a layout. | |
| 165 | * Fired when the user clicks one of the select buttons or icons for a layout. | |
| 150 | 166 | * Changes the current layout to the selected layout and throws an global |
| 151 | 167 | * event, that can be captured by other components, such as |
| 152 | 168 | * Alfresco.CustomiseDashlets. |
| 153 | 169 | * |
| 154 | * @method onSelectButtonClick | |
| 155 | * @param event {object} an "click" event | |
| 170 | * @method onSelectLayoutClick | |
| 171 | * @param selectedLayoutId {string} The id of the selected layout | |
| 156 | 172 | */ |
| 157 | onSelectButtonClick: function CD_onSelectButtonClick(event, button) | |
| 173 | onSelectLayoutClick: function CD_onSelectLayoutClick(selectedLayoutId) | |
| 158 | 174 | { |
| 159 | 175 | // Get references to the divs that should be shown or hidden |
| 160 | 176 | var layoutsDiv = Dom.get(this.id + "-layouts-div"); |
| 161 | 177 | var currentLayoutDiv = Dom.get(this.id + "-currentLayout-div"); |
| 162 | 178 | |
| 163 | // Find out what layout that is chosen by lokking at the clicked button's id | |
| 164 | var buttonId = button.get("id"); | |
| 165 | var selectedLayoutId = buttonId.substring((this.id + "-select-button-").length); | |
| 166 | ||
| 167 | 179 | // Hide the div that displays the available layouts |
| 168 | 180 | Dom.setStyle(layoutsDiv, "display", "none"); |
| 169 | 181 | for (var layoutId in this.options.layouts) |