Skip to content
This repository has been archived by the owner on Aug 15, 2018. It is now read-only.

Commit

Permalink
various changes to make plugin/module editing more ajax-ish
Browse files Browse the repository at this point in the history
  • Loading branch information
jamescook committed Sep 11, 2008
1 parent 679f9c7 commit 72e2fce
Show file tree
Hide file tree
Showing 11 changed files with 384 additions and 11 deletions.
2 changes: 1 addition & 1 deletion app/views/layouts/admin.html.erb
View file
Expand Up @@ -14,7 +14,7 @@
<%= stylesheet_link_tag 'sprite' %>
<%= stylesheet_link_tag 'base' %>
<%= stylesheet_link_tag 'admin' %>
<%= javascript_include_tag :defaults %>
<%= javascript_include_tag :defaults, 'jquery', 'jQmodal', 'jquery.growl.js' %>
<%= javascript_include_tag 'show_and_hide' %>
<%= javascript_include_tag 'fckeditor/fckeditor' %>
<!--[if lt IE 7.]><%= javascript_include_tag 'pngfix.js' %><![endif]-->
Expand Down
4 changes: 2 additions & 2 deletions app/views/layouts/application.html.erb
View file
Expand Up @@ -14,7 +14,7 @@
<%= stylesheet_link_tag 'base' -%>
<%= stylesheet_link_tag 'sprite' -%>
<%= stylesheet_link_tag 'lightbox' -%>
<%= javascript_include_tag :defaults, 'effects', 'builder', 'lightbox', 'niftycube', 'handle_rounded_corners' -%>
<%= javascript_include_tag :defaults, 'effects', 'builder', 'lightbox', 'niftycube', 'handle_rounded_corners', 'jquery', 'jqModal', 'jquery.growl.js' -%>
<!--[if lt IE 7.]><%= javascript_include_tag 'pngfix.js' %><![endif]-->
</head>
<body>
Expand All @@ -23,7 +23,7 @@
<div id='header'>
<h1>
<span class='logo'></span>
<span>Ansuz CMS</span>
<span>Ansuz CMS!</span>
</h1>
<span class='credits'>
An open source CMS co-developed by:
Expand Down
2 changes: 1 addition & 1 deletion app/views/layouts/page.html.erb
View file
Expand Up @@ -14,7 +14,7 @@
<%= stylesheet_link_tag 'base' -%>
<%= stylesheet_link_tag 'sprite' -%>
<%= stylesheet_link_tag 'lightbox' -%>
<%= javascript_include_tag :defaults, 'effects', 'builder', 'lightbox', 'niftycube', 'handle_rounded_corners' -%>
<%= javascript_include_tag :defaults, 'effects', 'builder', 'lightbox', 'niftycube', 'handle_rounded_corners', 'jquery', 'jqModal', , 'jquery.growl.js' -%>
<!--[if lt IE 7.]><%= javascript_include_tag 'pngfix.js' %><![endif]-->
</head>
<body>
Expand Down
5 changes: 3 additions & 2 deletions app/views/page_admin/edit.html.erb
View file
Expand Up @@ -11,9 +11,10 @@
<% end -%>

<h2>Plugins on this page</h2>
<ul class='page_plugins'>
<ul id="page_plugins" class='page_plugins'>
<% @page.page_plugins.each do |plugin| -%>
<li><%= link_to(plugin.module_type, edit_page_plugin_path(plugin.id)) -%></li>
<li><%= link_to(plugin.module_type, plugin.module.edit_path, :class => 'edit_page_plugin') -%></li>
<% end -%>
</ul>
<%= link_to "Add Plugin", new_page_plugin_path(:page_id => @page.id) -%>
<div id="modal" class="jqmWindow"></div>
86 changes: 86 additions & 0 deletions public/javascripts/application.js
View file
@@ -1,2 +1,88 @@
// Place your application-specific JavaScript functions and classes here
// This file is automatically included by javascript_include_tag :defaults

