Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Lightboxed test creation and editing

  • Loading branch information...
commit a89809ec8f7d1a0c7f58eac969cfd6ab29486517 1 parent 316f269
Winton Welsh authored
5 config/externals.yml
View
@@ -6,4 +6,7 @@ authlogic:
path: vendor
deploy:
repo: git@github.com:br/a_b_front_end_deploy
- path: config
+ path: config
+lightbox:
+ repo: git://github.com/buckwilson/Lightbox_me.git
+ path: public/js
8 lib/a_b_front_end/view/dashboard.haml
View
@@ -1,5 +1,5 @@
- @css = %w(dashboard)
-- @js = %w(tmpl dashboard)
+- @js = %w(tmpl dashboard lightbox/jquery.lightbox_me)
/.success This is a test!
.dashboard
.span-12.filter#sites
@@ -26,11 +26,11 @@
%img{ :class => 'remove hide', :src => '/image/remove.png' }
%textarea.hide#tests_form_template
- .dialog
+ .dialog.span-7.last
%form{ :action => '/tests', :method => 'post' }
.span-2
%label{ :for => 'test_name' } Name
- .span-5
+ .span-4
<% if (typeof(test) != "undefined") { %>
<input name='id' type='hidden' value='<%= test.id %>' />
<% } %>
@@ -48,7 +48,7 @@
<% } else { %>
Variant
<% } %>
- .span-5
+ .span-4
<input class='variants' name='<%= (typeof(id) != "undefined") ? "old_variants[" + id + "]" : "variants[]" %>' type='text' value='<%= (typeof(name) != "undefined") ? name : "" %>' />
%textarea.hide#test_template
44 public/css/dashboard.css
View
@@ -9,9 +9,9 @@
}
.dashboard .selectable {
- background: #E5ECF9;
- border: 2px solid #C2D2EF;
- color: #000099;
+ background: rgb(239, 239, 239);
+ border: 2px solid rgb(207, 207, 207);
+ color: #8F8F8F;
cursor: pointer;
float: left;
height: 40px;
@@ -24,9 +24,9 @@
}
.dashboard .selectable.selected {
- background: #E6EFC2;
- border-color: #C6D880;
- color: #264409;
+ background: #E5ECF9;
+ border-color: #C2D2EF;
+ color: #000099;
text-decoration: none;
}
@@ -44,21 +44,6 @@
width: 90%;
}
-.dashboard #tests .dialog {
- margin-top: 15px;
- overflow: auto;
- padding: 5px 20px;
-}
-
-.dashboard #tests .dialog label {
- line-height: 27px;
-}
-
-.dashboard #tests .dialog .submit {
- float: right;
- margin-top: 4px;
-}
-
.dashboard #tests table {
border-width: 2px;
border-spacing: 0px;
@@ -69,9 +54,6 @@
margin-top: 15px;
}
-.dashboard #tests table a {
- text-decoration: none;
-}
.dashboard #tests table td {
padding: 10px;
@@ -127,4 +109,18 @@
.dashboard #tests table tr.odd {
background-color: #fff;
+}
+
+.dialog {
+ overflow: auto;
+ padding: 15px 0px 15px 20px;
+}
+
+.dialog label {
+ line-height: 27px;
+}
+
+.dialog .submit {
+ float: right;
+ margin: 15px 20px 0 0;
}
35 public/js/dashboard.js
View
@@ -15,7 +15,7 @@ window.Dashboard = function(sites) {
});
$('.add').click(add);
- $('#tests .variants').live('keyup', variantKeyUp);
+ $('.variants').live('keyup', variantKeyUp);
$('#tests .edit a').live('click', testEdit);
$('#tests .remove a').live('click', testRemove);
$('.selectable:not(.new)').live('click', selectableClick);
@@ -96,17 +96,17 @@ window.Dashboard = function(sites) {
});
} else {
$('#tests .dialog').remove();
- $('#tests .header').after($('#tests_form_template').tmpl());
- var dialog = $('#tests .dialog');
+ var dialog = $('#tests_form_template').tmpl();
$('.submit', dialog).before(
$('#tests_form_variant_template').tmpl({ control: true })
);
- $('input:first', dialog).focus();
+
+ lightbox(dialog);
$('.cancel', dialog).click(function() {
- dialog.remove();
+ dialog.trigger('close');
return false;
});
@@ -143,6 +143,17 @@ window.Dashboard = function(sites) {
}
}
+ function lightbox(el) {
+ el.lightbox_me({
+ destroyOnClose: true,
+ centered: true,
+ onLoad: function() {
+ $('input:first[type=text]', el)[0].select();
+ },
+ overlayCSS: { background: 'white', opacity: 0.75 }
+ });
+ }
+
function remove() {
if (!confirm('Are you sure?'))
return false;
@@ -247,8 +258,7 @@ window.Dashboard = function(sites) {
var submit = $('.submit', dialog);
var variant_template = $('#tests_form_variant_template');
- table.replaceWith(dialog);
- $('input:first', dialog)[0].select();
+ lightbox(dialog);
$.each(test.variants, function(i, item) {
submit.before(
@@ -267,8 +277,7 @@ window.Dashboard = function(sites) {
);
$('.cancel', dialog).click(function() {
- dialog.remove();
- $('#categories .selected').click().click();
+ dialog.trigger('close');
return false;
});
@@ -304,6 +313,8 @@ window.Dashboard = function(sites) {
return false;
});
+
+ return false;
}
function testRemove() {
@@ -332,10 +343,12 @@ window.Dashboard = function(sites) {
}
function variantKeyUp() {
- if ($('#tests .variants[value=]').length < 1)
- $('#tests .dialog .submit').before(
+ if ($('.variants[value=]').length < 1) {
+ $('.dialog .submit').before(
$('#tests_form_variant_template').tmpl()
);
+ $('.dialog').trigger('resize');
+ }
}
// Helpers
11 public/js/lightbox/LICENSE
View
@@ -0,0 +1,11 @@
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
44 public/js/lightbox/README.markdown
View
@@ -0,0 +1,44 @@
+jquery.lightbox_me.js
+version 2.2
+
+Have you ever had a DOM element that you wanted lightboxed, but didn't want all the fanciness of all the lightbox-related plug-ins out there? Lightbox_me is for you.
+
+Lightbox_me is an essential tool for the jQuery developer's toolbox. Feed it a DOM element wrapped in a jQuery object and it will lightbox it for you, no muss no fuss.
+
+View more information at http://buckwilson.me/lightboxme
+
+
+
+## Usage
+
+Lightbox_me is a jQuery plugin and requires jQuery to be included in order to work.
+
+Include both jQuery and the lightbox_me JavaScript file before calling the plugin in your JavaScript.
+
+Invoke the lightbox by calling the plugin on a jQuery object:
+$(dom).lightbox_me();
+
+
+
+## License
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+
+
+## Author Information
+
+Lightbox_me was created by Buck Wilson for Jive Software.
+http://buckwilson.me
+http://jivesoftware.com
+
234 public/js/lightbox/jquery.lightbox_me.js
View
@@ -0,0 +1,234 @@
+/*
+ * Copyright (C) 1999-2009 Jive Software. All rights reserved.
+ *
+ * This software is the proprietary information of Jive Software. Use is subject to license terms.
+ */
+
+/*
+* $ lightbox_me
+* By: Buck Wilson
+* Version : 2.2
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+* http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+
+(function($) {
+
+ $.fn.lightbox_me = function(options) {
+
+ return this.each(function() {
+
+ var
+ opts = $.extend({}, $.fn.lightbox_me.defaults, options),
+ $overlay = $('div.' + opts.classPrefix + '_overlay'),
+ $self = $(this),
+ $iframe = $('iframe#lb_iframe'),
+ ie6 = ($.browser.msie && $.browser.version < 7);
+
+ if ($overlay.length > 0) {
+ $overlay[0].removeModal(); // if the overlay exists, then a modal probably exists. Ditch it!
+ } else {
+ $overlay = $('<div class="' + opts.classPrefix + '_overlay" style="display:none;"/>'); // otherwise just create an all new overlay.
+ }
+
+ $iframe = ($iframe.length > 0) ? $iframe : $iframe = $('<iframe id="lb_iframe" style="z-index: ' + (opts.zIndex + 1) + '; display: none; border: none; margin: 0; padding: 0; position: absolute; width: 100%; height: 100%; top: 0; left: 0;"/>');
+
+ /*----------------------------------------------------
+ DOM Building
+ ---------------------------------------------------- */
+ if (ie6) {
+ var src = /^https/i.test(window.location.href || '') ? 'javascript:false' : 'about:blank';
+ $iframe.attr('src', src);
+ $('body').append($iframe);
+ } // iframe shim for ie6, to hide select elements
+ $('body').append($self).append($overlay);
+
+ /*----------------------------------------------------
+ CSS stuffs
+ ---------------------------------------------------- */
+
+ // set css of the modal'd window
+
+ setSelfPosition();
+ $self.css({left: '50%', marginLeft: ($self.outerWidth() / 2) * -1, zIndex: (opts.zIndex + 3) });
+
+ // set css of the overlay
+
+ setOverlayHeight(); // pulled this into a function because it is called on window resize.
+ $overlay.css({ position: 'absolute', width: '100%', top: 0, left: 0, right: 0, bottom: 0, zIndex: (opts.zIndex + 2) })
+ .css(opts.overlayCSS);
+
+ /*----------------------------------------------------
+ Animate it in.
+ ---------------------------------------------------- */
+
+ if ($overlay.is(":hidden")) {
+ $overlay.fadeIn(opts.overlaySpeed, function() {
+ $self[opts.appearEffect](opts.lightboxSpeed, function() { setOverlayHeight(); opts.onLoad()});
+ });
+ } else {
+ $self[opts.appearEffect](opts.lightboxSpeed, function() { setOverlayHeight(); opts.onLoad()});
+ }
+
+ /*----------------------------------------------------
+ Bind Events
+ ---------------------------------------------------- */
+
+ $(window).resize(setOverlayHeight)
+ .resize(setSelfPosition)
+ .scroll(setSelfPosition)
+ .keydown(observeEscapePress);
+
+ $self.find(opts.closeSelector).click(function() { removeModal(true); return false; });
+ $overlay.click(function() { if(opts.closeClick){ removeModal(true); return false;} });
+
+
+ $self.bind('close', function() { removeModal(true) });
+ $self.bind('resize', setSelfPosition);
+ $overlay[0].removeModal = removeModal;
+
+ /*----------------------------------------------------------------------------------------------------------------------------------------
+ ---------------------------------------------------------------------------------------------------------------------------------------- */
+
+ /*----------------------------------------------------
+ Private Functions
+ ---------------------------------------------------- */
+
+
+ function removeModal(removeO) {
+ // fades & removes modal, then unbinds events
+ $self[opts.disappearEffect](opts.lightboxDisappearSpeed, function() {
+
+ if (removeO) {
+ removeOverlay();
+ }
+
+ opts.destroyOnClose ? $self.remove() : $self.hide()
+
+
+ $self.find(opts.closeSelector).unbind('click');
+ $self.unbind('close');
+ $self.unbind('resize');
+ $(window).unbind('scroll', setSelfPosition);
+ $(window).unbind('resize', setSelfPosition);
+
+
+ });
+ }
+
+
+ function removeOverlay() {
+ // fades & removes overlay, then unbinds events
+ $overlay.fadeOut(opts.overlayDisappearSpeed, function() {
+ $(window).unbind('resize', setOverlayHeight);
+
+ $overlay.remove();
+ $overlay.unbind('click');
+
+
+ opts.onClose();
+
+ })
+ }
+
+
+
+ /* Function to bind to the window to observe the escape key press */
+ function observeEscapePress(e) {
+ if((e.keyCode == 27 || (e.DOM_VK_ESCAPE == 27 && e.which==0)) && opts.closeEsc) removeModal(true);
+ }
+
+ /* Set the height of the overlay
+ : if the document height is taller than the window, then set the overlay height to the document height.
+ : otherwise, just set overlay height: 100%
+ */
+ function setOverlayHeight() {
+ if ($(window).height() < $(document).height()) {
+ $overlay.css({height: $(document).height() + 'px'});
+ } else {
+ $overlay.css({height: '100%'});
+ if (ie6) {$('html,body').css('height','100%'); } // ie6 hack for height: 100%; TODO: handle this in IE7
+ }
+ }
+
+ /* Set the position of the modal'd window ($self)
+ : if $self is taller than the window, then make it absolutely positioned
+ : otherwise fixed
+ */
+ function setSelfPosition() {
+ var s = $self[0].style;
+
+ if (($self.height() + 80 >= $(window).height()) && ($self.css('position') != 'absolute' || ie6)) {
+ var topOffset = $(document).scrollTop() + 40;
+ $self.css({position: 'absolute', top: topOffset + 'px', marginTop: 0})
+ if (ie6) {
+ s.removeExpression('top');
+ }
+ } else if ($self.height()+ 80 < $(window).height()) {
+ if (ie6) {
+ s.position = 'absolute';
+ if (opts.centered) {
+ s.setExpression('top', '(document.documentElement.clientHeight || document.body.clientHeight) / 2 - (this.offsetHeight / 2) + (blah = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + "px"')
+ s.marginTop = 0;
+ } else {
+ var top = (opts.modalCSS && opts.modalCSS.top) ? parseInt(opts.modalCSS.top) : 0;
+ s.setExpression('top', '((blah = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + '+top+') + "px"')
+ }
+ } else {
+ if (opts.centered) {
+ $self.css({ position: 'fixed', top: '50%', marginTop: ($self.outerHeight() / 2) * -1})
+ } else {
+ $self.css({ position: 'fixed'}).css(opts.modalCSS);
+ }
+ }
+ }
+ }
+ });
+ };
+
+
+ $.fn.lightbox_me.defaults = {
+
+ // animation when appears
+ appearEffect: "fadeIn",
+ overlaySpeed: 300,
+ lightboxSpeed: "fast",
+
+ // animation when dissapears
+ disappearEffect: "fadeOut",
+ overlayDisappearSpeed: 300,
+ lightboxDisappearSpeed: "fast",
+
+ // close
+ closeSelector: ".close",
+ closeClick: true,
+ closeEsc: true,
+
+ // behavior
+ destroyOnClose: false,
+
+ // callbacks
+ onLoad: function() {},
+ onClose: function() {},
+
+ // style
+ classPrefix: 'lb',
+ zIndex: 999,
+ centered: false,
+ modalCSS: {top: '40px'},
+ overlayCSS: {background: 'black', opacity: .6}
+ }
+
+
+})(jQuery);
Please sign in to comment.
Something went wrong with that request. Please try again.