Onlinehilfe als modale Overlays.
authorSven Schöling <s.schoeling@linet-services.de>
Mon, 5 Dec 2011 10:25:51 +0000 (11:25 +0100)
committerSven Schöling <s.schoeling@linet-services.de>
Mon, 5 Dec 2011 10:25:51 +0000 (11:25 +0100)
L.online_help_tag produziert jetzt nicht mehr ein Popup sondern ein modales Overlay.
Im template muss leider im Moment noch ein Ziel dafür eingebunden werden mit:

  [% PROCESS 'common/help_overlay.html' %]

SL/Form.pm
SL/Template/Plugin/L.pm
css/lx-office-erp.css
image/close.png [new file with mode: 0644]
js/jqModal.js [new symlink]
js/jqModal/jqModal.js [new file with mode: 0644]
templates/webpages/common/help_overlay.html [new file with mode: 0644]

index 37e4a21..eaee096 100644 (file)
@@ -701,6 +701,7 @@ sub header {
                 '<script type="text/javascript" src="js/jscalendar/calendar-setup.js"></script>',
                 '<script type="text/javascript" src="js/part_selection.js"></script>',
                 '<script type="text/javascript" src="js/jquery-ui.js"></script>',
+                '<script type="text/javascript" src="js/jqModal.js"></script>',
                 '<link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-1.8.12.custom.css">';
   push @header, $self->{javascript} if $self->{javascript};
   push @header, map { $_->show_javascript } @{ $self->{AJAX} || [] };
index 770c7ba..d8d223e 100644 (file)
@@ -507,7 +507,7 @@ sub online_help_tag {
 
   die 'malformed help tag' unless $tag =~ /^[a-zA-Z0-9_]+$/;
   return unless -f $file;
-  return $self->html_tag('a', $text, href => $file, target => '_blank');
+  return $self->html_tag('a', $text, href => $file, class => 'jqModal')
 }
 
 sub dump {
index a381430..455fe59 100644 (file)
@@ -326,3 +326,33 @@ label {
   margin-bottom: 5px;
   padding: 5px;
 }
+
+.jqmWindow {
+  display: none;
+
+  position: fixed;
+  top: 17%;
+  left: 40%;
+
+  margin-left: -200px;
+  width: 700px;
+
+  background-color: lemonchiffon;
+  color: #333;
+  border: 1px solid black;
+  padding: 4px;
+}
+
+.jqmContent {
+  padding: 8px;
+}
+
+.jqmWindow h1 {
+  border: 0;
+  padding: 0;
+  background-color: lemonchiffon;
+}
+
+.jqmOverlay {
+  background-color: #000;
+}
diff --git a/image/close.png b/image/close.png
new file mode 100644 (file)
index 0000000..c46e9b0
Binary files /dev/null and b/image/close.png differ
diff --git a/js/jqModal.js b/js/jqModal.js
new file mode 120000 (symlink)
index 0000000..4f21805
--- /dev/null
@@ -0,0 +1 @@
+jqModal/jqModal.js
\ No newline at end of file
diff --git a/js/jqModal/jqModal.js b/js/jqModal/jqModal.js
new file mode 100644 (file)
index 0000000..19ed955
--- /dev/null
@@ -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: 03/01/2009 +r14
+ */
+(function($) {
+$.fn.jqm=function(o){
+var p={
+overlay: 0,
+overlayClass: 'jqmOverlay',
+closeClass: 'jqmClose',
+trigger: '.jqModal',
+ajax: '@href',
+ajaxText: '<img src="images/spinner.gif" alt="...">',
+target: '#help_content',
+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(){t=t||window.event;$.jqm.open(this._jqm,t);});};
+$.fn.jqmHide=function(t){return this.each(function(){t=t||window.event;$.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);
diff --git a/templates/webpages/common/help_overlay.html b/templates/webpages/common/help_overlay.html
new file mode 100644 (file)
index 0000000..a192a88
--- /dev/null
@@ -0,0 +1,11 @@
+[%- USE T8 %]
+<script type="text/javascript">
+  $().ready(function(){$('#help_div').jqm()});
+</script>
+<div class='jqmWindow' id='help_div'>
+  <a href='#' style='float:right' class='jqmClose'><img src='image/close.png' border='0' alt='[% 'Close Dialog' | $T8 %]'></a>
+  <div class='jqmContent' id='help_content'>
+    [% 'Please wait...' | $T8 %]
+    <img src='image/spinner.gif' alt="[% 'loading' | $T8 %]">
+  </div>
+</div>