API tools faq
paste
Advertisement
DataCCIW

Rock Staff Celebration

DataCCIW
Jan 12th, 2023
926
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 19.99 KB | None | 0 0
raw download clone embed print report
  1. {%- assign btnIconCSSClass = 'far fa-star' -%}
  2. {%- assign today = 'Now' | Date:'M/d' -%}
  3. {%- assign anniversaryDate = CurrentPerson.AnniversaryDate | AsDateTime -%}
  4. {%- assign birthDate = CurrentPerson.BirthDate | AsDateTime -%}
  5. {%- assign workiversaryDate = CurrentPerson | Attribute:'StaffHireDate' | AsDateTime -%}
  6. {%- assign anniversaryDay = anniversaryDate | Date:'M/d' -%}
  7. {%- assign birthDay = birthDate | Date:'M/d' -%}
  8. {%- assign workiversaryDay = workiversaryDate | Date:'M/d' -%}
  9. {%- assign isAnniversary = false -%}
  10. {%- assign isBirthday = false -%}
  11. {%- assign isWorkiversary = false -%}
  12. {%- if anniversaryDay == today %}{% assign isAnniversary = true %}{% endif -%}
  13. {%- if birthDay == today %}{% assign isBirthday = true %}{% endif -%}
  14. {%- if workiversaryDay == today %}{% assign isWorkiversary = true %}{% endif -%}
  15. {%- if isAnniversary == true or isBirthday == true or isWorkiversary == true -%}
  16.     {%- assign thisYear = 'Now' | Date:'yyyy' | AsInteger -%}
  17.     {%- assign anniversaryYear = anniversaryDate | Date:'yyyy' | Default:'0' | AsInteger -%}
  18.     {%- assign workiversaryYear = workiversaryDate | Date:'yyyy' | Default:'0' | AsInteger -%}
  19.     {%- assign anniversaryNum = 0 -%}
  20.     {%- assign workiversaryNum = 0 -%}
  21.     {%- if isAnniversary == true and isBirthday == true and isWorkiversary == true -%}
  22.         {%- assign theme = 31 -%}
  23.         {%- assign anniversaryNum = thisYear | Minus:anniversaryYear %}
  24.         {%- assign workiversaryNum = thisYear | Minus:workiversaryYear %}
  25.         {%- if workiversaryNum == 0 -%}
  26.             {%- capture occasion %}Welcome to The Team{% endcapture -%}
  27.         {%- else -%}
  28.             {%- capture occasion %}Happy {{ workiversaryNum | AsString | NumberToOrdinal }} Workiversary{% endcapture -%}
  29.         {%- endif -%}
  30.         {%- if anniversaryNum == 0 -%}
  31.             {%- capture occasion %}{{ occasion }} and Congratuations on Getting Married{% endcapture -%}
  32.         {%- else -%}
  33.             {%- capture occasion %}Happy {{ anniversaryNum | AsString | NumberToOrdinal }} Anniversary and {{ occasion }}{% endcapture -%}
  34.         {%- endif -%}
  35.         {%- capture occasion %}Happy Birthday, {{ occasion }}{% endcapture -%}
  36.     {%- elseif isBirthday == true and isAnniversary == true -%}
  37.         {%- assign theme = 28 -%}
  38.         {%- assign anniversaryNum = thisYear | Minus:anniversaryYear %}
  39.         {%- if anniversaryNum == 0 -%}
  40.             {%- capture occasion %}Happy Birthday and Congratulations on Getting Married{% endcapture -%}
  41.         {%- else -%}
  42.             {%- capture occasion %}Happy Birthday and {{ anniversaryNum | AsString | NumberToOrdinal }} Anniversary{% endcapture -%}
  43.         {%- endif -%}
  44.     {%- elseif isBirthday == true and isWorkiversary == true -%}
  45.         {%- assign theme = 29 -%}
  46.         {%- assign workiversaryNum = thisYear | Minus:workiversaryYear %}
  47.         {%- if workiversaryNum == 0 -%}
  48.             {%- assign occasion = 'Happy Birthday and Welcome to The Team' -%}
  49.         {%- else -%}
  50.             {%- capture occasion %}Happy Birthday and {{ workiversaryNum | AsString | NumberToOrdinal }} Workiversary{% endcapture -%}
  51.         {%- endif -%}
  52.     {%- elseif isAnniversary == true and isWorkiversary == true -%}
  53.         {%- assign theme = 30 -%}
  54.         {%- assign anniversaryNum = thisYear | Minus:anniversaryYear %}
  55.         {%- assign workiversaryNum = thisYear | Minus:workiversaryYear %}
  56.         {%- if anniversaryNum == 0 -%}
  57.             {%- assign occasion = 'Congratuations on Getting Married' -%}
  58.         {%- else -%}
  59.             {%- capture occasion %}Happy {{ anniversaryNum | AsString | NumberToOrdinal }} Anniversary{% endcapture -%}
  60.         {%- endif -%}
  61.         {%- if workiversaryNum == 0 -%}
  62.             {%- capture occasion %}{{ occasion }} and Welcome to The Team{% endcapture -%}
  63.         {%- else -%}
  64.             {%- capture occasion %}{{ occasion }} and {% if anniversaryNum == 0 %}Happy {% endif %}{{ workiversaryNum | AsString | NumberToOrdinal }} Workiversary{% endcapture -%}
  65.         {%- endif -%}
  66.     {%- elseif isAnniversary == true -%}
  67.         {%- assign theme = 19 -%}
  68.         {%- assign anniversaryNum = thisYear | Minus:anniversaryYear %}
  69.         {%- if anniversaryNum == 0 -%}
  70.             {%- assign occasion = 'Congratuations on Getting Married' -%}
  71.         {%- else -%}
  72.             {%- capture occasion %}Happy {{ anniversaryNum | AsString | NumberToOrdinal }} Anniversary{% endcapture -%}
  73.         {%- endif -%}
  74.     {%- elseif isWorkiversary == true -%}
  75.         {%- assign theme = 7 -%}
  76.         {%- assign workiversaryNum = thisYear | Minus:workiversaryYear %}
  77.         {%- if workiversaryNum == 0 -%}
  78.             {%- assign occasion = 'Welcome to The Team' -%}
  79.         {%- else -%}
  80.             {%- capture occasion %}Happy {{ workiversaryNum | AsString | NumberToOrdinal }} Workiversary{% endcapture -%}
  81.         {%- endif -%}
  82.     {%- else -%}
  83.         {%- assign theme = 1 -%}
  84.         {%- assign occasion = 'Happy Birthday' -%}
  85.     {%- endif -%}
  86.     {%- stylesheet compile:'less' -%}
  87.         .btn-celebrate
  88.         {
  89.             margin: 0 auto 35px auto;
  90.             padding: 10px 30px;
  91.             border-radius: 40px;
  92.             border: 5px solid #fff;
  93.             font-size: 24px;
  94.             font-weight: bold;
  95.             white-space: normal;
  96.             color: #fff;
  97.             background: #f7921a;
  98.             box-shadow: 0 4px 10px rgba(0,0,0,.1);
  99.             transition: transform .25s cubic-bezier(0, 0, 0.35, 2.5);
  100.             i:before
  101.             {
  102.                 display: inline-block;
  103.                 transition: transform .4s cubic-bezier(.5,-2,.5,6);
  104.             }
  105.             &:hover, &:focus
  106.             {
  107.                 border-color: #fff;
  108.                 color: #fff;
  109.                 background: #de7e0b;
  110.                 box-shadow: 0 2px 8px rgba(0,0,0,.15);
  111.             }
  112.             &:active, &:active:focus
  113.             {
  114.                 border-color: #fff;
  115.                 color: #fff;
  116.                 background: #e08b27;
  117.                 box-shadow: 0 0 6px rgba(0,0,0,.15);
  118.             }
  119.             &:active
  120.             {
  121.                 transform: scale(.95);
  122.                 transition: transform 50ms linear;
  123.                 i:before
  124.                 {
  125.                     transform: rotate(10deg);
  126.                     transition: transform 50ms linear;
  127.                 }
  128.             }
  129.         }
  130.     {%- endstylesheet -%}
  131. <div class="text-center"><a href="#" class="btn btn-default btn-celebrate" data-theme="{{ theme }}"><i class="{{ btnIconCSSClass }} fa-lg fa-flip-horizontal margin-r-sm"></i>{{ occasion }}, {{ CurrentPerson.NickName }}! <i class="{{ btnIconCSSClass }} fa-lg margin-l-sm"></i></a></div>
  132.     {%- javascript disableanonymousfunction:'true' -%}
  133.         // Adapted from: https://codepen.io/Pillowfication/pen/PNEJbY
  134.         // If set to true, the user must press the button to trigger
  135.         // the confetti. Otherwise the confetti triggers on page load as well.
  136.         var onlyOnClick = false;
  137.  
  138.         $(document).ready(function ()
  139.         {
  140.  
  141.         var rockCelebrationComplete = 'celebration{{ 'Now' | Date:'yyyy' }}';
  142.         if(localStorage.getItem(rockCelebrationComplete) != 'true')
  143.         {
  144.         localStorage.setItem(rockCelebrationComplete ,'true')
  145.            
  146.             // Globals
  147.             var $window = $(window)
  148.                 , random = Math.random
  149.                 , cos = Math.cos
  150.                 , sin = Math.sin
  151.                 , PI = Math.PI
  152.                 , PI2 = PI * 2
  153.                 , timer = undefined
  154.                 , frame = undefined
  155.                 , confetti = [];
  156.  
  157.             var pointer = 0;
  158.  
  159.             var particles = 250
  160.                 , spread = 40
  161.                 , sizeMin = 5
  162.                 , sizeMax = 15 - sizeMin
  163.                 , eccentricity = 12
  164.                 , deviation = 100
  165.                 , dxThetaMin = -.1
  166.                 , dxThetaMax = -dxThetaMin - dxThetaMin
  167.                 , dyMin = .13
  168.                 , dyMax = .18
  169.                 , dThetaMin = .4
  170.                 , dThetaMax = .7 - dThetaMin;
  171.  
  172.             var colorThemes =
  173.             [
  174.                 //multicolor
  175.                 function () { return color(200 * random() | 0, 200 * random() | 0, 200 * random() | 0); }                       //0 multicolor
  176.                 , function () { var i = [2, 3, 4, 5, 6, 7, 8]; var p = 7 * random() | 0; return colorThemes[i[p]](); }          //1 alt multicolor (birthday)
  177.  
  178.                 //single colors
  179.                 , function () { var b = 200 * random() | 0; return color(200, b, b); }                                          //2 reds
  180.                 , function () { var p = random(); return color(240 - (40 * p | 0), 120 + (80 * p | 0), 200 * p | 0); }          //3 oranges
  181.                 , function () { var p = random(); return color(240 - (40 * p | 0), 240 - (40 * p | 0), 200 * p | 0); }          //4 yellows
  182.                 , function () { var b = 200 * random() | 0; return color(b, 200, b); }                                          //5 greens
  183.                 , function () { return color(200 * random() | 0, 200, 200); }                                                   //6 teals
  184.                 , function () { var b = 150 * random() | 0; return color(b + 30, b + 50, 200); }                                //7 blues (workiversary)
  185.                 , function () { var p = random(); return color(120 + (80 * p | 0), 40 + (140 * p | 0), 240 - (40 * p | 0)); }   //8 purples
  186.                 , function () { var b = 256 * random() | 0; return color(b, b, b); }                                            //9 black/white
  187.                 , function () { var g = 100 * random() | 0 + 100; return color(g, g, g); }                                      //10 grays
  188.                 , function () { var w = 56 * random() | 0 + 200; return color(w, w, w); }                                       //11 white
  189.  
  190.                 //fun color combos
  191.                 , function () { return mixThemes(2, 5); }                       //12 red/green (Christmas)
  192.                 , function () { return mixThemes(2, 7); }                       //13 red/blue (July 4th)
  193.                 , function () { return mixThemes(3, 8); }                       //14 orange/purple (Halloween)
  194.                 , function () { return mixThemes(3, 8, 9, 1 / 3, 2 / 3); }      //15 orange/purple/gray (Halloween)
  195.                 , function () { return mixThemes(2, 11); }                      //16 red/white (Valentines)
  196.                 , function () { return mixThemes(7, 6); }                       //17 blue/teal
  197.                 , function () { return mixThemes(2, 6); }                       //18 red/white/teal
  198.                 , function () { return mixThemes(2, 4, 0, .8); }                //19 red/yellow (Anniversary)
  199.                 , function () { return mixThemes(3, 4); }                       //20 orange/yellow
  200.                 , function () { return mixThemes(8, 4); }                       //21 purple/yellow
  201.                 , function () { return mixThemes(8, 20); }                      //22 purple/orange/yellow
  202.                 , function () { return mixThemes(8, 6); }                       //23 purple/teal
  203.                 , function () { return mixThemes(6, 7, 8, 1 / 3, 2 / 3); }      //24 blue/purple/teal
  204.                 , function () { return mixThemes(2, 7, 8, 1 / 3, 2 / 3); }      //25 red/blue/purple
  205.                 , function () { return mixThemes(2, 5, 7, 1 / 3, 2 / 3); }      //26 red/green/blue
  206.                 , function () { var i = [2, 5, 7, 4, 8]; var p = 5 * random() | 0; return colorThemes[i[p]](); }    //27 red/green/blue/yellow/purple
  207.  
  208.                 //celebration combos
  209.                 , function () { return mixThemes(1, 19); }                      //28 birthday/anniversary
  210.                 , function () { return mixThemes(1, 7); }                       //29 birthday/workiversary
  211.                 , function () { return mixThemes(19, 7); }                      //30 anniversary/workiversary
  212.                 , function () { return mixThemes(1, 19, 7, 1 / 3, 2 / 3); }     //31 birthday/anniversary/workiversary
  213.             ];
  214.  
  215.             //color helper functions
  216.             function color(r, g, b) { return 'rgb(' + r + ',' + g + ',' + b + ')'; }
  217.             function mixThemes(c1, c2, c3 = 0, p1 = .5, p2 = 1.0)
  218.             {
  219.                 var r = random();
  220.                 return colorThemes[r < p1 ? c1 : r < p2 ? c2 : c3]();
  221.             }
  222.             // Cosine interpolation
  223.             function interpolation(a, b, t)
  224.             {
  225.                 return (1 - cos(PI * t)) / 2 * (b - a) + a;
  226.             }
  227.  
  228.             // Create a 1D Maximal Poisson Disc over [0, 1]
  229.             var radius = 1 / eccentricity, radius2 = radius + radius;
  230.             function createPoisson() {
  231.                 // domain is the set of points which are still available to pick from
  232.                 // D = union{ [d_i, d_i+1] | i is even }
  233.                 var domain = [radius, 1 - radius], measure = 1 - radius2, spline = [0, 1];
  234.                 while (measure)
  235.                 {
  236.                     var dart = measure * random(), i, l, interval, a, b, c, d;
  237.  
  238.                     // Find where dart lies
  239.                     for (i = 0, l = domain.length, measure = 0; i < l; i += 2)
  240.                     {
  241.                         a = domain[i], b = domain[i + 1], interval = b - a;
  242.                         if (dart < measure + interval)
  243.                         {
  244.                             spline.push(dart += a - measure);
  245.                             break;
  246.                         }
  247.                         measure += interval;
  248.                     }
  249.                     c = dart - radius, d = dart + radius;
  250.  
  251.                     // Update the domain
  252.                     for (i = domain.length - 1; i > 0; i -= 2)
  253.                     {
  254.                         l = i - 1, a = domain[l], b = domain[i];
  255.                         // c---d          c---d  Do nothing
  256.                         //   c-----d  c-----d    Move interior
  257.                         //   c--------------d    Delete interval
  258.                         //         c--d          Split interval
  259.                         //       a------b
  260.                         if (a >= c && a < d)
  261.                             if (b > d) domain[l] = d; // Move interior (Left case)
  262.                             else domain.splice(l, 2); // Delete interval
  263.                         else if (a < c && b > c)
  264.                             if (b <= d) domain[i] = c; // Move interior (Right case)
  265.                             else domain.splice(i, 0, c, d); // Split interval
  266.                     }
  267.  
  268.                     // Re-measure the domain
  269.                     for (i = 0, l = domain.length, measure = 0; i < l; i += 2)
  270.                         measure += domain[i + 1] - domain[i];
  271.                 }
  272.                 return spline.sort();
  273.             }
  274.  
  275.             // Create the overarching container
  276.             var container = document.createElement('div');
  277.             container.style.position = 'fixed';
  278.             container.style.top = '0';
  279.             container.style.left = '0';
  280.             container.style.width = '100%';
  281.             container.style.height = '0';
  282.             container.style.overflow = 'visible';
  283.             container.style.zIndex = '9999';
  284.  
  285.             // Confetto constructor
  286.             function Confetto(theme)
  287.             {
  288.                 this.frame = 0;
  289.                 this.outer = document.createElement('div');
  290.                 this.inner = document.createElement('div');
  291.                 this.outer.appendChild(this.inner);
  292.  
  293.                 var outerStyle = this.outer.style, innerStyle = this.inner.style;
  294.                 outerStyle.position = 'absolute';
  295.                 outerStyle.width = (sizeMin + sizeMax * random()) + 'px';
  296.                 outerStyle.height = (sizeMin + sizeMax * random()) + 'px';
  297.                 innerStyle.width = '100%';
  298.                 innerStyle.height = '100%';
  299.                 innerStyle.backgroundColor = theme();
  300.  
  301.                 outerStyle.perspective = '50px';
  302.                 outerStyle.transform = 'rotate(' + (360 * random()) + 'deg)';
  303.                 this.axis = 'rotate3D(' +
  304.                     cos(360 * random()) + ',' +
  305.                     cos(360 * random()) + ',0,';
  306.                 this.theta = 360 * random();
  307.                 this.dTheta = dThetaMin + dThetaMax * random();
  308.                 innerStyle.transform = this.axis + this.theta + 'deg)';
  309.  
  310.                 this.x = $window.width() * random();
  311.                 this.y = -deviation;
  312.                 this.dx = sin(dxThetaMin + dxThetaMax * random());
  313.                 this.dy = dyMin + dyMax * random();
  314.                 outerStyle.left = this.x + 'px';
  315.                 outerStyle.top = this.y + 'px';
  316.  
  317.                 // Create the periodic spline
  318.                 this.splineX = createPoisson();
  319.                 this.splineY = [];
  320.                 for (var i = 1, l = this.splineX.length - 1; i < l; ++i)
  321.                     this.splineY[i] = deviation * random();
  322.                 this.splineY[0] = this.splineY[l] = deviation * random();
  323.  
  324.                 this.update = function (height, delta)
  325.                 {
  326.                     this.frame += delta;
  327.                     this.x += this.dx * delta;
  328.                     this.y += this.dy * delta;
  329.                     this.theta += this.dTheta * delta;
  330.  
  331.                     // Compute spline and convert to polar
  332.                     var phi = this.frame % 7777 / 7777, i = 0, j = 1;
  333.                     while (phi >= this.splineX[j]) i = j++;
  334.                     var rho = interpolation(
  335.                         this.splineY[i],
  336.                         this.splineY[j],
  337.                         (phi - this.splineX[i]) / (this.splineX[j] - this.splineX[i])
  338.                     );
  339.                     phi *= PI2;
  340.  
  341.                     outerStyle.left = this.x + rho * cos(phi) + 'px';
  342.                     outerStyle.top = this.y + rho * sin(phi) + 'px';
  343.                     innerStyle.transform = this.axis + this.theta + 'deg)';
  344.                     return this.y > height + deviation;
  345.                 };
  346.             }
  347.             function poof()
  348.             {
  349.                 if (!frame)
  350.                 {
  351.                     // Append the container
  352.                     document.body.appendChild(container);
  353.  
  354.                     // Add confetti
  355.                     var theme = colorThemes[0],
  356.                         count = 0;
  357.  
  358.                     if ($('a.btn-celebrate').data('theme') != '')
  359.                     {
  360.                         theme = colorThemes[$('a.btn-celebrate').data('theme')];
  361.                     }
  362.  
  363.                     (function addConfetto()
  364.                     {
  365.                         if (++count > particles)
  366.                             return timer = undefined;
  367.  
  368.                         var confetto = new Confetto(theme);
  369.                         confetti.push(confetto);
  370.                         container.appendChild(confetto.outer);
  371.                         timer = setTimeout(addConfetto, spread * random());
  372.                     })(0);
  373.  
  374.                     // Start the loop
  375.                     var prev = undefined;
  376.                     requestAnimationFrame(function loop(timestamp)
  377.                     {
  378.                         var delta = prev ? timestamp - prev : 0;
  379.                         prev = timestamp;
  380.                         var height = $window.height();
  381.  
  382.                         for (var i = confetti.length - 1; i >= 0; --i)
  383.                         {
  384.                             if (confetti[i].update(height, delta))
  385.                             {
  386.                                 container.removeChild(confetti[i].outer);
  387.                                 confetti.splice(i, 1);
  388.                             }
  389.                         }
  390.  
  391.                         if (timer || confetti.length)
  392.                             return frame = requestAnimationFrame(loop);
  393.  
  394.                         // Cleanup
  395.                         document.body.removeChild(container);
  396.                         frame = undefined;
  397.                     });
  398.                 }
  399.             }
  400.  
  401.             // trigger confetti on page load
  402.             if (!onlyOnClick) poof();
  403.  
  404.             // trigger confetti on button click
  405.             $('a.btn-celebrate').on('click', function (e)
  406.             {
  407.                 e.preventDefault();
  408.                 poof();
  409.                 return false;
  410.             })
  411.         }     // end of if statement to check to see if confetti has already dropped
  412. }); // end of document.ready
  413.     {%- endjavascript -%}
  414. {%- endif -%}
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!