Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

draggable popup windows

  • Loading branch information...
commit 9bf8f3fc131c7c1de88db2c5b058b77f69b71180 1 parent c9f06a8
@jlong jlong authored
View
3  public/javascripts/admin/application.js
@@ -8,6 +8,9 @@ Popup.BorderTopRightImage = relative_url_root + '/images/admin/popup_border_t
Popup.BorderBottomLeftImage = relative_url_root + '/images/admin/popup_border_bottom_left.png';
Popup.BorderBottomRightImage = relative_url_root + '/images/admin/popup_border_bottom_right.png';
+// Make all popups draggable
+Popup.Draggable = true;
+
// Status Images
Status.SpinnerImage = relative_url_root + '/images/admin/status_spinner.gif';
Status.BackgroundImage = relative_url_root + '/images/admin/status_background.png';
View
99 public/javascripts/admin/popup.js
@@ -1,8 +1,8 @@
/*
* popup.js
- *
- * dependencies: prototype.js, effects.js, lowpro.js
- *
+ *
+ * dependencies: prototype.js, dragdrop.js, effects.js, lowpro.js
+ *
* --------------------------------------------------------------------------
*
* Allows you to open up a URL inside of a Facebook-style window. To use
@@ -10,19 +10,19 @@
* HTML snippet that you would like to load up inside a window:
*
* <a class="popup" href="window.html">Window</a>
- *
+ *
* You can also "popup" a specific div by referencing it by ID:
- *
+ *
* <a class="popup" href="#my_div">Popup</a>
* <div id="my_div" style="display:none">Hello World!</div>
*
* You will need to install the following hook:
*
* Event.addBehavior({'a.popup': Popup.TriggerBehavior()});
- *
+ *
* --------------------------------------------------------------------------
*
- * Copyright (c) 2008, John W. Long
+ * Copyright (c) 2008-2011, John W. Long
* Portions copyright (c) 2008, Five Points Solutions, Inc.
*
* Permission is hereby granted, free of charge, to any person obtaining a
@@ -51,7 +51,9 @@ var Popup = {
BorderTopLeftImage: '/images/popup_border_top_left.png',
BorderTopRightImage: '/images/popup_border_top_right.png',
BorderBottomLeftImage: '/images/popup_border_bottom_left.png',
- BorderBottomRightImage: '/images/popup_border_bottom_right.png'
+ BorderBottomRightImage: '/images/popup_border_bottom_right.png',
+ Draggable: false,
+ zindex: 10000
};
Popup.borderImages = function() {
@@ -75,12 +77,12 @@ Popup.preloadImages = function() {
}
Popup.TriggerBehavior = Behavior.create({
- initialize: function() {
+ initialize: function(options) {
var matches = this.element.href.match(/\#(.+)$/);
if (matches) {
- this.window = new Popup.Window($(matches[1]));
+ this.window = new Popup.Window($(matches[1]), options);
} else {
- this.window = new Popup.AjaxWindow(this.element.href);
+ this.window = new Popup.AjaxWindow(this.element.href, options);
}
},
@@ -95,9 +97,12 @@ Popup.TriggerBehavior = Behavior.create({
});
Popup.AbstractWindow = Class.create({
- initialize: function() {
+ initialize: function(options) {
+ options = Object.extend({draggable: Popup.Draggable}, options)
+ this.draggable = options.draggable;
Popup.preloadImages();
this.buildWindow();
+ this.element.observe('click', this.click.bind(this))
},
buildWindow: function() {
@@ -131,6 +136,25 @@ Popup.AbstractWindow = Class.create({
body.insert(this.element);
},
+ createDraggable: function() {
+ if (!this._draggable) {
+ this._draggable = new Draggable(this.element.identify(), {
+ handle: 'popup_title',
+ scroll: window,
+ zindex: Popup.zindex,
+ onStart: function() { this.startDrag(); return true; }.bind(this),
+ onEnd: function() { this.endDrag(); return true; }.bind(this)
+ });
+ }
+ },
+
+ destroyDraggable: function() {
+ if (this._draggable) {
+ this._draggable.destroy();
+ this._draggable = null;
+ }
+ },
+
show: function() {
this.beforeShow();
this.element.show();
@@ -138,7 +162,9 @@ Popup.AbstractWindow = Class.create({
},
hide: function() {
+ this.beforeHide();
this.element.hide();
+ this.afterHide();
},
toggle: function() {
@@ -165,25 +191,58 @@ Popup.AbstractWindow = Class.create({
this.top.setStyle("width:" + width + "px");
this.bottom.setStyle("width:" + width + "px");
}
+ this.bringToTop();
this.centerWindowInView();
},
afterShow: function() {
+ if (this.draggable) this.createDraggable();
this.focus();
},
-
+
+ beforeHide: function() {
+ if (this.draggable) this.destroyDraggable();
+ },
+
+ afterHide: function() {
+ // noopp
+ },
+
+ titleClick: function(event) {
+ this.bringToTop();
+ },
+
+ startDrag: function() {
+ this.bringToTop();
+ },
+
+ endDrag: function() {
+ this.bringToTop();
+ },
+
+ click: function(event) {
+ if (event.target.hasClassName('popup_title')) this.bringToTop();
+ },
+
centerWindowInView: function() {
var offsets = document.viewport.getScrollOffsets();
this.element.setStyle({
left: parseInt(offsets.left + (document.viewport.getWidth() - this.element.getWidth()) / 2) + 'px',
top: parseInt(offsets.top + (document.viewport.getHeight() - this.element.getHeight()) / 2.2) + 'px'
});
+ },
+
+ bringToTop: function() {
+ Popup.zindex += 1;
+ this.element.style.zIndex = Popup.zindex;
+ if (this._draggable) this._draggable.originalZ = Popup.zindex;
}
+
});
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();
@@ -192,7 +251,7 @@ Popup.Window = Class.create(Popup.AbstractWindow, {
Popup.AjaxWindow = Class.create(Popup.AbstractWindow, {
initialize: function($super, url, options) {
- $super();
+ $super(options);
options = Object.extend({reload: true}, options);
this.url = url;
this.reload = options.reload;
@@ -200,7 +259,13 @@ Popup.AjaxWindow = Class.create(Popup.AbstractWindow, {
show: function($super) {
if (!this.loaded || this.reload) {
- new Ajax.Updater(this.content, this.url, {asynchronous: false, method: "get", evalScripts: true, onComplete: $super});
+ this.hide();
+ new Ajax.Updater(this.content, this.url, {
+ asynchronous: false,
+ method: "get",
+ evalScripts: true,
+ onComplete: $super
+ });
this.loaded = true;
} else {
$super();
View
2  stylesheets/admin/main.sass
@@ -24,4 +24,4 @@
@import "partials/validations"
// Deprecated
-@import "partials/deprecated""
+@import "partials/deprecated"
View
13 stylesheets/admin/partials/_deprecated.sass
@@ -2,8 +2,6 @@
// will be maintained here for a time so that older extensions continue to
// look reasonable.
-
-
// Use for "empty" instead of "note"
table.index td.note
color: silver
@@ -23,4 +21,13 @@ table.index td.note
font-size: 95%
label
display: inline
- text-shadow: #666 1px 1px 0
+ text-shadow: #666 1px 1px 0
+
+// Use a div with a class of "popup_title" instead of an h3 with a class of "title"
+div.popup h3.title
+ background: #c5dff5
+ +linear-gradient(color_stops(#e5f5ff, #c5dff5))
+ border-bottom: 1px solid #a7cdf0
+ font-size: 100%
+ margin: -10px -20px 20px -20px
+ padding: 6px 10px
View
8 stylesheets/admin/partials/_popup.sass
@@ -14,10 +14,12 @@ div.popup
float: right
margin-top: 9px
- h3.title
+ .popup_title
background: #c5dff5
+linear-gradient(color_stops(#e5f5ff, #c5dff5))
border-bottom: 1px solid #a7cdf0
+ cursor: move
+ font-weight: bold
font-size: 100%
margin: -10px -20px 20px -20px
padding: 6px 10px
@@ -128,10 +130,12 @@ div.popup
padding-right: 1em
margin: 0
margin-top: 1em
- margin-bottom: 1em
+ margin-bottom: 1em
.close_link
+ font-size: 85%
text-align: center
+
.tag
color: green
cursor: pointer
View
1  views/admin/_layout.haml
@@ -7,6 +7,7 @@
%script{:type =>"text/javascript"}= "var relative_url_root = '';"
%script{:src=>"/javascripts/admin/prototype.js", :type=>"text/javascript"}
%script{:src=>"/javascripts/admin/effects.js", :type=>"text/javascript"}
+ %script{:src=>"/javascripts/admin/dragdrop.js", :type=>"text/javascript"}
%script{:src=>"/javascripts/admin/lowpro.js", :type=>"text/javascript"}
%script{:src=>"/javascripts/admin/cookie.js", :type=>"text/javascript"}
%script{:src=>"/javascripts/admin/dropdown.js", :type=>"text/javascript"}
View
2  views/admin/assets/upload/index.haml
@@ -1,5 +1,5 @@
#upload_asset_popup.popup.textured{:style=>"width: 28em"}
- %h3.title Upload Asset
+ .popup_title Upload Asset
%form
.head
View
2  views/admin/docs/filters/markdown.html.erb
@@ -1,5 +1,5 @@
<div class="popup" id="markdown_help_popup">
-<h3 class="title">Markdown Reference</h3>
+<div class="popup_title">Markdown Reference</div>
<div class="reference">
<p>Many people prefer <a href="http://daringfireball.net/projects/markdown/" target="_blank">Markdown</a>
View
2  views/admin/docs/filters/smartypants.html.erb
@@ -1,5 +1,5 @@
<div class="popup" id="smartypants_help_popup">
-<h3 class="title">SmartyPants Reference</h3>
+<div class="popup_title">SmartyPants Reference</div>
<div class="reference">
<p><a href="http://daringfireball.net/projects/smartypants/" target="_blank">SmartyPants</a>
View
2  views/admin/docs/filters/textile.html.erb
@@ -1,5 +1,5 @@
<div class="popup" id="textile_help_popup">
-<h3 class="title">Textile Reference</h3>
+<div class="popup_title">Textile Reference</div>
<div class="reference">
<p>Many people prefer <a href="http://textism.com/tools/textile/" target="_blank">Textile</a>
View
2  views/admin/docs/snippets/show.html.erb
@@ -1,5 +1,5 @@
<div class="popup" id="snippet_reference_popup">
-<h3 class="title">Available Snippets</h3>
+<div class="popup_title">Available Snippets</div>
<p>
<label for="search_snippet_reference" class="inline">Filter Snippets</label>
<input type="search" name="search_snippet_reference" id="search_snippet_reference" value="" />
View
4 views/admin/docs/tags/show.html.erb
@@ -1,6 +1,6 @@
<div class="popup" id="tag_reference_popup">
-
-<h3 class="title">Available Tags for Page</h3>
+<div class="popup_title">Available Tags</div>
+
<p>
<label for="search_tag_reference" class="inline">Filter Tags</label>
<input type="search" name="search_tag_reference" id="search_tag_reference" value="" />
View
2  views/admin/javascripts/remove/index.haml
@@ -2,7 +2,7 @@
.popup.textured{:id=>popup_id}
%form{:method=>"post", :action=>"/admin/javascripts/", "data-onsubmit_status"=>"Removing javascript&#8230;"}
- %h3.title Remove Javascript
+ .popup_title Remove Javascript
.head
%p Are you sure you want to <strong class="warning">permanently remove</strong> the following javascript?
View
2  views/admin/layouts/remove/index.haml
@@ -2,7 +2,7 @@
.popup.textured{:id=>popup_id}
%form{:method=>"post", :action=>"/admin/layouts/", "data-onsubmit_status"=>"Removing layout&#8230;"}
- %h3.title Remove Layout
+ .popup_title Remove Layout
.head
%p.intro Are you sure you want to <strong class="warning">permanently remove</strong> the following layout?
View
4 views/admin/pages/attributes/new.haml
@@ -1,7 +1,7 @@
#add_attribute_popup.popup
#add_attribute_busy.busy{:style=>"display: none"}
%img{:src=>"/images/admin/spinner.gif", :alt=>"Spinner"}/
- %h3.title Add Attribute
+ .popup_title Add Attribute
%form{:action=>"/admin/pages/attributes/create/", :method=>"post", :onsubmit=>"event.stop(); addAttribute(this)"}
%p
%label{:for=>"attribute_name_field"} Name
@@ -10,4 +10,4 @@
%p.buttons
%input.button#add_attribute_button{:name=>"commit", :type=>"submit", :value=>"Add Attribute"}/
or
- %a{:href => "#add_attribute_popup", :onclick=>"event.stop(); this.up('.popup').closePopup()"} Cancel
+ %a.cancel{:href => "#add_attribute_popup", :onclick=>"event.stop(); this.up('.popup').closePopup()"} Cancel
View
2  views/admin/pages/edit.haml
@@ -12,7 +12,7 @@
%input.button{:name=>"commit", :type=>"submit", :value=>"Save Changes"}/
%input.button{:name=>"continue", :type=>"submit", :value=>"Save and Continue Editing"}/
or
- %a{:href=>"/admin/pages"} Cancel
+ %a.cancel{:href=>"/admin/pages"} Cancel
%p.updated_line
Last updated by
View
2  views/admin/pages/new.haml
@@ -11,4 +11,4 @@
%input.button{:name=>"commit", :type=>"submit", :value=>"Create Page"}/
%input.button{:name=>"continue", :type=>"submit", :value=>"Save and Continue Editing"}/
or
- %a{:href=>"/admin/pages"} Cancel
+ %a.cancel{:href=>"/admin/pages"} Cancel
View
4 views/admin/pages/parts/new.haml
@@ -1,7 +1,7 @@
#add_part_popup.popup
#add_part_busy.busy{:style=>"display: none"}
%img{:src=>"/images/admin/spinner.gif", :alt=>"Spinner"}/
- %h3.title Add Part
+ .popup_title Add Part
%form{:action=>"/admin/pages/parts/create/", :method=>"post", :onsubmit=>"Event.stop(event); addPart(this)"}
%p
%label{:for=>"part_name_field"} Name
@@ -10,4 +10,4 @@
%p.buttons
%input.button#add_part_button{:name=>"commit", :type=>"submit", :value=>"Add Part"}/
or
- %a{:href=>"javascript: Element.closePopup('add_part_popup')"} Cancel
+ %a.cancel{:href=>"javascript: Element.closePopup('add_part_popup')"} Cancel
View
2  views/admin/pages/remove/index.haml
@@ -2,7 +2,7 @@
.popup.textured{:id=>popup_id}
%form{:method=>"post", :action=>"/admin/pages/index_after_pages_removed.haml"}
- %h3.title.warn Remove Pages
+ .popup_title.warn Remove Pages
.head
%p.intro Are you sure you want to <strong class="warning">permanently remove</strong> the following pages?
View
2  views/admin/snippets/remove/index.haml
@@ -2,7 +2,7 @@
.popup.textured{:id=>popup_id}
%form{:method=>"post", :action=>"/admin/snippets/", "data-onsubmit_status"=>"Removing snippet&#8230;"}
- %h3.title Remove Snippet
+ .popup_title Remove Snippet
.head
%p.intro Are you sure you want to <strong class="warning">permanently remove</strong> the following snippet?
View
2  views/admin/stylesheets/remove/index.haml
@@ -2,7 +2,7 @@
.popup.textured{:id=>popup_id}
%form{:method=>"post", :action=>"/admin/stylesheets/", "data-onsubmit_status"=>"Removing stylesheet&#8230;"}
- %h3.title Remove Stylesheet
+ .popup_title Remove Stylesheet
.head
%p Are you sure you want to <strong class="warning">permanently remove</strong> the following stylesheet?
Please sign in to comment.
Something went wrong with that request. Please try again.