Now are you going to build in an authentication layer to this 'gadget page' as well? Does shindig offer anything like this that you know of? Basically I am recreating (or trying to) igoogle for my company's use though internally.
-----Original Message----- From: Vjekoslav Nesek [mailto:[EMAIL PROTECTED] Sent: Friday, September 26, 2008 10:09 AM To: [email protected] Subject: Re: igoogle intranet page Parrott, Justin wrote: > Care to share some of that code so I could try it out? > Well... if you share back (and don't laugh at JS, I'm bit of a novice with it). Bellow is a jquery plugin, so include jquery-1.2.6 in a html before it. Place gadgets in a <div id='container'> and add to the end of html: $().ready(function() { $('#container').portal(); }; Right now I'm trying to layout gadgets in a grid.... after that column sizing, reordering and handling gadget resizing. Let me know how IE6+ behave. BR, Vjekoslav Nesek // Gadget drag n drop.... (function($) { var defaults = { grid: [20, 420, 820] }; function closest(v, values) { var len = values.length; var m = values[len - 1]; //console.log(m); var d = Math.abs(v - m); for (var i = len - 2; i >= 0; --i) { var m2 = values[i]; var d2 = Math.abs(v - m2); if (d2 < d) m = m2; //console.log(d2, m2, m); } return m; } $.fn.height = function() { var h = this.css('height'); h = h.substring(0, h.length - 2); return Number(h); }; $.fn.portal = function(options) { options = $.extend({}, defaults, options); var catcher; if ($.browser.mozilla) { // Add a div to prevent firefox iframes catching mouse catcher = $('<div style="height: 800px; width: 100%; z-index: 40; background-color: #eee; position: absolute; opacity: .0; display: none" />'); this.append(catcher); } else { catcher = $('<div/>'); } // Dragged element var target; function layout() { var y = 0; $('.gadgets-gadget-chrome').each(function(i, e) { e = $(e); e.css('top', y + 'px'); h = e.height(); //console.log('Height', h, y); y += h + 10; }); }; function dragIt(event) { if (!target) return; target.css({ left: (event.pageX + target.dragOffset.left) + 'px', top: (event.pageY + target.dragOffset.top) + 'px' }); event.preventDefault(); }; function mouseUp(event) { if (!target) return; //catcher.css('z-index', '-100'); catcher.hide(); target.css('z-index', '0'); var left = target.offset().left; var c = closest(left, options.grid); target.animate({ left: c }, { duration: 'normal', step: function() { }}); //console.log('Stop', left, c); target = null; event.preventDefault(); }; this.mousemove(dragIt); catcher.mousemove(dragIt); this.mouseup(mouseUp); this.find('.gadgets-gadget-title').mousedown(function(event) { layout(); target = $(this).parents('.gadgets-gadget-chrome'); //catcher.css('z-index', '10'); catcher.show(); target.css('z-index', '30'); var d = $(target).offset(); d.left -= event.pageX; d.top -= event.pageY; target.dragOffset = d; event.preventDefault(); }); return this; } })(jQuery); > -----Original Message----- > From: Vjekoslav Nesek [mailto:[EMAIL PROTECTED] > Sent: Thursday, September 25, 2008 11:34 AM > To: [email protected] > Subject: Re: igoogle intranet page > > Hi, > > I'm felling the same pain as you at a same time. It's related to 7-years > > old bug in > a firefox where if you pull out an iframe out of DOM (which all JS > drag&drop > libraries do) it resets it's src attribute, hence reload. > > I've tried scriptacolus, YUI and jquery.ui without any lucl. Right now > I'm > coding my own dd layou manager that: > > * renders all gadgets in a single <div> container with relative layout > * gadget chrome is absolutely positioned > * does not pull out from a DOM when repositioning > > Another problem with firefox is that it will not deliver mouse events > when you > drag over iframes, making for a bad ui experience. This can be solved by > > putting > a <div> over all other gadgets and dragging gadget over this div. That > way iframes > don't swallow mousemove events. > > Right now it's kind of working and I can drag gadgets around without any > reloads. > > BR, > Vjekoslav Nesek > > Parrott, Justin wrote: > >> Hello, >> >> >> >> I'm trying to use some javascript api's from the scriptaculous >> > libraries > >> and shindig to build a mimic of the igoogle page but for an intranet >> dashboard for my company. I will be using custom gadgets eventually >> > but > >> right now I'm just playing around with the main screen. I will paste >> the code below and I have a few questions regarding it. I would seem >> that in firefox every time I drag the gadgets to a different section >> > the > >> whole page reloads again which is slowing things down, plus everything >> just seems very clunky. I'm assuming this is my code as I'm not the >> most experienced coder as of yet. I would like some opinions on my >> > code > >> and if anyone can lend some advice on possibly a better way to do >> > this. > >> I'm using the php version of shindig. >> >> >> >> Code: >> >> >> >> <!DOCTYPE html> >> >> <html> >> >> <head> >> >> <title>Sample: Simple Container</title> >> >> <!-- default container look and feel --> >> >> <link rel="stylesheet" href="gadgets.css"> >> >> <script type="text/javascript" >> src="../../js/rpc.js?c=1&debug=1"></script> >> >> <script type="text/javascript" src="cookies.js"></script> >> >> <script type="text/javascript" src="util.js"></script> >> >> <script type="text/javascript" src="gadgets.js"></script> >> >> <script type="text/javascript" >> src="cookiebaseduserprefstore.js"></script> >> >> <script type="text/javascript" >> src="scriptaculous/prototype.js"></script> >> >> <script type="text/javascript" >> src="scriptaculous/scriptaculous.js"></script> >> >> <script type="text/javascript"> >> >> var specUrl0 = 'http://www.google.com/ig/modules/horoscope.xml'; >> >> var specUrl1 = 'http://www.labpixies.com/campaigns/todo/todo.xml'; >> >> var specUrl2 = 'http://blog.outer-court.com/homepage/miniweb.xml'; >> >> >> >> // This container lays out and renders gadgets itself. >> >> >> >> function renderGadgets() { >> >> var gadget0 = gadgets.container.createGadget({specUrl: specUrl0}); >> >> var gadget1 = gadgets.container.createGadget({specUrl: specUrl1}); >> >> var gadget2 = gadgets.container.createGadget({specUrl: specUrl2}); >> >> >> >> gadgets.container.addGadget(gadget0); >> >> gadgets.container.addGadget(gadget1); >> >> gadgets.container.addGadget(gadget2); >> >> >> >> gadgets.container.layoutManager.setGadgetChromeIds( >> >> ['gadget-chrome-x', 'gadget-chrome-y', 'gadget-chrome-z']); >> >> >> >> gadgets.container.renderGadget(gadget0); >> >> gadgets.container.renderGadget(gadget1); >> >> gadgets.container.renderGadget(gadget2); >> >> >> >> }; >> >> </script> >> >> <style type="text/css"> >> >> body, div { >> >> font-family: Arial, Helvetica; >> >> font-size: 11px; >> >> } >> >> >> >> .section1 { >> >> border: 1px solid #CCCCCC; >> >> margin: 30px 5px; >> >> padding: 0px 0px 10px 0px; >> >> background-color: #EFEFEF; >> >> position: absolute; >> >> left: 5px; >> >> top: 5px; >> >> width: 320px; >> >> height: 185px; >> >> } >> >> .section2 { >> >> border: 1px solid #CCCCCC; >> >> margin: 30px 5px; >> >> padding: 0px 0px 10px 0px; >> >> background-color: #EFEFEF; >> >> position: absolute; >> >> left: 340px; >> >> top: 5px; >> >> width: 320px; >> >> height: 185px; >> >> } >> >> .section3 { >> >> border: 1px solid #CCCCCC; >> >> margin: 30px 5px; >> >> padding: 0px 0px 10px 0px; >> >> background-color: #EFEFEF; >> >> position: absolute; >> >> left: 675px; >> >> top: 5px; >> >> width: 320px; >> >> height: 185px; >> >> } >> >> .section4 { >> >> border: 1px solid #CCCCCC; >> >> margin: 30px 5px; >> >> padding: 0px 0px 10px 0px; >> >> background-color: #EFEFEF; >> >> position: absolute; >> >> left: 1010px; >> >> top: 5px; >> >> width: 320px; >> >> height: 185px; >> >> } >> >> .section5 { >> >> border: 1px solid #CCCCCC; >> >> margin: 30px 5px; >> >> padding: 0px 0px 10px 0px; >> >> background-color: #EFEFEF; >> >> position: absolute; >> >> left: 5px; >> >> top: 210px; >> >> width: 320px; >> >> height: 185px; >> >> } >> >> .section6 { >> >> border: 1px solid #CCCCCC; >> >> margin: 30px 5px; >> >> padding: 0px 0px 10px 0px; >> >> background-color: #EFEFEF; >> >> position: absolute; >> >> left: 340px; >> >> top: 210px; >> >> width: 320px; >> >> height: 185px; >> >> } >> >> .section7 { >> >> border: 1px solid #CCCCCC; >> >> margin: 30px 5px; >> >> padding: 0px 0px 10px 0px; >> >> background-color: #EFEFEF; >> >> position: absolute; >> >> left: 675px; >> >> top: 210px; >> >> width: 320px; >> >> height: 185px; >> >> } >> >> .section8 { >> >> border: 1px solid #CCCCCC; >> >> margin: 30px 5px; >> >> padding: 0px 0px 10px 0px; >> >> background-color: #EFEFEF; >> >> position: absolute; >> >> left: 1010px; >> >> top: 210px; >> >> width: 320px; >> >> height: 185px; >> >> } >> >> .section9 { >> >> border: 1px solid #CCCCCC; >> >> margin: 30px 5px; >> >> padding: 0px 0px 10px 0px; >> >> background-color: #EFEFEF; >> >> position: absolute; >> >> left: 5px; >> >> top: 415px; >> >> width: 320px; >> >> height: 185px; >> >> } >> >> .section10 { >> >> border: 1px solid #CCCCCC; >> >> margin: 30px 5px; >> >> padding: 0px 0px 10px 0px; >> >> background-color: #EFEFEF; >> >> position: absolute; >> >> left: 340px; >> >> top: 415px; >> >> width: 320px; >> >> height: 185px; >> >> } >> >> .section11 { >> >> border: 1px solid #CCCCCC; >> >> margin: 30px 5px; >> >> padding: 0px 0px 10px 0px; >> >> background-color: #EFEFEF; >> >> position: absolute; >> >> left: 675px; >> >> top: 415px; >> >> width: 320px; >> >> height: 185px; >> >> } >> >> .section12 { >> >> border: 1px solid #CCCCCC; >> >> margin: 30px 5px; >> >> padding: 0px 0px 10px 0px; >> >> background-color: #EFEFEF; >> >> position: absolute; >> >> left: 1010px; >> >> top: 415px; >> >> width: 320px; >> >> height: 185px; >> >> } >> >> >> >> </style> >> >> </head> >> >> <body onLoad="renderGadgets()"> >> >> <div id="group1" class="section1"> >> >> <div id="gadget-chrome-x" class="gadgets-gadget-chrome"></div> >> >> </div> >> >> <div id="group2" class="section2"> >> >> <div id="gadget-chrome-y" class="gadgets-gadget-chrome"></div> >> >> </div> >> >> <div id="group3" class="section3"> >> >> <div id="gadget-chrome-z" class="gadgets-gadget-chrome"></div> >> >> </div> >> >> <div id="group4" class="section4"> >> >> </div> >> >> <div id="group5" class="section5"> >> >> </div> >> >> <div id="group6" class="section6"> >> >> </div> >> >> <div id="group7" class="section7"> >> >> </div> >> >> <div id="group8" class="section8"> >> >> </div> >> >> <div id="group9" class="section9"> >> >> </div> >> >> <div id="group10" class="section10"> >> >> </div> >> >> <div id="group11" class="section11"> >> >> </div> >> >> <div id="group12" class="section12"> >> >> </div> >> >> <script type="text/javascript"> >> >> // <![CDATA[ >> >> sections = [ 'group1', 'group2', 'group3', 'group4', 'group5', >> 'group6', 'group7', 'group8', 'group9', 'group10', 'group11', >> > 'group12' > >> ]; >> >> Sortable.create( 'group1', { tag:'div', dropOnEmpty: true, >> containment: sections, constraint: false, only:'gadgets-gadget-chrome' >> > } > >> ); >> >> Sortable.create( 'group2', { tag:'div', dropOnEmpty: true, >> containment: sections, constraint: false, only:'gadgets-gadget-chrome' >> > } > >> ); >> >> Sortable.create( 'group3', { tag:'div', dropOnEmpty: true, >> containment: sections, constraint: false, only:'gadgets-gadget-chrome' >> > } > >> ); >> >> Sortable.create( 'group4', { tag:'div', dropOnEmpty: true, >> containment: sections, constraint: false, only:'gadgets-gadget-chrome' >> > } > >> ); >> >> Sortable.create( 'group5', { tag:'div', dropOnEmpty: true, >> containment: sections, constraint: false, only:'gadgets-gadget-chrome' >> > } > >> ); >> >> Sortable.create( 'group6', { tag:'div', dropOnEmpty: true, >> containment: sections, constraint: false, only:'gadgets-gadget-chrome' >> > } > >> ); >> >> Sortable.create( 'group7', { tag:'div', dropOnEmpty: true, >> containment: sections, constraint: false, only:'gadgets-gadget-chrome' >> > } > >> ); >> >> Sortable.create( 'group8', { tag:'div', dropOnEmpty: true, >> containment: sections, constraint: false, only:'gadgets-gadget-chrome' >> > } > >> ); >> >> Sortable.create( 'group9', { tag:'div', dropOnEmpty: true, >> containment: sections, constraint: false, only:'gadgets-gadget-chrome' >> > } > >> ); >> >> Sortable.create( 'group10', { tag:'div', dropOnEmpty: true, >> containment: sections, constraint: false, only:'gadgets-gadget-chrome' >> > } > >> ); >> >> Sortable.create( 'group11', { tag:'div', dropOnEmpty: true, >> containment: sections, constraint: false, only:'gadgets-gadget-chrome' >> > } > >> ); >> >> Sortable.create( 'group12', { tag:'div', dropOnEmpty: true, >> containment: sections, constraint: false, only:'gadgets-gadget-chrome' >> > } > >> ); >> >> // ]]> >> >> </script> >> >> </body> >> >> </html> >> >> >> >> Justin Parrott >> >> Enterprise Management Engineer >> >> Medplus Inc. >> >> >> >> >> >> >> >> >> >> >> >> >> >> Confidentiality Notice: The information contained in this electronic >> > transmission is confidential and may be legally privileged. It is > intended only for the addressee(s) named above. If you are not an > intended recipient, be aware that any disclosure, copying, distribution > or use of the information contained in this transmission is prohibited > and may be unlawful. If you have received this transmission in error, > please notify us by telephone (513) 229-5500 or by email > ([EMAIL PROTECTED]). After replying, please erase it from your > computer system. > >> >> >> >> > > > > > > > > > > > > Confidentiality Notice: The information contained in this electronic transmission is confidential and may be legally privileged. It is intended only for the addressee(s) named above. If you are not an intended recipient, be aware that any disclosure, copying, distribution or use of the information contained in this transmission is prohibited and may be unlawful. If you have received this transmission in error, please notify us by telephone (513) 229-5500 or by email ([EMAIL PROTECTED]). After replying, please erase it from your computer system. > > > > Confidentiality Notice: The information contained in this electronic transmission is confidential and may be legally privileged. It is intended only for the addressee(s) named above. If you are not an intended recipient, be aware that any disclosure, copying, distribution or use of the information contained in this transmission is prohibited and may be unlawful. If you have received this transmission in error, please notify us by telephone (513) 229-5500 or by email ([EMAIL PROTECTED]). After replying, please erase it from your computer system.