// TODO: change css and image to be error-ish
function error_growl_template()
{
jQuery.growl.settings.displayTimeout = 6000;
jQuery.growl.settings.noticeTemplate = ''
+ '<div>'
+ '<div style="float: right; background-image: url(my.growlTheme/normalTop.png); position: relative; width: 259px; height: 16px; margin: 0pt;"></div>'
+ '<div style="float: right; background-image: url(my.growlTheme/normalBackground.png); position: relative; display: block; color: #ffffff; font-family: Arial; font-size: 12px; line-height: 14px; width: 259px; margin: 0pt;">'
+ ' <img style="margin: 14px; margin-top: 0px; float: left;" src="%image%" />'
+ ' <h3 style="margin: 0pt; margin-left: 77px; padding-bottom: 10px; font-size: 13px;">%title%</h3>'
+ ' <p style="margin: 0pt 14px; margin-left: 77px; font-size: 12px;">%message%</p>'
+ '</div>'
+ '<div style="float: right; background-image: url(my.growlTheme/normalBottom.png); position: relative; width: 259px; height: 16px; margin-bottom: 10px;"></div>'
+ '</div>';
jQuery.growl.settings.noticeCss = {
position: 'relative'
};

}

// TODO: add real image paths..
function notice_growl_template()
{
jQuery.growl.settings.displayTimeout = 4000;
jQuery.growl.settings.noticeTemplate = ''
+ '<div>'
+ '<div style="float: right; background-image: url(my.growlTheme/normalTop.png); position: relative; width: 259px; height: 16px; margin: 0pt;"></div>'
+ '<div style="float: right; background-image: url(my.growlTheme/normalBackground.png); position: relative; display: block; color: #ffffff; font-family: Arial; font-size: 12px; line-height: 14px; width: 259px; margin: 0pt;">'
+ ' <img style="margin: 14px; margin-top: 0px; float: left;" src="%image%" />'
+ ' <h3 style="margin: 0pt; margin-left: 77px; padding-bottom: 10px; font-size: 13px;">%title%</h3>'
+ ' <p style="margin: 0pt 14px; margin-left: 77px; font-size: 12px;">%message%</p>'
+ '</div>'
+ '<div style="float: right; background-image: url(my.growlTheme/normalBottom.png); position: relative; width: 259px; height: 16px; margin-bottom: 10px;"></div>'
+ '</div>';
jQuery.growl.settings.noticeCss = {
position: 'relative'
};
}

// Trigger a growl alert. Call one of the above template methods if you want to
function notify(message, title)
{
jQuery.growl(title || 'Notice', message || '');
jQuery.growl.settings = $default_growl_settings;
}


jQuery(document).ready(function()
{
// Prevent the default growl settings from being overwritten. OH NOES A GLOBAL
$default_growl_settings = jQuery.growl.settings;

var jq = jQuery.noConflict();
jq('a.edit_page_plugin', jq('#page_plugins')).click(function()
{
var modal = jq('#modal');
if(modal.html() == "")
{
jq.ajax({
type: 'GET',
url: jq(this).attr('href'),
complete: function(transport)
{
modal.jqm({overlay: 50});

jq('a.jqmClose').click(function(){
jq(this).jqmHide();
return false;
});

modal.jqmHide();
modal.html(transport.responseText)
modal.jqmShow();
}
});
} else {
// Don't load it again
modal.jqmShow();
}
return false
});

});


