javascripts/dragdrop.js @@ -131,8 +131,14 @@ Popup.AbstractWindow = Class.create({ body.insert(this.element); }, + makeDraggable: function() { + console.log('making draggable'); + new Draggable(this.element.identify(), {handle: 'h3.title'}); + }, + show: function() { this.beforeShow(); + if (this.element.down('.popup.draggable')) this.makeDraggable(); this.element.show(); this.afterShow(); }, @@ -182,8 +188,8 @@ Popup.AbstractWindow = Class.create({ }); Popup.Window = Class.create(Popup.AbstractWindow, { - initialize: function($super, element) { - $super(); + initialize: function($super, element, options) { + $super(options); element.remove(); this.content.update(element); element.show(); javascripts/popup.js @@ -10,7 +10,7 @@ body { .popup { padding: 10px } -.popup h3 { +.popup h3.title { background-color: #6D84B4; border: 1px solid #3B5998; color: white; @@ -24,4 +24,7 @@ body { border-top: none; margin: 0 -10px -10px -10px; padding: 1px 9px; +} +.popup.draggable h3.title { + cursor: move; } \ No newline at end of file stylesheets/facebook.css @@ -5,12 +5,13 @@ %link{:rel=>"stylesheet", :type=>"text/css", :href=>"/stylesheets/facebook.css"}/ %script{:type=>"text/javascript", :src=>"/javascripts/prototype.js"} %script{:type=>"text/javascript", :src=>"/javascripts/effects.js"} + / Required if you want draggable windows + %script{:type=>"text/javascript", :src=>"/javascripts/dragdrop.js"} %script{:type=>"text/javascript", :src=>"/javascripts/lowpro.js"} %script{:type=>"text/javascript", :src=>"/javascripts/popup.js"} %script{:type=>"text/javascript"} :plain Event.addBehavior({ 'a.popup': Popup.TriggerBehavior() }); - %body %p %a.popup{:href=>"#test"} Popup @@ -21,19 +22,29 @@ %p %a.popup{:href=>"#search"} Popup Input + %p + %a.popup{:href=>"#dragme"} Draggable + .popup#test{:style=>"display: none"} - %h3 Popup Window + %h3.title Popup Window .popup_content %p Hello world! %p %a{:href=>"javascript: Element.closePopup('test')"} Close .popup#search{:style=>"display: none"} - %h3 Search + %h3.title Search .popup_content %form %p %input{:type=>"text", :name=>"query", :id=>"query", :value=>""}/ %p %a{:href=>"javascript: Element.closePopup('search')"} Close + + .popup.draggable#dragme{:style=>"display: none"} + %h3.title Drag Me + .popup_content + %p Try dragging me around by my title. + %p + %a{:href=>"javascript: Element.closePopup('dragme')"} Close \ No newline at end of file test/index.haml b8256e8c4c2b4aabd8dd43380e7c3c3461ba8f11 John W. Long me@johnwlong.com http://github.com/jlong/popupjs/commit/67b3933462b24bc7647d4639afbb70b91dd87b90 67b3933462b24bc7647d4639afbb70b91dd87b90 2008-07-09T19:12:18-07:00 2008-07-09T19:12:18-07:00 make popups draggable 6fb231aea6fd0db03b2a3159bade042f69a3f1f0 John W. Long me@johnwlong.com