Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- {%- assign btnIconCSSClass = 'far fa-star' -%}
- {%- assign today = 'Now' | Date:'M/d' -%}
- {%- assign anniversaryDate = CurrentPerson.AnniversaryDate | AsDateTime -%}
- {%- assign birthDate = CurrentPerson.BirthDate | AsDateTime -%}
- {%- assign workiversaryDate = CurrentPerson | Attribute:'StaffHireDate' | AsDateTime -%}
- {%- assign anniversaryDay = anniversaryDate | Date:'M/d' -%}
- {%- assign birthDay = birthDate | Date:'M/d' -%}
- {%- assign workiversaryDay = workiversaryDate | Date:'M/d' -%}
- {%- assign isAnniversary = false -%}
- {%- assign isBirthday = false -%}
- {%- assign isWorkiversary = false -%}
- {%- if anniversaryDay == today %}{% assign isAnniversary = true %}{% endif -%}
- {%- if birthDay == today %}{% assign isBirthday = true %}{% endif -%}
- {%- if workiversaryDay == today %}{% assign isWorkiversary = true %}{% endif -%}
- {%- if isAnniversary == true or isBirthday == true or isWorkiversary == true -%}
- {%- assign thisYear = 'Now' | Date:'yyyy' | AsInteger -%}
- {%- assign anniversaryYear = anniversaryDate | Date:'yyyy' | Default:'0' | AsInteger -%}
- {%- assign workiversaryYear = workiversaryDate | Date:'yyyy' | Default:'0' | AsInteger -%}
- {%- assign anniversaryNum = 0 -%}
- {%- assign workiversaryNum = 0 -%}
- {%- if isAnniversary == true and isBirthday == true and isWorkiversary == true -%}
- {%- assign theme = 31 -%}
- {%- assign anniversaryNum = thisYear | Minus:anniversaryYear %}
- {%- assign workiversaryNum = thisYear | Minus:workiversaryYear %}
- {%- if workiversaryNum == 0 -%}
- {%- capture occasion %}Welcome to The Team{% endcapture -%}
- {%- else -%}
- {%- capture occasion %}Happy {{ workiversaryNum | AsString | NumberToOrdinal }} Workiversary{% endcapture -%}
- {%- endif -%}
- {%- if anniversaryNum == 0 -%}
- {%- capture occasion %}{{ occasion }} and Congratuations on Getting Married{% endcapture -%}
- {%- else -%}
- {%- capture occasion %}Happy {{ anniversaryNum | AsString | NumberToOrdinal }} Anniversary and {{ occasion }}{% endcapture -%}
- {%- endif -%}
- {%- capture occasion %}Happy Birthday, {{ occasion }}{% endcapture -%}
- {%- elseif isBirthday == true and isAnniversary == true -%}
- {%- assign theme = 28 -%}
- {%- assign anniversaryNum = thisYear | Minus:anniversaryYear %}
- {%- if anniversaryNum == 0 -%}
- {%- capture occasion %}Happy Birthday and Congratulations on Getting Married{% endcapture -%}
- {%- else -%}
- {%- capture occasion %}Happy Birthday and {{ anniversaryNum | AsString | NumberToOrdinal }} Anniversary{% endcapture -%}
- {%- endif -%}
- {%- elseif isBirthday == true and isWorkiversary == true -%}
- {%- assign theme = 29 -%}
- {%- assign workiversaryNum = thisYear | Minus:workiversaryYear %}
- {%- if workiversaryNum == 0 -%}
- {%- assign occasion = 'Happy Birthday and Welcome to The Team' -%}
- {%- else -%}
- {%- capture occasion %}Happy Birthday and {{ workiversaryNum | AsString | NumberToOrdinal }} Workiversary{% endcapture -%}
- {%- endif -%}
- {%- elseif isAnniversary == true and isWorkiversary == true -%}
- {%- assign theme = 30 -%}
- {%- assign anniversaryNum = thisYear | Minus:anniversaryYear %}
- {%- assign workiversaryNum = thisYear | Minus:workiversaryYear %}
- {%- if anniversaryNum == 0 -%}
- {%- assign occasion = 'Congratuations on Getting Married' -%}
- {%- else -%}
- {%- capture occasion %}Happy {{ anniversaryNum | AsString | NumberToOrdinal }} Anniversary{% endcapture -%}
- {%- endif -%}
- {%- if workiversaryNum == 0 -%}
- {%- capture occasion %}{{ occasion }} and Welcome to The Team{% endcapture -%}
- {%- else -%}
- {%- capture occasion %}{{ occasion }} and {% if anniversaryNum == 0 %}Happy {% endif %}{{ workiversaryNum | AsString | NumberToOrdinal }} Workiversary{% endcapture -%}
- {%- endif -%}
- {%- elseif isAnniversary == true -%}
- {%- assign theme = 19 -%}
- {%- assign anniversaryNum = thisYear | Minus:anniversaryYear %}
- {%- if anniversaryNum == 0 -%}
- {%- assign occasion = 'Congratuations on Getting Married' -%}
- {%- else -%}
- {%- capture occasion %}Happy {{ anniversaryNum | AsString | NumberToOrdinal }} Anniversary{% endcapture -%}
- {%- endif -%}
- {%- elseif isWorkiversary == true -%}
- {%- assign theme = 7 -%}
- {%- assign workiversaryNum = thisYear | Minus:workiversaryYear %}
- {%- if workiversaryNum == 0 -%}
- {%- assign occasion = 'Welcome to The Team' -%}
- {%- else -%}
- {%- capture occasion %}Happy {{ workiversaryNum | AsString | NumberToOrdinal }} Workiversary{% endcapture -%}
- {%- endif -%}
- {%- else -%}
- {%- assign theme = 1 -%}
- {%- assign occasion = 'Happy Birthday' -%}
- {%- endif -%}
- {%- stylesheet compile:'less' -%}
- .btn-celebrate
- {
- margin: 0 auto 35px auto;
- padding: 10px 30px;
- border-radius: 40px;
- border: 5px solid #fff;
- font-size: 24px;
- font-weight: bold;
- white-space: normal;
- color: #fff;
- background: #f7921a;
- box-shadow: 0 4px 10px rgba(0,0,0,.1);
- transition: transform .25s cubic-bezier(0, 0, 0.35, 2.5);
- i:before
- {
- display: inline-block;
- transition: transform .4s cubic-bezier(.5,-2,.5,6);
- }
- &:hover, &:focus
- {
- border-color: #fff;
- color: #fff;
- background: #de7e0b;
- box-shadow: 0 2px 8px rgba(0,0,0,.15);
- }
- &:active, &:active:focus
- {
- border-color: #fff;
- color: #fff;
- background: #e08b27;
- box-shadow: 0 0 6px rgba(0,0,0,.15);
- }
- &:active
- {
- transform: scale(.95);
- transition: transform 50ms linear;
- i:before
- {
- transform: rotate(10deg);
- transition: transform 50ms linear;
- }
- }
- }
- {%- endstylesheet -%}
- <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>
- {%- javascript disableanonymousfunction:'true' -%}
- // Adapted from: https://codepen.io/Pillowfication/pen/PNEJbY
- // If set to true, the user must press the button to trigger
- // the confetti. Otherwise the confetti triggers on page load as well.
- var onlyOnClick = false;
- $(document).ready(function ()
- {
- var rockCelebrationComplete = 'celebration{{ 'Now' | Date:'yyyy' }}';
- if(localStorage.getItem(rockCelebrationComplete) != 'true')
- {
- localStorage.setItem(rockCelebrationComplete ,'true')
- // Globals
- var $window = $(window)
- , random = Math.random
- , cos = Math.cos
- , sin = Math.sin
- , PI = Math.PI
- , PI2 = PI * 2
- , timer = undefined
- , frame = undefined
- , confetti = [];
- var pointer = 0;
- var particles = 250
- , spread = 40
- , sizeMin = 5
- , sizeMax = 15 - sizeMin
- , eccentricity = 12
- , deviation = 100
- , dxThetaMin = -.1
- , dxThetaMax = -dxThetaMin - dxThetaMin
- , dyMin = .13
- , dyMax = .18
- , dThetaMin = .4
- , dThetaMax = .7 - dThetaMin;
- var colorThemes =
- [
- //multicolor
- function () { return color(200 * random() | 0, 200 * random() | 0, 200 * random() | 0); } //0 multicolor
- , function () { var i = [2, 3, 4, 5, 6, 7, 8]; var p = 7 * random() | 0; return colorThemes[i[p]](); } //1 alt multicolor (birthday)
- //single colors
- , function () { var b = 200 * random() | 0; return color(200, b, b); } //2 reds
- , function () { var p = random(); return color(240 - (40 * p | 0), 120 + (80 * p | 0), 200 * p | 0); } //3 oranges
- , function () { var p = random(); return color(240 - (40 * p | 0), 240 - (40 * p | 0), 200 * p | 0); } //4 yellows
- , function () { var b = 200 * random() | 0; return color(b, 200, b); } //5 greens
- , function () { return color(200 * random() | 0, 200, 200); } //6 teals
- , function () { var b = 150 * random() | 0; return color(b + 30, b + 50, 200); } //7 blues (workiversary)
- , function () { var p = random(); return color(120 + (80 * p | 0), 40 + (140 * p | 0), 240 - (40 * p | 0)); } //8 purples
- , function () { var b = 256 * random() | 0; return color(b, b, b); } //9 black/white
- , function () { var g = 100 * random() | 0 + 100; return color(g, g, g); } //10 grays
- , function () { var w = 56 * random() | 0 + 200; return color(w, w, w); } //11 white
- //fun color combos
- , function () { return mixThemes(2, 5); } //12 red/green (Christmas)
- , function () { return mixThemes(2, 7); } //13 red/blue (July 4th)
- , function () { return mixThemes(3, 8); } //14 orange/purple (Halloween)
- , function () { return mixThemes(3, 8, 9, 1 / 3, 2 / 3); } //15 orange/purple/gray (Halloween)
- , function () { return mixThemes(2, 11); } //16 red/white (Valentines)
- , function () { return mixThemes(7, 6); } //17 blue/teal
- , function () { return mixThemes(2, 6); } //18 red/white/teal
- , function () { return mixThemes(2, 4, 0, .8); } //19 red/yellow (Anniversary)
- , function () { return mixThemes(3, 4); } //20 orange/yellow
- , function () { return mixThemes(8, 4); } //21 purple/yellow
- , function () { return mixThemes(8, 20); } //22 purple/orange/yellow
- , function () { return mixThemes(8, 6); } //23 purple/teal
- , function () { return mixThemes(6, 7, 8, 1 / 3, 2 / 3); } //24 blue/purple/teal
- , function () { return mixThemes(2, 7, 8, 1 / 3, 2 / 3); } //25 red/blue/purple
- , function () { return mixThemes(2, 5, 7, 1 / 3, 2 / 3); } //26 red/green/blue
- , function () { var i = [2, 5, 7, 4, 8]; var p = 5 * random() | 0; return colorThemes[i[p]](); } //27 red/green/blue/yellow/purple
- //celebration combos
- , function () { return mixThemes(1, 19); } //28 birthday/anniversary
- , function () { return mixThemes(1, 7); } //29 birthday/workiversary
- , function () { return mixThemes(19, 7); } //30 anniversary/workiversary
- , function () { return mixThemes(1, 19, 7, 1 / 3, 2 / 3); } //31 birthday/anniversary/workiversary
- ];
- //color helper functions
- function color(r, g, b) { return 'rgb(' + r + ',' + g + ',' + b + ')'; }
- function mixThemes(c1, c2, c3 = 0, p1 = .5, p2 = 1.0)
- {
- var r = random();
- return colorThemes[r < p1 ? c1 : r < p2 ? c2 : c3]();
- }
- // Cosine interpolation
- function interpolation(a, b, t)
- {
- return (1 - cos(PI * t)) / 2 * (b - a) + a;
- }
- // Create a 1D Maximal Poisson Disc over [0, 1]
- var radius = 1 / eccentricity, radius2 = radius + radius;
- function createPoisson() {
- // domain is the set of points which are still available to pick from
- // D = union{ [d_i, d_i+1] | i is even }
- var domain = [radius, 1 - radius], measure = 1 - radius2, spline = [0, 1];
- while (measure)
- {
- var dart = measure * random(), i, l, interval, a, b, c, d;
- // Find where dart lies
- for (i = 0, l = domain.length, measure = 0; i < l; i += 2)
- {
- a = domain[i], b = domain[i + 1], interval = b - a;
- if (dart < measure + interval)
- {
- spline.push(dart += a - measure);
- break;
- }
- measure += interval;
- }
- c = dart - radius, d = dart + radius;
- // Update the domain
- for (i = domain.length - 1; i > 0; i -= 2)
- {
- l = i - 1, a = domain[l], b = domain[i];
- // c---d c---d Do nothing
- // c-----d c-----d Move interior
- // c--------------d Delete interval
- // c--d Split interval
- // a------b
- if (a >= c && a < d)
- if (b > d) domain[l] = d; // Move interior (Left case)
- else domain.splice(l, 2); // Delete interval
- else if (a < c && b > c)
- if (b <= d) domain[i] = c; // Move interior (Right case)
- else domain.splice(i, 0, c, d); // Split interval
- }
- // Re-measure the domain
- for (i = 0, l = domain.length, measure = 0; i < l; i += 2)
- measure += domain[i + 1] - domain[i];
- }
- return spline.sort();
- }
- // Create the overarching container
- var container = document.createElement('div');
- container.style.position = 'fixed';
- container.style.top = '0';
- container.style.left = '0';
- container.style.width = '100%';
- container.style.height = '0';
- container.style.overflow = 'visible';
- container.style.zIndex = '9999';
- // Confetto constructor
- function Confetto(theme)
- {
- this.frame = 0;
- this.outer = document.createElement('div');
- this.inner = document.createElement('div');
- this.outer.appendChild(this.inner);
- var outerStyle = this.outer.style, innerStyle = this.inner.style;
- outerStyle.position = 'absolute';
- outerStyle.width = (sizeMin + sizeMax * random()) + 'px';
- outerStyle.height = (sizeMin + sizeMax * random()) + 'px';
- innerStyle.width = '100%';
- innerStyle.height = '100%';
- innerStyle.backgroundColor = theme();
- outerStyle.perspective = '50px';
- outerStyle.transform = 'rotate(' + (360 * random()) + 'deg)';
- this.axis = 'rotate3D(' +
- cos(360 * random()) + ',' +
- cos(360 * random()) + ',0,';
- this.theta = 360 * random();
- this.dTheta = dThetaMin + dThetaMax * random();
- innerStyle.transform = this.axis + this.theta + 'deg)';
- this.x = $window.width() * random();
- this.y = -deviation;
- this.dx = sin(dxThetaMin + dxThetaMax * random());
- this.dy = dyMin + dyMax * random();
- outerStyle.left = this.x + 'px';
- outerStyle.top = this.y + 'px';
- // Create the periodic spline
- this.splineX = createPoisson();
- this.splineY = [];
- for (var i = 1, l = this.splineX.length - 1; i < l; ++i)
- this.splineY[i] = deviation * random();
- this.splineY[0] = this.splineY[l] = deviation * random();
- this.update = function (height, delta)
- {
- this.frame += delta;
- this.x += this.dx * delta;
- this.y += this.dy * delta;
- this.theta += this.dTheta * delta;
- // Compute spline and convert to polar
- var phi = this.frame % 7777 / 7777, i = 0, j = 1;
- while (phi >= this.splineX[j]) i = j++;
- var rho = interpolation(
- this.splineY[i],
- this.splineY[j],
- (phi - this.splineX[i]) / (this.splineX[j] - this.splineX[i])
- );
- phi *= PI2;
- outerStyle.left = this.x + rho * cos(phi) + 'px';
- outerStyle.top = this.y + rho * sin(phi) + 'px';
- innerStyle.transform = this.axis + this.theta + 'deg)';
- return this.y > height + deviation;
- };
- }
- function poof()
- {
- if (!frame)
- {
- // Append the container
- document.body.appendChild(container);
- // Add confetti
- var theme = colorThemes[0],
- count = 0;
- if ($('a.btn-celebrate').data('theme') != '')
- {
- theme = colorThemes[$('a.btn-celebrate').data('theme')];
- }
- (function addConfetto()
- {
- if (++count > particles)
- return timer = undefined;
- var confetto = new Confetto(theme);
- confetti.push(confetto);
- container.appendChild(confetto.outer);
- timer = setTimeout(addConfetto, spread * random());
- })(0);
- // Start the loop
- var prev = undefined;
- requestAnimationFrame(function loop(timestamp)
- {
- var delta = prev ? timestamp - prev : 0;
- prev = timestamp;
- var height = $window.height();
- for (var i = confetti.length - 1; i >= 0; --i)
- {
- if (confetti[i].update(height, delta))
- {
- container.removeChild(confetti[i].outer);
- confetti.splice(i, 1);
- }
- }
- if (timer || confetti.length)
- return frame = requestAnimationFrame(loop);
- // Cleanup
- document.body.removeChild(container);
- frame = undefined;
- });
- }
- }
- // trigger confetti on page load
- if (!onlyOnClick) poof();
- // trigger confetti on button click
- $('a.btn-celebrate').on('click', function (e)
- {
- e.preventDefault();
- poof();
- return false;
- })
- } // end of if statement to check to see if confetti has already dropped
- }); // end of document.ready
- {%- endjavascript -%}
- {%- endif -%}
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement