daily pastebin goal
57%
SHARE
TWEET

Untitled

a guest Sep 23rd, 2018 61 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. var menu_svg_width = 60,
  2.           menu_svg_height = 60,
  3.           toggle_switch = true,
  4.           initial_color = '#fff',
  5.           close_color = '#f2721d',
  6.          sidebar_duration = 600,
  7.          sidebar_extended_width = 250,
  8.          sidebar_closed_width = 60;
  9.    
  10.     var menu_svg = d3.select('#sidebar_div')
  11.                                     .append('svg')
  12.                                         .attr({
  13.                                             width: menu_svg_width,
  14.                                             height: menu_svg_height,
  15.                                             id: 'menu_svg',
  16.                                             cursor: 'pointer'
  17.                                         })
  18.                                     .on('click', function(){
  19.                                         var transition_duration = 300,
  20.                                               scale_factor = .1;
  21.                                              
  22.                                        
  23.                                         if (toggle_switch == true) {
  24.                                                 d3.selectAll('#top_bar, #bottom_bar')
  25.                                                         .transition()
  26.                                                             .duration(transition_duration)
  27.                                                             .attr('width', menu_bar_height)
  28.                                                             .attr('x', (menu_svg_width/ 2) - ((menu_bar_width * scale_factor) / 2))
  29.                                                             .attr('fill', close_color)
  30.                                                         .transition()
  31.                                                             .duration(transition_duration)
  32.                                                             .attr('height', menu_bar_width)
  33.                                                             .attr('y', (menu_svg_height / 2 - (menu_bar_width / 2)));
  34.                                                            
  35.                                                
  36.                                                 d3.select('#middle_bar')
  37.                                                         .transition()
  38.                                                             .duration(transition_duration)
  39.                                                             .attr('fill', close_color);
  40.  
  41.                                                 d3.select(this)
  42.                                                         .transition()
  43.                                                             .duration(transition_duration)
  44.                                                             .attr('transform', 'rotate(-45)')
  45.                                                             .style('-webkit-transform',"rotate(-45 deg);")
  46.                                                             .style('-moz-transform',"rotate(-45 deg);");
  47.                                                
  48.                                                 d3.select('#sidebar_div')
  49.                                                      .transition()
  50.                                                      .duration(sidebar_duration)
  51.                                                      .style('width', sidebar_extended_width + 'px')
  52.                                                       .transition()
  53.                                                      .duration(300)
  54.                                                      .ease('cubicInOut')
  55.                                                      .style('height', '100vh');
  56.                                            
  57.                                              d3.select('#sidebar_link_div')
  58.                                                     .transition()
  59.                                                     .duration(600)
  60.                                                     .delay(800)
  61.                                                     .style('opacity', 1)
  62.                                    
  63.                                                    
  64.                                                
  65.                                        
  66.                                                toggle_switch = false}
  67.                                        
  68.                                         else {
  69.                                             d3.selectAll('#top_bar, #bottom_bar')
  70.                                                         .transition()
  71.                                                             .duration(transition_duration)
  72.                                                             .attr('height', menu_bar_height)
  73.                                                             .attr('y', function (d, i) {
  74.                                                                 if (i == 0) {
  75.                                                                 return 1 * (menu_svg_height / 4) - (menu_bar_height / 2) + top_bottom_padding}
  76.                                                                 else {
  77.                                                                     return 3 * (menu_svg_height / 4)  - (menu_bar_height / 2)  - top_bottom_padding}
  78.                                                                 })
  79.                                                             .attr('fill', initial_color)
  80.                                                         .transition()
  81.                                                             .duration(transition_duration)
  82.                                                             .attr('width', menu_bar_width)
  83.                                                             .attr('x', (menu_svg_width - menu_bar_width) / 2);
  84.                                            
  85.                                             d3.select('#middle_bar')
  86.                                                         .transition()
  87.                                                             .duration(transition_duration)
  88.                                                             .attr('fill', initial_color);
  89.                                                            
  90.                                            
  91.                                             d3.select(this)
  92.                                                         .transition()
  93.                                                         .duration(transition_duration)
  94.                                                         .attr('transform', 'rotate(0)')
  95.                                                         .style('-webkit-transform',"rotate(0 deg);")
  96.                                                         .style('-moz-transform',"rotate(0 deg);");
  97.                                            
  98.                                              d3.select('#sidebar_div')
  99.                                                      .transition()
  100.                                                      .duration(300)
  101.                                                      .style('height', '60px')
  102.                                                      .transition()
  103.                                                      .duration(sidebar_duration)
  104.                                                      .style('width', sidebar_closed_width + 'px');
  105.                                            
  106.                                            
  107.                                              d3.select('#sidebar_link_div')
  108.                                                     .transition()
  109.                                                     .duration(100)
  110.                                                     .style('opacity', 0)
  111.                                            
  112.                                             toggle_switch = true
  113.                                            
  114.                                         }
  115.                                        
  116.                                        
  117.                                                 });
  118.    
  119.     var top_bottom_padding = 5,
  120.           menu_bar_ids = [{id: 'top_bar', padding: top_bottom_padding},{id:  'middle_bar', padding: 0}, {id: 'bottom_bar', padding: -top_bottom_padding}],
  121.           menu_bar_padding = 28,
  122.           menu_bar_width = menu_svg_width  - menu_bar_padding,
  123.           menu_bar_height = 2;
  124.        
  125.     var menu_bar_rects = menu_svg.selectAll('rect')
  126.                                                 .data(d3.entries(menu_bar_ids))
  127.                                                 .enter()
  128.                                                 .append('rect')                                                    
  129.                                                 .attr({
  130.                                                     x: (menu_svg_width - menu_bar_width) / 2,
  131.                                                     y: function (d, i) {return (i + 1) * (menu_svg_height / 4) + d.value.padding - (menu_bar_height / 2) },
  132.                                                     width: menu_bar_width,
  133.                                                     height: menu_bar_height,
  134.                                                     fill: initial_color,
  135.                                                     id: function(d) {return d.value.id}
  136.                                                 });
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top