69 changes: 69 additions & 0 deletions public/javascripts/jqModal.js
View file
@@ -0,0 +1,69 @@
/*
* jqModal - Minimalist Modaling with jQuery
* (http://dev.iceburg.net/jquery/jqmodal/)
*
* Copyright (c) 2007,2008 Brice Burgess <bhb@iceburg.net>
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* $Version: 07/06/2008 +r13
*/
(function($) {
$.fn.jqm=function(o){
var p={
overlay: 50,
overlayClass: 'jqmOverlay',
closeClass: 'jqmClose',
trigger: '.jqModal',
ajax: F,
ajaxText: '',
target: F,
modal: F,
toTop: F,
onShow: F,
onHide: F,
onLoad: F
};
return this.each(function(){if(this._jqm)return H[this._jqm].c=$.extend({},H[this._jqm].c,o);s++;this._jqm=s;
H[s]={c:$.extend(p,$.jqm.params,o),a:F,w:$(this).addClass('jqmID'+s),s:s};
if(p.trigger)$(this).jqmAddTrigger(p.trigger);
});};

$.fn.jqmAddClose=function(e){return hs(this,e,'jqmHide');};
$.fn.jqmAddTrigger=function(e){return hs(this,e,'jqmShow');};
$.fn.jqmShow=function(t){return this.each(function(){$.jqm.open(this._jqm,t);});};
$.fn.jqmHide=function(t){return this.each(function(){$.jqm.close(this._jqm,t)});};

$.jqm = {
hash:{},
open:function(s,t){var h=H[s],c=h.c,cc='.'+c.closeClass,z=(parseInt(h.w.css('z-index'))),z=(z>0)?z:3000,o=$('<div></div>').css({height:'100%',width:'100%',position:'fixed',left:0,top:0,'z-index':z-1,opacity:c.overlay/100});if(h.a)return F;h.t=t;h.a=true;h.w.css('z-index',z);
if(c.modal) {if(!A[0])L('bind');A.push(s);}
else if(c.overlay > 0)h.w.jqmAddClose(o);
else o=F;

h.o=(o)?o.addClass(c.overlayClass).prependTo('body'):F;
if(ie6){$('html,body').css({height:'100%',width:'100%'});if(o){o=o.css({position:'absolute'})[0];for(var y in {Top:1,Left:1})o.style.setExpression(y.toLowerCase(),"(_=(document.documentElement.scroll"+y+" || document.body.scroll"+y+"))+'px'");}}

if(c.ajax) {var r=c.target||h.w,u=c.ajax,r=(typeof r == 'string')?$(r,h.w):$(r),u=(u.substr(0,1) == '@')?$(t).attr(u.substring(1)):u;
r.html(c.ajaxText).load(u,function(){if(c.onLoad)c.onLoad.call(this,h);if(cc)h.w.jqmAddClose($(cc,h.w));e(h);});}
else if(cc)h.w.jqmAddClose($(cc,h.w));

if(c.toTop&&h.o)h.w.before('<span id="jqmP'+h.w[0]._jqm+'"></span>').insertAfter(h.o);
(c.onShow)?c.onShow(h):h.w.show();e(h);return F;
},
close:function(s){var h=H[s];if(!h.a)return F;h.a=F;
if(A[0]){A.pop();if(!A[0])L('unbind');}
if(h.c.toTop&&h.o)$('#jqmP'+h.w[0]._jqm).after(h.w).remove();
if(h.c.onHide)h.c.onHide(h);else{h.w.hide();if(h.o)h.o.remove();} return F;
},
params:{}};
var s=0,H=$.jqm.hash,A=[],ie6=$.browser.msie&&($.browser.version == "6.0"),F=false,
i=$('<iframe src="javascript:false;document.write(\'\');" class="jqm"></iframe>').css({opacity:0}),
e=function(h){if(ie6)if(h.o)h.o.html('<p style="width:100%;height:100%"/>').prepend(i);else if(!$('iframe.jqm',h.w)[0])h.w.prepend(i); f(h);},
f=function(h){try{$(':input:visible',h.w)[0].focus();}catch(_){}},
L=function(t){$()[t]("keypress",m)[t]("keydown",m)[t]("mousedown",m);},
m=function(e){var h=H[A[A.length-1]],r=(!$(e.target).parents('.jqmID'+h.s)[0]);if(r)f(h);return !r;},
hs=function(w,t,c){return w.each(function(){var s=this._jqm;$(t).each(function() {
if(!this[c]){this[c]=[];$(this).click(function(){for(var i in {jqmShow:1,jqmHide:1})for(var s in this[i])if(H[this[i][s]])H[this[i][s]].w[i](this);return F;});}this[c].push(s);});});};
})(jQuery);
140 changes: 140 additions & 0 deletions public/javascripts/jquery.growl.js
View file
@@ -0,0 +1,140 @@
/*
* jQuery Growl plugin
* Version 1.0.0-b3 (09/04/2008)
* @requires jQuery v1.2.3 or later
*
* Examples at: http://fragmentedcode.com/jquery-growl
* Copyright (c) 2008 David Higgins
*
* Special thanks to Daniel Mota for inspiration:
* http://icebeat.bitacoras.com/mootools/growl/
*/

