home *** CD-ROM | disk | FTP | other *** search
/ 202.64.131.39 / 202.64.131.39.tar / 202.64.131.39 / hung-fook-tong / hung-fook-tong70-08-27-2014_htm_files / bx_cyclemeb_conf.js < prev    next >
Text File  |  2014-08-27  |  10KB  |  288 lines
  1. var xaraSwidgets_cyclemebTemplates = {
  2.  
  3.  
  4. entry:            '<div class="slideshow_item"><div class="image"><a href="{link}"><img class="{com_id}_image" src="{image}" alt=""  border="none"  /></a></div>' 
  5.         +        '<div class="data"><img class="heading" src="{heading}" style="border:none;">'
  6.         +        '<p><img  src="{desc}" style="border:none;"></p></div></div>',
  7.  
  8. /*myTheme:            '{theme}',
  9. timeout:            '{pause}',
  10. speed:                '{speed}',
  11. */        
  12.         
  13.         main:    '<div id="{component_id}OuterDiv" ><a href="#" class="slideshow_prev"><span>Previous</span></a>'
  14.             +    '<a href="#" class="slideshow_next"><span>Next</span></a><div class="{component_id}_paging slideshow_paging"></div>'
  15.             +     '<div class="slideshow_box {component_id}_box"><div class="data"></div></div>'
  16.             +   '<div id="{component_id}_slideshow_2" class="slideshow">'
  17.             +     '{entryhtml}'
  18.             +    '</div>'
  19. };
  20.  
  21.     
  22. function xsw_cs_htmlbr(str) {
  23.     if (str == undefined)
  24.         return '';
  25.     var lines = str.split("\n");
  26.     for (var t = 0; t < lines.length; t++) {
  27.         lines[t] = $("<p>").text(lines[t]).html();
  28.     }
  29.     return lines.join("<br/>");
  30. }
  31.  
  32.  
  33. function xaraSwidgets_cyclemeaGetConfig(value, d)
  34. {
  35.     var ret = parseInt(value);
  36.     
  37.     if(!isNaN(ret))
  38.     {
  39.         return ret;
  40.     }
  41.     else
  42.     {
  43.         return d;
  44.     }
  45. }
  46.  
  47.  
  48. // this is the constructor for a component
  49. // it loops through each 'entry' in the array of data and compiles the entry template for it
  50. // it then applies the resulting HTML to the main template before writing the whole lot to the div on the page
  51. // it then initialises the actual jquery plugin for the div (that now contains the required HTML as a result of writing the template to it)
  52. function xaraSwidgets_cyclemebConstructor(divID, data)
  53. {
  54.     var entryHTML = '';
  55.     myTheme = (data[0].theme);
  56.     timeout = (data[0].pause);
  57.     speed = (data[0].speed);
  58.     panelTrans = (data[0].trans);
  59.  
  60.     var config = data[0];
  61.  
  62.     var useTransition = xaraSwidgets_cyclemeaGetConfig(config.effect, 0);
  63.     
  64.     var effects = [
  65.         
  66.     'scrollHorz',
  67.     'scrollVert',
  68.     'blindX',
  69.     'blindY',
  70.     'blindZ',
  71.     'cover',
  72.     'curtainX',
  73.     'curtainY',
  74.     'fade',
  75.     'fadeZoom',
  76.     'growX',
  77.     'growY',
  78.     'shuffle',
  79.     'slideX',
  80.     'slideY',
  81.     'wipe',
  82.     'zoom',
  83.     'all'
  84.  
  85.     ];
  86.  
  87.     var effectName = effects[useTransition];
  88.  
  89.     
  90.     // loop through each entry in the array and compile the entry template for it
  91.     for(var i=1; i<data.length; i++)
  92.     {
  93.      data[i].desc = xsw_cs_htmlbr(data[i].desc);
  94.     entryHTML += xaraSwidgets_compileTemplate(xaraSwidgets_cyclemebTemplates.entry, data[i]);
  95.     panelimage = (data[0].bimage)
  96.     }
  97.     var panelimage1 = panelimage;
  98.     var com1_id=divID;
  99. //    entryHTML = xsw_ea_htmlbr(entryHTML);
  100.     // now lets compile the 'main' template which acts as a wrapper for each entry
  101.  
  102.     // get the timeout value
  103.     var enteredTimeout = parseFloat(timeout)*1000;
  104.     var defaultTimeout = '5000';
  105.     var timeout = isNaN(enteredTimeout) ? defaultTimeout : enteredTimeout;
  106.  
  107.     // get the speed value
  108.     var enteredSpeed = parseFloat(speed)*1000;
  109.     var defaultSpeed = '700';
  110.     var speed = isNaN(enteredSpeed) ? defaultSpeed : enteredSpeed;
  111.  
  112.  
  113.     // get the opacity value for the panel
  114.         var enteredTrans = parseFloat(panelTrans);
  115.         var defaultTrans = '0.1';
  116.         var panelTrans = isNaN(enteredTrans) ? defaultTrans : enteredTrans
  117.         var panelTransIE = panelTrans*100;
  118.  
  119.  
  120.     var mainData = {
  121.         component_id:divID,
  122.         entryhtml:entryHTML,
  123.         com_id:com1_id,
  124.         panelimage:panelimage1
  125.     };
  126.     
  127.     
  128.  
  129.     var mainTemplate = xaraSwidgets_compileTemplate(xaraSwidgets_cyclemebTemplates.main, mainData);
  130.  
  131.         // find the theme value to determine whether theme colors should be matched.
  132.         
  133.         var defaultTheme = 0;
  134.         var enteredTheme = parseInt(myTheme);
  135.         var theme = isNaN(enteredTheme) ? defaultTheme : enteredTheme
  136. //        var theme = parseInt(myTheme);
  137.         if(!isNaN(theme))
  138.             {
  139.             useTheme = theme;
  140.             }    
  141.         if (theme ==1){
  142.             var $p = $("<p class='xr_c_Theme_Color_1'></p>").hide().appendTo("body");
  143.             
  144.             }
  145.         else if (theme ==0){
  146.             var $p = $("<p class='xr_c_Cycleb_Color_1'></p>").hide().appendTo("body");
  147.             
  148.             }
  149.  
  150.         var enteredovercolor = $p.css("color");
  151.         var defaultovercolor = '#000';
  152.     //    var overcolor = isNaN(enteredovercolor) ? defaultovercolor : enteredovercolor
  153.         
  154.         if (enteredovercolor !== 'rgb(0, 0, 0)')
  155.         {
  156.         var overcolor= enteredovercolor
  157.         }
  158.         else 
  159.         {
  160.         var overcolor= defaultovercolor;
  161.         }
  162.  
  163.         if($.browser.msie && document.documentMode && document.documentMode <= 8) {
  164.             // ie less than version 9
  165.             if (enteredovercolor !== '#000000' )
  166.             {
  167.             var overcolor= enteredovercolor
  168.             }
  169.             else 
  170.             {
  171.             var overcolor= defaultovercolor;
  172.             }
  173.  
  174.         }
  175.  
  176.             $p.remove();
  177.  
  178. /*    
  179.         // get the theme color value 
  180.     var $p = $("<p class='xr_c_Theme_Color_1'></p>").hide().appendTo("body");
  181.     var overcolor = $p.css("color");
  182. //    console.log(overcolor);
  183.         var overcolor = $p.css("color");
  184.         var defaultovercolor = '#000';
  185.         var enteredovercolor = overcolor;
  186.         
  187.         if (enteredovercolor !== '' )
  188.         {
  189.         var overcolor= enteredovercolor
  190.         }
  191.         else 
  192.         {
  193.         var overcolor= defaultovercolor;
  194.         }
  195.         
  196.     $p.remove();
  197. */
  198.     
  199.     // now lets apply the resulting HTML for the whole component to the main DIV that was exported by XARA
  200.     
  201.     $('#' + divID).html(mainTemplate);
  202.     
  203.     
  204.     // get the dimensions of the parent div  
  205.     
  206.     var width = $('#' + divID).parent('div').width();
  207.     var height = $('#' + divID).parent('div').height();
  208.     $('#' + divID).css('width',width);
  209.     $('#' + divID).css('height',height);
  210.     $('#' + divID).addClass("ss2_wrapper");
  211.     $('.' + divID +'_image').css('width',width);
  212.     $('.' + divID +'_image').css('height',height);
  213.     $('#' + divID).parent('div').css('overflow', 'visible');
  214. //    $('.' + divID +'_box').css('background',overcolor);
  215.     
  216.     
  217.     
  218.  
  219.     // invoke the effect 
  220.         $('#' + divID + '_slideshow_2').cycle({
  221.                         
  222.     fx: effectName, // choose your transition type, ex: fade, scrollUp, shuffle, etc...
  223.         speed:  speed, 
  224.         timeout: timeout, 
  225.         slideExpr: '.' + divID +'_image',
  226.         pager: '#' + divID +' .slideshow_paging', 
  227.         prev: '#' + divID +' .slideshow_prev',
  228.         next: '#' + divID +' .slideshow_next',
  229.         before: function(currSlideElement, nextSlideElement) {
  230.         //    var data = $('.data', $(nextSlideElement)).html();
  231.         var data = $(nextSlideElement).parents('.slideshow_item').find('.data').html();
  232.             $('.'+divID+'_box').stop(true, true).animate({ bottom:'-110px'}, 400, function(){
  233.                 $('.'+divID+'_box .data').html(data);
  234.             });
  235.             $('.'+divID+'_box').delay(100).animate({ bottom:'0'}, 400);
  236.         }
  237.     });
  238.  
  239.     $('#'+ divID).mouseenter(function(){
  240.         $('#' + divID + '_slideshow_2').cycle('pause');
  241.         $('#' + divID +' .slideshow_prev').stop(true, true).animate({ left:'20px'}, 200);
  242.         $('#' + divID +' .slideshow_next').stop(true, true).animate({ right:'20px'}, 200);
  243.     }).mouseleave(function(){
  244.         $('#' + divID + '_slideshow_2').cycle('resume');
  245.         $('#' + divID +' .slideshow_prev').stop(true, true).animate({ left:'-42px'}, 200);
  246.         $('#' + divID +' .slideshow_next').stop(true, true).animate({ right:'-42px'}, 200);
  247.     });
  248.  
  249.  
  250.      // support for swipe events for ipad and android
  251.     $('#' + divID + '_slideshow_2').swipe({
  252.         swipe:function(event, direction, distance, duration, fingerCount) {
  253.             //      $(this).text("You swiped " + direction );
  254.             //If we are moving before swipe, and we are going Lor R in X mode, or U or D in Y mode then drag.
  255.             if( direction=="left" || direction=="right" )
  256.             {
  257.                 var duration=0;
  258.  
  259.                 if (direction == "left")
  260.                     $('#' + divID + '_slideshow_2').cycle('next')
  261.  
  262.  
  263.  
  264.                 else if (direction == "right")
  265.                     $('#' + divID + '_slideshow_2').cycle('prev')
  266.  
  267.             }
  268.         }
  269.     });
  270.  
  271. // write the css values to the doc  
  272.     
  273.  
  274.     $('head').append("<style> .ss2_wrapper .slideshow_item {width:"+ width +"px; height:"+ height +"px;}" 
  275.     +".ss2_wrapper a.slideshow_prev { position:absolute; left:-42px; top:33%; z-index:1; width:40px; height:46px; outline:none; background:"+overcolor+"; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -moz-box-shadow: 0 0 2px #222; -webkit-box-shadow: 0 0 2px #222; box-shadow: 0 0 2px #222;  opacity: .8; /* For IE 5-7 */ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);    /* For IE 8 */-MS-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=80)'; }"
  276.     +".ss2_wrapper a.slideshow_next { position:absolute; right:-42px; top:33%; z-index:1; width:40px; height:46px; outline:none; background:"+overcolor+"; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -moz-box-shadow: 0 0 2px #222; -webkit-box-shadow: 0 0 2px #222; box-shadow: 0 0 2px #222; opacity: .8; /* For IE 5-7 */ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);    /* For IE 8 */-MS-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=80)'; }"
  277.     +"." + divID +"_paging { position:absolute; top:10px; right:10px; z-index:1; font-size:12px; padding:3px 2px; background:"+overcolor+"; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -moz-box-shadow: 0 0 2px #222; -webkit-box-shadow: 0 0 2px #222; box-shadow: 0 0 2px #222; opacity: .8; /* For IE 5-7 */ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);    /* For IE 8 */-MS-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=80)'; }"
  278.     +"#" + divID +"outerdiv a.slideshow_prev:hover { opacity: 1.0; /* For IE 5-7 */ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);    /* For IE 8 */-MS-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; }"
  279.     +"#" + divID +"outerdiv a.slideshow_next:hover  { opacity: 1.0; /* For IE 5-7 */ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);    /* For IE 8 */-MS-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; }"
  280.     +"." + divID +"_box {background:"+overcolor+";  opacity: "+panelTrans+"; /* For IE 5-7 */ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity="+panelTransIE+");    /* For IE 8 */-MS-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity="+panelTransIE+")';}" 
  281.  
  282.     +"</style>" );    
  283.     
  284.     
  285.  
  286.                     
  287. }
  288.