https://www.manlyaustralia.com.au/js/mbExtruder.js

1/*******************************************************************************
2 jquery.mb.components
3 Copyright (c) 2001-2010. Matteo Bicocchi (Pupunzi); Open lab srl, Firenze - Italy
4 email: [email protected]
5 site: http://pupunzi.com
6
7 Licences: MIT, GPL
8 http://www.opensource.org/licenses/mit-license.php
9 http://www.gnu.org/licenses/gpl.html
10 ******************************************************************************/
11
12/*
13 * Name:jquery.mb.extruder
14 * Version: 1.8.1
15 * dependencies: jquery.metadata.js, jquery.mb.flipV.js, jquery.hoverintent.js
16 */
17
18
19(function($) {
20  document.extruder=new Object();
21  document.extruder.left = 0;
22  document.extruder.top = 0;
23  document.extruder.idx=0;
24  var isIE=$.browser.msie;
25
26  $.mbExtruder= {
27    author:"Matteo Bicocchi",
28    version:"1.6",
29    defaults:{
30      width:350,
31      positionFixed:true,
32      sensibility:800,
33      position:"top",
34      top:"auto",
35      extruderOpacity:1,
36      flapMargin:25,
37      textOrientation:"bt", // or "tb" (top-bottom or bottom-top)
38      onExtOpen:function(){},
39      onExtContentLoad:function(){},
40      onExtClose:function(){},
41      hidePanelsOnClose:true,
42      autoCloseTime:200,
43      slideTimer:300
44    },
45
46    buildMbExtruder: function(options){
47      return this.each (function (){
48        this.options = {};
49        $.extend (this.options, $.mbExtruder.defaults);
50        $.extend (this.options, options);
51        this.idx=document.extruder.idx;
52        document.extruder.idx++;
53        var extruder,extruderContent,wrapper,extruderStyle,wrapperStyle,txt,timer;
54        extruder= $(this);
55        extruderContent=$(this).html();
56
57        extruder.css("zIndex",100);
58
59        var extW= this.options.position=="left"?0: this.options.width;
60
61        var c= $("<div/>").addClass("content").css({overflow:"hidden", width:extW});
62        c.append(extruderContent);
63        extruder.html(c);
64
65        var position=this.options.positionFixed?"fixed":"absolute";
66        extruder.addClass("extruder");
67        extruder.addClass(this.options.position);
68        extruderStyle=this.options.position=="top"?
69                      {position:position,top:0,left:"50%",marginLeft:-this.options.width/2,width:this.options.width}:
70                      {position:position,top:0,left:0,width:0};
71        //                      {position:position,top:0,left:-(this.options.width)};
72        extruder.css(extruderStyle);
73        if(!isIE) extruder.css({opacity:this.options.extruderOpacity});
74        extruder.wrapInner("<div class='ext_wrapper'></div>");
75        wrapper= extruder.find(".ext_wrapper");
76
77        wrapperStyle={position:"absolute", width:this.options.position=="left"?0:this.options.width};
78        wrapper.css(wrapperStyle);
79
80
81        if (this.options.position=="top"){
82          document.extruder.top++;
83          if (document.extruder.top>1){
84            alert("more than 1 mb.extruder on top is not supported jet... hope soon!");
85            return;
86          }
87        }
88
89
90        if ($.metadata){
91          $.metadata.setType("class");
92          if (extruder.metadata().title) extruder.attr("extTitle",extruder.metadata().title);
93          if (extruder.metadata().url) extruder.attr("extUrl",extruder.metadata().url);
94          if (extruder.metadata().data) extruder.attr("extData",extruder.metadata().data);
95        }
96        wrapper.append("<div class='footer'></div><div class='flap'><span class='flapLabel'/></div>");
97
98        txt=extruder.attr("extTitle")?extruder.attr("extTitle"): "";
99				
100				/* this bit not needed as we're not using rotated text labels */
101        /*extruder.find(".flapLabel").text(txt);
102        if(this.options.position=="left"){
103          extruder.find(".flapLabel").html(txt).css({whiteSpace:"noWrap"});//,height:this.options.flapDim
104          var orientation= this.options.textOrientation == "tb";
105          var labelH=extruder.find('.flapLabel').getFlipTextDim()[1];
106          extruder.find('.flapLabel').mbFlipText(orientation);
107        }else{
108          extruder.find(".flapLabel").html(txt).css({whiteSpace:"noWrap"});
109        }*/
110
111        if (extruder.attr("extUrl")){
112          extruder.setMbExtruderContent({
113            url:extruder.attr("extUrl"),
114            data:extruder.attr("extData"),
115            callback: function(){if (extruder.get(0).options.onExtContentLoad) extruder.get(0).options.onExtContentLoad();}
116          });
117        }else{
118          var container=$("<div>").addClass("text").css({width:extruder.get(0).options.width-20, height:extruder.height()-20, overflowY:"auto"});
119          c.wrapInner(container);
120          extruder.setExtruderVoicesAction();
121        }
122
123        extruder.find('.flap').bind("click",function(){
124          extruder.openMbExtruder();
125        });
126        
127				//Despite my best efforts this bit doesn't work
128				//extruder.find('.flapactive').bind("click",function(){
129        //  extruder.closeMbExtruder();
130        //});
131
132        c.bind("mouseleave", function(){
133          $(document).one("click.extruder"+extruder.get(0).idx,function(){extruder.closeMbExtruder();});
134          timer=setTimeout(function(){
135
136            if(extruder.get(0).options.autoCloseTime > 0){
137              extruder.closeMbExtruder();
138            }
139          },extruder.get(0).options.autoCloseTime);
140        }).bind("mouseenter", function(){clearTimeout(timer); $(document).unbind("click.extruder"+extruder.get(0).idx);});
141
142        if (this.options.position=="left"){
143          c.css({ height:"100%"});
144
145          if(this.options.top=="auto") {
146            extruder.find('.flap').css({marginRight:-40,top:100+document.extruder.left});
147            document.extruder.left+= labelH+this.options.flapMargin;
148          }else{
149            extruder.find('.flap').css({marginRight:-40,top:this.options.top});
150          }
151          var clicDiv=$("<div/>").css({position:"absolute",top:0,left:0,width:"100%",height:"100%",background:"transparent"});
152          extruder.find('.flap').append(clicDiv);
153        }
154      });
155    },
156
157    setMbExtruderContent: function(options){
158      this.options = {
159        url:false,
160        data:"",
161        callback:function(){}
162      };
163      $.extend (this.options, options);
164      if (!this.options.url || this.options.url.length==0){
165        alert("internal error: no URL to call");
166        return;
167      }
168      var url=this.options.url;
169      var data=this.options.data;
170      var where=$(this), voice;
171      var cb= this.options.callback;
172      var container=$("<div>").addClass("container").css({width:$(this).get(0).options.width});
173      where.find(".content").wrapInner(container);
174      $.ajax({

175        type: "POST",
176        url: url,
177        data: data,
178        success: function(html){
179          where.find(".container").append(html);
180          voice=where.find(".voice");
181          voice.hover(function(){$(this).addClass("hover");},function(){$(this).removeClass("hover");});
182          where.setExtruderVoicesAction();
183          if (cb) {
184            setTimeout(function(){cb();},100);
185          }
186        }
187      });
188    },
189
190    openMbExtruder:function(c){
191      var extruder= $(this);
192      $(document).unbind("click.extruder"+extruder.get(0).idx);
193      var opt= extruder.get(0).options;
194      extruder.addClass("open");
195      if(!isIE) extruder.css("opacity",1);
196      var position= opt.position;
197      extruder.mb_bringToFront();
198      if (position=="top"){
199        extruder.find('.content').slideDown( opt.slideTimer);
200        if(opt.onExtOpen) opt.onExtOpen();
201      }else{
202        if(!isIE) $(this).css("opacity",1);
203        extruder.find('.ext_wrapper').css({width:""});
204        extruder.find('.content').css({overflowX:"hidden"});
205        extruder.find('.content').animate({ width: opt.width}, opt.slideTimer);
206				
207				/*customisation*/
208        extruder.find('.flap').removeClass('flap').addClass('flapactive');
209
210if(opt.onExtOpen) opt.onExtOpen();
211      }
212      if (c) {
213        setTimeout(function(){
214          $(document).one("click.extruder"+extruder.get(0).idx,function(){extruder.closeMbExtruder(); console.debug(extruder.get(0).idx)});
215        },100);
216      }
217    },
218    closeMbExtruder:function(){
219      var extruder= $(this);
220      var opt= extruder.get(0).options;
221      extruder.removeClass("open");
222      $(document).unbind("click.extruder"+extruder.get(0).idx);
223      if(!isIE) extruder.css("opacity",opt.extruderOpacity);
224      if(opt.hidePanelsOnClose) extruder.hidePanelsOnClose();
225      if (opt.position=="top"){
226        extruder.find('.content').slideUp(opt.slideTimer);
227        if(opt.onExtClose) opt.onExtClose();
228      }else if (opt.position=="left"){
229        extruder.find('.content').animate({ width: 0 }, opt.slideTimer,function(){
230          extruder.find('.ext_wrapper').css({width:0});
231          extruder.find('.content').css({overflow:"hidden"});
232				
233					/*customisation*/
234					extruder.find('.flapactive').removeClass('flapactive').addClass('flap');
235				
236          if(opt.onExtClose) opt.onExtClose();
237        });
238      }
239    }
240  };
241
242  jQuery.fn.mb_bringToFront= function(){
243    var zi=10;
244    $('*').each(function() {
245      if($(this).css("position")=="absolute" ||$(this).css("position")=="fixed"){
246        var cur = parseInt($(this).css('zIndex'));
247        zi = cur > zi ? parseInt($(this).css('zIndex')) : zi;
248      }
249    });
250    $(this).css('zIndex',zi+=1);
251    return zi;
252  };
253
254  /*
255   * EXTRUDER CONTENT
256   */
257
258  $.fn.setExtruderVoicesAction=function(){
259    var extruder=$(this);
260    var voices= $(this).find(".voice");
261    voices.each(function(){
262      var voice=$(this);
263      if ($.metadata){
264        $.metadata.setType("class");
265        if (voice.metadata().panel) voice.attr("panel",voice.metadata().panel);
266        if (voice.metadata().data) voice.attr("data",voice.metadata().data);
267        if (voice.metadata().disabled) voice.attr("disabled", voice.metadata().disabled);
268      }
269
270      if (voice.attr("disabled"))
271        voice.disableExtruderVoice();
272
273      if (voice.attr("panel") && voice.attr("panel")!="false"){
274        voice.append("<span class='settingsBtn'/>");
275        voice.find(".settingsBtn").css({opacity:.5});
276        voice.find(".settingsBtn").hover(
277                function(){
278                  $(this).css({opacity:1});
279                },
280                function(){
281                  $(this).not(".sel").css({opacity:.5});
282                }).click(function(){
283          if ($(this).parents().hasClass("sel")){
284            extruder.hidePanelsOnClose();
285            return;
286          }
287          extruder.find(".optionsPanel").slideUp(400,function(){$(this).remove();});
288          voices.removeClass("sel");
289          voices.find(".settingsBtn").removeClass("sel").css({opacity:.5});
290          var content=$("<div class='optionsPanel'></div>");
291          $.ajax({

292            type: "POST",
293            url: voice.attr("panel"),
294            data: voice.attr("data"),
295            success: function(html){
296              var c= $(html);
297              content.html(c);
298              content.children()
299                      .addClass("panelVoice")
300                      .click(function(){
301                extruder.hidePanelsOnClose();
302                extruder.closeMbExtruder();
303              });
304              content.slideDown(400);
305            }
306          });
307          voice.after(content);
308          voice.addClass("sel");
309          voice.find(".settingsBtn").addClass("sel").css({opacity:1});
310        });
311      }
312
313      if (voice.find("a").length==0 && voice.attr("panel")){
314        voice.find(".label").not(".disabled").css("cursor","pointer").click(function(){
315          voice.find(".settingsBtn").click();
316        });
317      }
318
319      if ((!voice.attr("panel") ||voice.attr("panel")=="false" ) && (!voice.attr("disabled") || voice.attr("disabled")!="true")){
320        voice.find(".label").click(function(){
321          extruder.hidePanelsOnClose();
322          extruder.closeMbExtruder();
323        });
324      }
325    });
326  };
327
328  $.fn.disableExtruderVoice=function(){
329    var voice=$(this);
330    voice.removeClass("sel");
331    voice.next(".optionsPanel").slideUp(400,function(){$(this).remove();});
332    voice.attr("disabled",true);
333    voice.find(".label").css("opacity",.4);
334    voice.hover(function(){$(this).removeClass("hover");},function(){$(this).removeClass("hover");});
335    voice.find(".label").addClass("disabled").css("cursor","default");
336    voice.find(".settingsBtn").hide();
337    voice.bind("click",function(event){
338      event.stopPropagation();
339      return false;
340    });
341  };
342
343  $.fn.enableExtruderVoice=function(){
344    var voice=$(this);
345    voice.attr("disabled",false);
346    voice.find(".label").css("opacity",1);
347    voice.find(".label").removeClass("disabled").css("cursor","pointer");
348    voice.unbind("click");
349    voice.find(".settingsBtn").show()
350//            .click();
351  };
352
353  $.fn.hidePanelsOnClose=function(){
354    var voices= $(this).find(".voice");
355    $(this).find(".optionsPanel").slideUp(400,function(){$(this).remove();});
356    voices.removeClass("sel");
357    voices.find(".settingsBtn").removeClass("sel").css("opacity",.5);
358  };
359
360  $.fn.buildMbExtruder=$.mbExtruder.buildMbExtruder;
361  $.fn.setMbExtruderContent=$.mbExtruder.setMbExtruderContent;
362  $.fn.closeMbExtruder=$.mbExtruder.closeMbExtruder;
363  $.fn.openMbExtruder=$.mbExtruder.openMbExtruder;
364
365})(jQuery);