satsu

setup.js

Jul 25th, 2015
261
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. function setSidebarHeight(){
  2.     setTimeout(function(){
  3. var height = $(document).height();
  4.     $('.grid_12').each(function () {
  5.         height -= $(this).outerHeight();
  6.     });
  7.     height -= $('#site_info').outerHeight();
  8.     height-=1;
  9.     //salert(height);
  10.     $('.sidemenu').css('height', height);                      
  11.                         },100);
  12. }
  13.  
  14. //Dashboard chart
  15. function setupDashboardChart(containerElementId) {
  16.     var s1 = [200, 300, 400, 500, 600, 700, 800, 900, 1000,200, 300, 400, 500, 600, 700, 800, 900, 1000];
  17.    
  18.     // Can specify a custom tick Array.
  19.     // Ticks should match up one for each y value (category) in the series.
  20.     var ticks = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i','j', 'k', 'l', 'm', 'n', 'o'];
  21.  
  22.     var plot1 = $.jqplot(containerElementId, [s1], {
  23.         // The "seriesDefaults" option is an options object that will
  24.         // be applied to all series in the chart.
  25.         seriesDefaults: {
  26.             renderer: $.jqplot.BarRenderer,
  27.             rendererOptions: { fillToZero: true }
  28.         },
  29.         // Custom labels for the series are specified with the "label"
  30.         // option on the series option.  Here a series option object
  31.         // is specified for each series.
  32.         series: [
  33.             { label: 'RW' }
  34.          
  35.         ],
  36.         // Show the legend and put it outside the grid, but inside the
  37.         // plot container, shrinking the grid to accomodate the legend.
  38.         // A value of "outside" would not shrink the grid and allow
  39.         // the legend to overflow the container.
  40.         legend: {
  41.             show: true,
  42.             placement: 'outsideGrid'
  43.         },
  44.         axes: {
  45.             // Use a category axis on the x axis and use our custom ticks.
  46.             xaxis: {
  47.                 renderer: $.jqplot.CategoryAxisRenderer,
  48.                 ticks: ticks
  49.             },
  50.             // Pad the y axis just a little so bars can get close to, but
  51.             // not touch, the grid boundaries.  1.2 is the default padding.
  52.             yaxis: {
  53.                 pad: 1.05,
  54.                 tickOptions: { formatString: '$%d' }
  55.             }
  56.         }
  57.     });
  58. }
  59. //points charts
  60.  
  61. function drawPointsChart(containerElement) {
  62.  
  63.  
  64.     var cosPoints = [];
  65.     for (var i = 0; i < 2 * Math.PI; i += 0.4) {
  66.         cosPoints.push([i, Math.cos(i)]);
  67.     }
  68.  
  69.     var sinPoints = [];
  70.     for (var i = 0; i < 2 * Math.PI; i += 0.4) {
  71.         sinPoints.push([i, 2 * Math.sin(i - .8)]);
  72.     }
  73.  
  74.     var powPoints1 = [];
  75.     for (var i = 0; i < 2 * Math.PI; i += 0.4) {
  76.         powPoints1.push([i, 2.5 + Math.pow(i / 4, 2)]);
  77.     }
  78.  
  79.     var powPoints2 = [];
  80.     for (var i = 0; i < 2 * Math.PI; i += 0.4) {
  81.         powPoints2.push([i, -2.5 - Math.pow(i / 4, 2)]);
  82.     }
  83.  
  84.     var plot3 = $.jqplot(containerElement, [cosPoints, sinPoints, powPoints1, powPoints2],
  85.     {
  86.         title: 'Line Style Options',
  87.         // Series options are specified as an array of objects, one object
  88.         // for each series.
  89.         series: [
  90.           {
  91.               // Change our line width and use a diamond shaped marker.
  92.               lineWidth: 2,
  93.               markerOptions: { style: 'dimaond' }
  94.           },
  95.           {
  96.               // Don't show a line, just show markers.
  97.               // Make the markers 7 pixels with an 'x' style
  98.               showLine: false,
  99.               markerOptions: { size: 7, style: "x" }
  100.           },
  101.           {
  102.               // Use (open) circlular markers.
  103.               markerOptions: { style: "circle" }
  104.           },
  105.           {
  106.               // Use a thicker, 5 pixel line and 10 pixel
  107.               // filled square markers.
  108.               lineWidth: 5,
  109.               markerOptions: { style: "filledSquare", size: 10 }
  110.           }
  111.       ]
  112.     }
  113.   );
  114.  
  115. }
  116.  
  117. //draw pie chart
  118. function drawPieChart(containerElement) {
  119.     var data = [
  120.     ['Heavy Industry', 12], ['Retail', 9], ['Light Industry', 14],
  121.     ['Out of home', 16], ['Commuting', 7], ['Orientation', 9]
  122.   ];
  123.     var plot1 = jQuery.jqplot('chart1', [data],
  124.     {
  125.         seriesDefaults: {
  126.             // Make this a pie chart.
  127.             renderer: jQuery.jqplot.PieRenderer,
  128.             rendererOptions: {
  129.                 // Put data labels on the pie slices.
  130.                 // By default, labels show the percentage of the slice.
  131.                 showDataLabels: true
  132.             }
  133.         },
  134.         legend: { show: true, location: 'e' }
  135.     }
  136.   );
  137. }
  138. //draw donut chart
  139. function drawDonutChart(containerElement) {
  140.     var s1 = [['a', 6], ['b', 8], ['c', 14], ['d', 20]];
  141.     var s2 = [['a', 8], ['b', 12], ['c', 6], ['d', 9]];
  142.  
  143.     var plot3 = $.jqplot(containerElement, [s1, s2], {
  144.         seriesDefaults: {
  145.             // make this a donut chart.
  146.             renderer: $.jqplot.DonutRenderer,
  147.             rendererOptions: {
  148.                 // Donut's can be cut into slices like pies.
  149.                 sliceMargin: 3,
  150.                 // Pies and donuts can start at any arbitrary angle.
  151.                 startAngle: -90,
  152.                 showDataLabels: true,
  153.                 // By default, data labels show the percentage of the donut/pie.
  154.                 // You can show the data 'value' or data 'label' instead.
  155.                 dataLabels: 'value'
  156.             }
  157.         }
  158.     });
  159. }
  160.  
  161. //draw bar chart
  162. function drawBarchart(containerElement) {
  163.     var s1 = [200, 600, 700, 1000];
  164.     var s2 = [460, -210, 690, 820];
  165.     var s3 = [-260, -440, 320, 200];
  166.     // Can specify a custom tick Array.
  167.     // Ticks should match up one for each y value (category) in the series.
  168.     var ticks = ['May', 'June', 'July', 'August'];
  169.  
  170.     var plot1 = $.jqplot(containerElement, [s1, s2, s3], {
  171.         // The "seriesDefaults" option is an options object that will
  172.         // be applied to all series in the chart.
  173.         seriesDefaults: {
  174.             renderer: $.jqplot.BarRenderer,
  175.             rendererOptions: { fillToZero: true }
  176.         },
  177.         // Custom labels for the series are specified with the "label"
  178.         // option on the series option.  Here a series option object
  179.         // is specified for each series.
  180.         series: [
  181.             { label: 'Hotel' },
  182.             { label: 'Event Regristration' },
  183.             { label: 'Airfare' }
  184.         ],
  185.         // Show the legend and put it outside the grid, but inside the
  186.         // plot container, shrinking the grid to accomodate the legend.
  187.         // A value of "outside" would not shrink the grid and allow
  188.         // the legend to overflow the container.
  189.         legend: {
  190.             show: true,
  191.             placement: 'outsideGrid'
  192.         },
  193.         axes: {
  194.             // Use a category axis on the x axis and use our custom ticks.
  195.             xaxis: {
  196.                 renderer: $.jqplot.CategoryAxisRenderer,
  197.                 ticks: ticks
  198.             },
  199.             // Pad the y axis just a little so bars can get close to, but
  200.             // not touch, the grid boundaries.  1.2 is the default padding.
  201.             yaxis: {
  202.                 pad: 1.05,
  203.                 tickOptions: { formatString: '$%d' }
  204.             }
  205.         }
  206.     });
  207. }
  208. //draw bubble chart
  209. function drawBubbleChart(containerElement) {
  210.  
  211.     var arr = [[11, 123, 1236, ""], [45, 92, 1067, ""],
  212.   [24, 104, 1176, ""], [50, 23, 610, "A"],
  213.   [18, 17, 539, ""], [7, 89, 864, ""], [2, 13, 1026, ""]];
  214.  
  215.     var plot1b = $.jqplot(containerElement, [arr], {
  216.         seriesDefaults: {
  217.             renderer: $.jqplot.BubbleRenderer,
  218.             rendererOptions: {
  219.                 bubbleAlpha: 0.6,
  220.                 highlightAlpha: 0.8,
  221.                 showLabels: false
  222.             },
  223.             shadow: true,
  224.             shadowAlpha: 0.05
  225.         }
  226.     });
  227.  
  228.     // Legend is a simple table in the html.
  229.     // Dynamically populate it with the labels from each data value.
  230.     $.each(arr, function (index, val) {
  231.         $('#' + containerElement).append('<tr><td>' + val[3] + '</td><td>' + val[2] + '</td></tr>');
  232.     });
  233.  
  234.     // Now bind function to the highlight event to show the tooltip
  235.     // and highlight the row in the legend.
  236.     $('#' + containerElement).bind('jqplotDataHighlight',
  237.     function (ev, seriesIndex, pointIndex, data, radius) {
  238.         var chart_left = $('#' + containerElement).offset().left,
  239.         chart_top = $('#' + containerElement).offset().top,
  240.         x = plot1b.axes.xaxis.u2p(data[0]),  // convert x axis unita to pixels
  241.         y = plot1b.axes.yaxis.u2p(data[1]);  // convert y axis units to pixels
  242.         var color = 'rgb(50%,50%,100%)';
  243.         $('#tooltip1b').css({ left: chart_left + x + radius + 5, top: chart_top + y });
  244.         $('#tooltip1b').html('<span style="font-size:14px;font-weight:bold;color:' +
  245.       color + ';">' + data[3] + '</span><br />' + 'x: ' + data[0] +
  246.       '<br />' + 'y: ' + data[1] + '<br />' + 'r: ' + data[2]);
  247.         $('#tooltip1b').show();
  248.         $('#legend1b tr').css('background-color', '#ffffff');
  249.         $('#legend1b tr').eq(pointIndex + 1).css('background-color', color);
  250.     });
  251.  
  252.     // Bind a function to the unhighlight event to clean up after highlighting.
  253.     $('#' + containerElement).bind('jqplotDataUnhighlight',
  254.       function (ev, seriesIndex, pointIndex, data) {
  255.           $('#tooltip1b').empty();
  256.           $('#tooltip1b').hide();
  257.           $('#' + containerElement + ' tr').css('background-color', '#ffffff');
  258.       });
  259. }
  260.  
  261. //-------------------------------------------------------------- */
  262. // Gallery Actions
  263. //-------------------------------------------------------------- */
  264.  
  265. function initializeGallery() {
  266.     // When hovering over gallery li element
  267.     $("ul.gallery li").hover(function () {
  268.  
  269.         var $image = (this);
  270.  
  271.         // Shows actions when hovering
  272.         $(this).find(".actions").show();
  273.  
  274.         // If the "x" icon is pressed, show confirmation (#dialog-confirm)
  275.         $(this).find(".actions .delete").click(function () {
  276.  
  277.             // Confirmation
  278.             $("#dialog-confirm").dialog({
  279.                 resizable: false,
  280.                 modal: true,
  281.                 minHeight: 0,
  282.                 draggable: false,
  283.                 buttons: {
  284.                     "Delete": function () {
  285.                         $(this).dialog("close");
  286.  
  287.                         // Removes image if delete is pressed
  288.                         $($image).fadeOut('slow', function () {
  289.                             $($image).remove();
  290.                         });
  291.  
  292.                     },
  293.  
  294.                     // Removes dialog if cancel is pressed
  295.                     Cancel: function () {
  296.                         $(this).dialog("close");
  297.                     }
  298.                 }
  299.             });
  300.  
  301.             return false;
  302.         });
  303.  
  304.  
  305.         // Changes opacity of the image
  306.         $(this).find("img").css("opacity", "0.5");
  307.  
  308.         // On hover off
  309.         $(this).hover(function () {
  310.         }, function () {
  311.  
  312.             // Hides actions when hovering off
  313.             $(this).find(".actions").hide();
  314.  
  315.             // Changes opacity of the image back to normal
  316.             $(this).find("img").css("opacity", "1");
  317.  
  318.         });
  319.     });
  320. }
  321. function setupGallery() {
  322.  
  323.     initializeGallery();
  324.     //-------------------------------------------------------------- */
  325.     //
  326.     //  **** Gallery Sorting (Quicksand) ****
  327.     //
  328.     //  For more information go to:
  329.     //  http://razorjack.net/quicksand/
  330.     //
  331.     //-------------------------------------------------------------- */
  332.  
  333.     $('ul.gallery').each(function () {
  334.  
  335.         // get the action filter option item on page load
  336.         var $fileringType = $("ul.sorting li.active a[data-type]").first().before(this);
  337.         var $filterType = $($fileringType).attr('data-id');
  338.  
  339.         var $gallerySorting = $(this).parent().prev().children('ul.sorting');
  340.  
  341.         // get and assign the ourHolder element to the
  342.         // $holder varible for use later
  343.         var $holder = $(this);
  344.  
  345.         // clone all items within the pre-assigned $holder element
  346.         var $data = $holder.clone();
  347.  
  348.         // attempt to call Quicksand when a filter option
  349.         // item is clicked
  350.         $($gallerySorting).find("a[data-type]").click(function (e) {
  351.             // reset the active class on all the buttons
  352.             $($gallerySorting).find("a[data-type].active").removeClass('active');
  353.  
  354.             // assign the class of the clicked filter option
  355.             // element to our $filterType variable
  356.             var $filterType = $(this).attr('data-type');
  357.             $(this).addClass('active');
  358.             if ($filterType == 'all') {
  359.                 // assign all li items to the $filteredData var when
  360.                 // the 'All' filter option is clicked
  361.                 var $filteredData = $data.find('li');
  362.             }
  363.             else {
  364.                 // find all li elements that have our required $filterType
  365.                 // values for the data-type element
  366.                 var $filteredData = $data.find('li[data-type=' + $filterType + ']');
  367.             }
  368.  
  369.             // call quicksand and assign transition parameters
  370.             $holder.quicksand($filteredData, {
  371.                 duration: 800,
  372.                 easing: 'easeInOutQuad',
  373.                 useScaling: true,
  374.                 adjustHeight: 'auto'
  375.             }, function () {
  376.                 $('.popup').facebox();
  377.                 initializeGallery();
  378.             });
  379.  
  380.             return false;
  381.         });
  382.  
  383.     });
  384. }
  385.  
  386. //setup pretty-photo
  387. function setupPrettyPhoto() {
  388.  
  389.     $("a[rel^='prettyPhoto']").prettyPhoto();
  390. }
  391.  
  392. //setup tinyMCE
  393.  
  394. function setupTinyMCE() {
  395.     $('textarea.tinymce').tinymce({
  396.         // Location of TinyMCE script
  397.         script_url: 'js/tiny-mce/tiny_mce.js',
  398.  
  399.         // General options
  400.         theme: "advanced",
  401.         plugins: "autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,advlist",
  402.  
  403.         // Theme options
  404.         theme_advanced_buttons1: "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
  405.         theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
  406.         theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
  407.         theme_advanced_buttons4: "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
  408.         theme_advanced_toolbar_location: "top",
  409.         theme_advanced_toolbar_align: "left",
  410.         theme_advanced_statusbar_location: "bottom",
  411.         theme_advanced_resizing: true,
  412.  
  413.         // Example content CSS (should be your site CSS)
  414.         content_css: "css/content.css",
  415.  
  416.         // Drop lists for link/image/media/template dialogs
  417.         template_external_list_url: "lists/template_list.js",
  418.         external_link_list_url: "lists/link_list.js",
  419.         external_image_list_url: "lists/image_list.js",
  420.         media_external_list_url: "lists/media_list.js",
  421.  
  422.         // Replace values for the template plugin
  423.         template_replace_values: {
  424.             username: "Some User",
  425.             staffid: "991234"
  426.         }
  427.     });
  428. }
  429.  
  430. //setup DatePicker
  431. function setDatePicker(containerElement) {
  432.     var datePicker = $('#' + containerElement);
  433.     datePicker.datepicker({
  434.         showOn: "button",
  435.         buttonImage: "img/calendar.gif",
  436.         buttonImageOnly: true
  437.     });
  438. }
  439. //setup progressbar
  440. function setupProgressbar(containerElement) {
  441.     $("#" + containerElement).progressbar({
  442.         value: 59
  443.     });
  444. }
  445.  
  446. //setup dialog box
  447.  
  448. function setupDialogBox(containerElement, associatedButton) {
  449.     $.fx.speeds._default = 1000;
  450.     $("#" + containerElement).dialog({
  451.         autoOpen: false,
  452.         show: "blind",
  453.         hide: "explode"
  454.     });
  455.  
  456.     $("#" + associatedButton).click(function () {
  457.         $("#" + containerElement).dialog("open");
  458.         return false;
  459.     });
  460. }
  461.  
  462. //setup accordion
  463.  
  464. function setupAccordion(containerElement) {
  465.     $("#" + containerElement).accordion();
  466. }
  467.  
  468. //setup radios and checkboxes
  469. //function setupGrumbleToolTip(elementid) {
  470. //    initializeGrumble(elementid);
  471. //    $('#' + elementid).focus(function () {
  472. //        initializeGrumble(elementid);
  473. //    });
  474. //}
  475.  
  476. //function initializeGrumble(elementid) {
  477. //    $('#' + elementid).grumble(
  478. //  {
  479. //      text: 'Whoaaa, this is a lot of text that i couldn\'t predict',
  480. //      angle: 85,
  481. //      distance: 50,
  482. //      showAfter: 1000,
  483. //      hideAfter: 2000
  484. //  }
  485. //);
  486. //}
  487.  
  488. //setup left menu
  489.  
  490. function setupLeftMenu() {
  491.     $("#section-menu")
  492.         .accordion({
  493.             "header": "a.menuitem"
  494.         })
  495.         .bind("accordionchangestart", function (e, data) {
  496.             data.newHeader.next().andSelf().addClass("current");
  497.             data.oldHeader.next().andSelf().removeClass("current");
  498.         })
  499.         .find("a.menuitem:first").addClass("current")
  500.         .next().addClass("current");
  501.        
  502.         $('#section-menu .submenu').css('height','auto');
  503. }
Advertisement
Add Comment
Please, Sign In to add comment