Changeset 334
- Timestamp:
- 05/16/06 13:15:05
- Files:
-
- qPloneTiles/trunk/HISTORY.txt (modified) (2 diffs)
- qPloneTiles/trunk/README.txt (modified) (1 diff)
- qPloneTiles/trunk/TODO.txt (modified) (1 diff)
- qPloneTiles/trunk/skins/qPloneTiles/tiles.js (modified) (1 diff)
- qPloneTiles/trunk/version.txt (modified) (1 diff)
Legend:
- Unmodified
- Added
- Removed
- Modified
- Copied
- Moved
qPloneTiles/trunk/HISTORY.txt
r333 r334 1 2006-05-16 - version 0.4.0 2 3 * some code optimization) 4 5 * provided the same functionality on IE6 6 7 * corect functionality with nested tile elements 8 9 * added some visual link imitation effects for tile elements: 10 11 - mouse pointer over tile elements 12 13 - tile elements can be accessed via tabbing 14 15 - window status line changed while mouse is over tile elements 16 17 * added functions doc strings 18 19 * added 'Usage' section to README.txt file 20 1 21 2006-04-20 - version 0.2.0 2 22 … … 5 25 * fixed bug (onclick evaluation) 6 26 7 * 'p imary' class functionality27 * 'primary' class functionality 8 28 9 29 * added TODO.txt qPloneTiles/trunk/README.txt
r333 r334 2 2 3 3 4 Usage 5 6 Plone Product for creating "Tile" links. 7 8 Provide class 'tile' for html element you want to 9 have link behaviour. Then select one of the anchor 10 elements inside that tile by adding it class = 11 = 'primary'. Thus, our tile element will redirect 12 you to primary anchor target. So all tile area, 13 except anchors within it, is linkable and behave 14 like a link! If you define your tile element, but 15 not select your primary link inside tile, href 16 attribute of the first anchor will be taken by 17 default. 18 19 Example 1: 20 21 <div class="tile"> 22 <a href="www.example1.com">First link</a> 23 <a href="www.example2.com">Second link</a> 24 </div> 25 Here we have div element with class 'tile'. But any 26 element inside div haven't class 'primary'. So by 27 default will be used href of the first link. And 28 when you click in scopes div element and outside a 29 element you'll be redirected to www.example1.com. 30 31 Example 2: 32 33 <div class="tile"> 34 <a href="www.example1.com">First link</a> 35 <a class="primary" 36 href="www.example2.com">Second link</a> 37 </div> 38 In this case we have (in addition all we have in previous 39 example) second link with primary class. So div element 40 have "www.example2.com" location. 41 42 Example 3: 43 44 <div class="tile"> 45 <a href="www.example1.com">First link</a> 46 <div class="tile"> 47 <a href="www.example1.com">First link</a> 48 <a class="primary" 49 href="www.example2.com">Second link</a> 50 </div> 51 </div> 52 This last example show us that we could have nested 53 tile elements. In practice, everything works like in 54 previous examples except one. Tile element look for 55 primary link. In this example primary element is 56 inside both tiles. But if you want to have for outer 57 div first link as primary, you could simply add 58 class 'primary' to 'First link'. In this case tile'll 59 search only to first primary link. And it won't 60 affect inner div element. 61 So remember that tile element could inherite href 62 attribute only from inner anchors. 63 64 4 65 Inspiration 5 66 qPloneTiles/trunk/TODO.txt
r333 r334 1 1 2 * realise 0.32 // * realise 0.3 3 3 4 * realise 0.4 4 // * realise 0.4 5 6 * qPloneTiles/trunk/skins/qPloneTiles/tiles.js
r333 r334 7 7 list = (parentElement || window.document.body).getElementsByTagName('*'); 8 8 if(list.length == 0) list = (parentElement || window.document.body).all; 9 for(var i = 0; i < list.length; i++) { 10 // if(DEBUG) message += '\n' + list[i].className; 11 if(list[i].className.match(new RegExp('(^|\\s)' + className + '(\\s|$)'))) result[result.length] = list[i]; 12 } 13 return result 9 var class_re = new RegExp('(^|\\s)' + className + '(\\s|$)'); 10 for(var i = 0; i < list.length; i++) if(list[i].className.match(class_re)) result[result.length] = list[i]; 11 return result; 14 12 }; 15 13 16 function getNeededHref(a_list) { 17 var result, classname_re = new RegExp('(^|\\s)' + 'primary' + '(\\s|$)'); 18 if(a_list.length == 0) return false; 19 for(var i = 0; i < a_list.length; i++) { 20 if(classname_re.exec(a_list[i].className)) return a_list[i].href; 21 } 22 return a_list[0].href 14 // browser compatibility functions 15 function add_Event(obj, evt, listener, captured) { 16 if (!obj.addEventListener) obj.attachEvent('on'+evt, listener); 17 else obj.addEventListener(evt, listener, captured); 23 18 } 24 19 25 function setTiles(){ 26 var tiles_elms = getElementsByClassName("tile", window.document) 27 for(var i = 0; i < tiles_elms.length; i++) { 28 var tiles_a = tiles_elms[i].getElementsByTagName('A'); 29 if(tiles_a.length > 0) { 30 var Href = getNeededHref(tiles_a); 31 if(Href != false) tiles_elms[i].onclick = new Function("window.location = '"+Href+"'; return false;") 32 } 33 if(DEBUG) message += '\n' + tiles_elms[i].onclick + ' - ' + Href; 34 } 35 if(DEBUG) window.alert(message); 20 function stopBubbling(e) { 21 if(!e) window.event.cancelBubble=true; 22 else (e.stopPropagation) ? e.stopPropagation() : e.cancelBubble=true; 36 23 } 37 24 38 registerPloneFunction(setTiles); 25 function getPrimaryLink(list) { 26 // get first a.primary element from the list 27 // or just first element if no primary anchor is marked 28 if(list.length == 0) return false; 29 var primary = new RegExp('(^|\\s)' + 'primary' + '(\\s|$)'); 30 for(var i = 0; i < list.length; i++) if(primary.exec(list[i].className)) return list[i]; 31 return list[0]; 32 } 33 34 function initTiles(){ 35 var tiles = getElementsByClassName("tile", window.document) 36 for(var i = 0; i < tiles.length; i++) { 37 var tile = tiles[i], 38 hrefs = tile.getElementsByTagName('A'); 39 var a = getPrimaryLink(hrefs); 40 if (a) { 41 // adding styling for tiles 42 tile.style.cursor='pointer'; 43 tile.tabIndex = 0; 44 // adding event handling 45 add_Event(tile, 'click', new Function("e", "window.location='"+a.href+"';stopBubbling(e)"), false); 46 add_Event(tile, 'mouseover', new Function("e", "window.status= '"+a.href+"';stopBubbling(e)"), false); 47 add_Event(tile, 'mouseout', function( e ){ window.status= ''; stopBubbling(e) }, false); 48 } 49 } 50 } 51 52 registerPloneFunction(initTiles); qPloneTiles/trunk/version.txt
r333 r334 1 0. 2.01 0.4.0