/*
USAGE:
$.growl(title, msg);
$.growl(title, msg, image);
$.growl(title, msg, image, priority);
THEME/SKIN:
You can override the default look and feel by updating these objects:
$.growl.settings.displayTimeout = 4000;
$.growl.settings.noticeTemplate = ''
+ '<div>'
+ '<div style="float: right; background-image: url(my.growlTheme/normalTop.png); position: relative; width: 259px; height: 16px; margin: 0pt;"></div>'
+ '<div style="float: right; background-image: url(my.growlTheme/normalBackground.png); position: relative; display: block; color: #ffffff; font-family: Arial; font-size: 12px; line-height: 14px; width: 259px; margin: 0pt;">'
+ ' <img style="margin: 14px; margin-top: 0px; float: left;" src="%image%" />'
+ ' <h3 style="margin: 0pt; margin-left: 77px; padding-bottom: 10px; font-size: 13px;">%title%</h3>'
+ ' <p style="margin: 0pt 14px; margin-left: 77px; font-size: 12px;">%message%</p>'
+ '</div>'
+ '<div style="float: right; background-image: url(my.growlTheme/normalBottom.png); position: relative; width: 259px; height: 16px; margin-bottom: 10px;"></div>'
+ '</div>';
$.growl.settings.noticeCss = {
position: 'relative'
};
To change the 'dock' look, and position:
$.growl.settings.dockTemplate = '<div></div>';
$.growl.settings.dockCss = {
position: 'absolute',
top: '10px',
right: '10px',
width: '300px'
};
The dockCss will allow you to 'dock' the notifications to a specific area
on the page, such as TopRight (the default) or TopLeft, perhaps even in a
smaller area with "overflow: scroll" enabled?
*/

(function($) {

jQuery.growl = function(title,message,image,priority) { notify(title,message,image,priority); }
jQuery.growl.version = "1.0.0-b2";

function create(rebuild) {
var instance = document.getElementById('growlDock');
if(!instance || rebuild) {
instance = $(jQuery.growl.settings.dockTemplate).attr('id', 'growlDock').addClass('growl');
if(jQuery.growl.settings.defaultStylesheet) {
$('head').append('<link rel="stylesheet" type="text/css" href="' + jQuery.growl.settings.defaultStylesheet + '" />');
}

} else {
instance = $(instance);
}
$('body').append(instance.css(jQuery.growl.settings.dockCss));
return instance;
};

function r(text, expr, val) {
while(expr.test(text)) {
text = text.replace(expr, val);
}
return text;
};

function notify(title,message,image,priority) {
var instance = create();
var html = jQuery.growl.settings.noticeTemplate;
if(typeof(html) == 'object') html = $(html).html();
html = r(html, /%message%/, (message?message:''));
html = r(html, /%title%/, (title?title:''));
html = r(html, /%image%/, (image?image:jQuery.growl.settings.defaultImage));
html = r(html, /%priority%/, (priority?priority:'normal'));

var notice = $(html)
.hide()
.css(jQuery.growl.settings.noticeCss)
.fadeIn(jQuery.growl.settings.notice);;

jQuery.growl.settings.noticeDisplay(notice);
instance.append(notice);
if (jQuery.growl.settings.displayTimeout > 0) {
setTimeout(function(){
jQuery.growl.settings.noticeRemove(notice, function(){
notice.remove();
});
}, jQuery.growl.settings.displayTimeout);
}
};


// default settings
jQuery.growl.settings = {
dockTemplate: '<div></div>',
dockCss: {
position: 'fixed',
top: '10px',
right: '10px',
width: '300px',
zIndex: 50000
},
noticeTemplate:
'<div class="notice">' +
' <h3 style="margin-top: 15px">%title%</h3>' +
' <p>%message%</p>' +
'</div>',
noticeCss: {
opacity: .75,
backgroundColor: '#333333',
color: '#ffffff'
},
noticeDisplay: function(notice) {
notice.css({'opacity':'0'}).fadeIn(jQuery.growl.settings.noticeFadeTimeout);
},
noticeRemove: function(notice, callback) {
notice.animate({opacity: '0', height: '0px'}, {duration:jQuery.growl.settings.noticeFadeTimeout, complete: callback});
},
noticeFadeTimeout: 'slow',
displayTimeout: 3500,
defaultImage: 'growl.jpg',
defaultStylesheet: null,
noticeElement: function(el) {
jQuery.growl.settings.noticeTemplate = $(el);
}
};
})(jQuery);

0 comments on commit 72e2fce

Please sign in to comment.