";
+ return item;
+ }
+
+ private _saveCommands($commands: JQuery, $commandWidth: number, $commandarea: JQuery): Array {
+ let commands = [];
+ $commands.each(function() {
+ let $Item = $(this);
+ // Added padding of 10
+ let $rightOffset = ($Item.position().left + $Item.outerWidth() + $commandWidth + 10) - $commandarea.position().left;
+ commands.push( new CommandItem( $Item, $rightOffset) );
+ });
+
+ return commands;
+ }
+
+ private _processCommands(commands: Array, width: number, overflowwidth: number): Array {
+ let overFlowCommands = [];
+
+ for (let i = 0; i < commands.length; i++) {
+ let $Item = commands[i].jquery;
+ let rightOffset = commands[i].rightOffset;
+
+ // If the command is outside the right boundaries add to overflow items
+ if (!$Item.hasClass("ms-CommandBarItem-overflow")) {
+ if ((rightOffset + overflowwidth) > width) {
+ overFlowCommands.push($Item);
+ } else {
+ // Make sure item is displayed
+ $Item.removeClass("is-hidden");
+ }
+ }
+ }
+ return overFlowCommands;
+ }
+
+ private _processOverflow(overFlowCommands: Array, $oCommand: JQuery, $menu: JQuery): void {
+ let overflowStrings = "";
+
+ if (overFlowCommands.length > 0) {
+ $oCommand.addClass("is-visible");
+ // Empty menu
+ $menu.html("");
+
+ // Add overflowed commands to ContextualMenu
+ for (let i = 0; i < overFlowCommands.length; i++) {
+ let $Item = $(overFlowCommands[i]);
+ // Hide Element in CommandBar
+ $Item.addClass("is-hidden");
+ let commandBarItemText = $Item.find(".ms-CommandBarItem-commandText").text();
+ overflowStrings += this._createMenuItem(commandBarItemText);
+ }
+ $menu.html(overflowStrings);
+ } else {
+ $oCommand.removeClass("is-visible");
+ }
+ }
+ } // end CommandBar
+} // end fabric namespace
diff --git a/src/components/ContextualMenu/Jquery.ContextualMenu.js b/src/components/ContextualMenu/Jquery.ContextualMenu.js
deleted file mode 100644
index 2a27de24..00000000
--- a/src/components/ContextualMenu/Jquery.ContextualMenu.js
+++ /dev/null
@@ -1,59 +0,0 @@
-// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
-
-/**
- * Contextual Menu Plugin
- */
-(function ($) {
- $.fn.ContextualMenu = function () {
-
- /** Go through each nav bar we've been given. */
- return this.each(function () {
-
- var $contextualMenu = $(this);
-
-
- // Set selected states.
- $contextualMenu.on('click', '.ms-ContextualMenu-link:not(.is-disabled)', function(event) {
- event.preventDefault();
-
- // Check if multiselect - set selected states
- if ( $contextualMenu.hasClass('ms-ContextualMenu--multiselect') ) {
-
- // If already selected, remove selection; if not, add selection
- if ( $(this).hasClass('is-selected') ) {
- $(this).removeClass('is-selected');
- }
- else {
- $(this).addClass('is-selected');
- }
-
- }
- // All other contextual menu variants
- else {
-
- // Deselect all of the items and close any menus.
- $('.ms-ContextualMenu-link')
- .removeClass('is-selected')
- .siblings('.ms-ContextualMenu')
- .removeClass('is-open');
-
- // Select this item.
- $(this).addClass('is-selected');
-
- // If this item has a menu, open it.
- if ($(this).hasClass('ms-ContextualMenu-link--hasMenu')) {
- $(this).siblings('.ms-ContextualMenu:first').addClass('is-open');
-
- // Open the menu without bubbling up the click event,
- // which can cause the menu to close.
- event.stopPropagation();
- }
-
- }
-
-
- });
-
- });
- };
-})(jQuery);
diff --git a/src/components/ContextualMenu/Jquery.ContextualMenu.ts b/src/components/ContextualMenu/Jquery.ContextualMenu.ts
new file mode 100644
index 00000000..0a424afe
--- /dev/null
+++ b/src/components/ContextualMenu/Jquery.ContextualMenu.ts
@@ -0,0 +1,57 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+// @TODO - we can add this once jquery is removed
+// "use strict";
+
+///
+
+namespace fabric {
+
+ /**
+ * Contextual Menu Plugin
+ */
+ export class ContextualMenu {
+
+ /**
+ *
+ * @param {HTMLDivElement} container - the target container for an instance of ContextualMenu
+ * @constructor
+ */
+ constructor(container: HTMLElement) {
+ let $contextualMenu = $(container);
+ // Set selected states.
+ $contextualMenu.on("click", ".ms-ContextualMenu-link:not(.is-disabled)", function(event) {
+ event.preventDefault();
+
+ // Check if multiselect - set selected states
+ if ( $contextualMenu.hasClass("ms-ContextualMenu--multiselect") ) {
+
+ // If already selected, remove selection; if not, add selection
+ if ( $(this).hasClass("is-selected") ) {
+ $(this).removeClass("is-selected");
+ } else {
+ $(this).addClass("is-selected");
+ }
+ } else { // All other contextual menu variants
+ // Deselect all of the items and close any menus.
+ $(".ms-ContextualMenu-link")
+ .removeClass("is-selected")
+ .siblings(".ms-ContextualMenu")
+ .removeClass("is-open");
+
+ // Select this item.
+ $(this).addClass("is-selected");
+
+ // If this item has a menu, open it.
+ if ($(this).hasClass("ms-ContextualMenu-link--hasMenu")) {
+ $(this).siblings(".ms-ContextualMenu:first").addClass("is-open");
+
+ // Open the menu without bubbling up the click event,
+ // which can cause the menu to close.
+ event.stopPropagation();
+ }
+
+ }
+ });
+ }
+ }
+}
diff --git a/src/components/DatePicker/Jquery.DatePicker.js b/src/components/DatePicker/Jquery.DatePicker.js
deleted file mode 100644
index 74b4b674..00000000
--- a/src/components/DatePicker/Jquery.DatePicker.js
+++ /dev/null
@@ -1,286 +0,0 @@
-// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
-
-(function ($) {
-
- /**
- * DatePicker Plugin
- */
-
- $.fn.DatePicker = function (options) {
-
- return this.each(function () {
-
- /** Set up variables and run the Pickadate plugin. */
- var $datePicker = $(this);
- var $dateField = $datePicker.find('.ms-TextField-field').pickadate($.extend({
- // Strings and translations.
- weekdaysShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
-
- // Don't render the buttons
- today: '',
- clear: '',
- close: '',
-
- // Events
- onStart: function() {
- initCustomView($datePicker);
- },
-
- // Classes
- klass: {
-
- // The element states
- input: 'ms-DatePicker-input',
- active: 'ms-DatePicker-input--active',
-
- // The root picker and states
- picker: 'ms-DatePicker-picker',
- opened: 'ms-DatePicker-picker--opened',
- focused: 'ms-DatePicker-picker--focused',
-
- // The picker holder
- holder: 'ms-DatePicker-holder',
-
- // The picker frame, wrapper, and box
- frame: 'ms-DatePicker-frame',
- wrap: 'ms-DatePicker-wrap',
- box: 'ms-DatePicker-dayPicker',
-
- // The picker header
- header: 'ms-DatePicker-header',
-
- // Month & year labels
- month: 'ms-DatePicker-month',
- year: 'ms-DatePicker-year',
-
- // Table of dates
- table: 'ms-DatePicker-table',
-
- // Weekday labels
- weekdays: 'ms-DatePicker-weekday',
-
- // Day states
- day: 'ms-DatePicker-day',
- disabled: 'ms-DatePicker-day--disabled',
- selected: 'ms-DatePicker-day--selected',
- highlighted: 'ms-DatePicker-day--highlighted',
- now: 'ms-DatePicker-day--today',
- infocus: 'ms-DatePicker-day--infocus',
- outfocus: 'ms-DatePicker-day--outfocus',
-
- }
- },options||{}));
- var $picker = $dateField.pickadate('picker');
-
- /** Respond to built-in picker events. */
- $picker.on({
- render: function() {
- updateCustomView($datePicker);
- },
- open: function() {
- scrollUp($datePicker);
- }
- });
-
- });
- };
-
- /**
- * After the Pickadate plugin starts, this function
- * adds additional controls to the picker view.
- */
- function initCustomView($datePicker) {
-
- /** Get some variables ready. */
- var $monthControls = $datePicker.find('.ms-DatePicker-monthComponents');
- var $goToday = $datePicker.find('.ms-DatePicker-goToday');
- var $monthPicker = $datePicker.find('.ms-DatePicker-monthPicker');
- var $yearPicker = $datePicker.find('.ms-DatePicker-yearPicker');
- var $pickerWrapper = $datePicker.find('.ms-DatePicker-wrap');
- var $picker = $datePicker.find('.ms-TextField-field').pickadate('picker');
-
- /** Move the month picker into position. */
- $monthControls.appendTo($pickerWrapper);
- $goToday.appendTo($pickerWrapper);
- $monthPicker.appendTo($pickerWrapper);
- $yearPicker.appendTo($pickerWrapper);
-
- /** Update the custom view. */
- updateCustomView($datePicker);
-
- /** Move back one month. */
- $monthControls.on('click', '.js-prevMonth', function(event) {
- event.preventDefault();
- var newMonth = $picker.get('highlight').month - 1;
- changeHighlightedDate($picker, null, newMonth, null);
- });
-
- /** Move ahead one month. */
- $monthControls.on('click', '.js-nextMonth', function(event) {
- event.preventDefault();
- var newMonth = $picker.get('highlight').month + 1;
- changeHighlightedDate($picker, null, newMonth, null);
- });
-
- /** Move back one year. */
- $monthPicker.on('click', '.js-prevYear', function(event) {
- event.preventDefault();
- var newYear = $picker.get('highlight').year - 1;
- changeHighlightedDate($picker, newYear, null, null);
- });
-
- /** Move ahead one year. */
- $monthPicker.on('click', '.js-nextYear', function(event) {
- event.preventDefault();
- var newYear = $picker.get('highlight').year + 1;
- changeHighlightedDate($picker, newYear, null, null);
- });
-
- /** Move back one decade. */
- $yearPicker.on('click', '.js-prevDecade', function(event) {
- event.preventDefault();
- var newYear = $picker.get('highlight').year - 10;
- changeHighlightedDate($picker, newYear, null, null);
- });
-
- /** Move ahead one decade. */
- $yearPicker.on('click', '.js-nextDecade', function(event) {
- event.preventDefault();
- var newYear = $picker.get('highlight').year + 10;
- changeHighlightedDate($picker, newYear, null, null);
- });
-
- /** Go to the current date, shown in the day picking view. */
- $goToday.click(function(event) {
- event.preventDefault();
-
- /** Select the current date, while keeping the picker open. */
- var now = new Date();
- $picker.set('select', [now.getFullYear(), now.getMonth(), now.getDate()]);
-
- /** Switch to the default (calendar) view. */
- $datePicker.removeClass('is-pickingMonths').removeClass('is-pickingYears');
-
- });
-
- /** Change the highlighted month. */
- $monthPicker.on('click', '.js-changeDate', function(event) {
- event.preventDefault();
-
- /** Get the requested date from the data attributes. */
- var newYear = $(this).attr('data-year');
- var newMonth = $(this).attr('data-month');
- var newDay = $(this).attr('data-day');
-
- /** Update the date. */
- changeHighlightedDate($picker, newYear, newMonth, newDay);
-
- /** If we've been in the "picking months" state on mobile, remove that state so we show the calendar again. */
- if ($datePicker.hasClass('is-pickingMonths')) {
- $datePicker.removeClass('is-pickingMonths');
- }
- });
-
- /** Change the highlighted year. */
- $yearPicker.on('click', '.js-changeDate', function(event) {
- event.preventDefault();
-
- /** Get the requested date from the data attributes. */
- var newYear = $(this).attr('data-year');
- var newMonth = $(this).attr('data-month');
- var newDay = $(this).attr('data-day');
-
- /** Update the date. */
- changeHighlightedDate($picker, newYear, newMonth, newDay);
-
- /** If we've been in the "picking years" state on mobile, remove that state so we show the calendar again. */
- if ($datePicker.hasClass('is-pickingYears')) {
- $datePicker.removeClass('is-pickingYears');
- }
- });
-
- /** Switch to the default state. */
- $monthPicker.on('click', '.js-showDayPicker', function() {
- $datePicker.removeClass('is-pickingMonths');
- $datePicker.removeClass('is-pickingYears');
- });
-
- /** Switch to the is-pickingMonths state. */
- $monthControls.on('click', '.js-showMonthPicker', function() {
- $datePicker.toggleClass('is-pickingMonths');
- });
-
- /** Switch to the is-pickingYears state. */
- $monthPicker.on('click', '.js-showYearPicker', function() {
- $datePicker.toggleClass('is-pickingYears');
- });
-
- }
-
- /** Change the highlighted date. */
- function changeHighlightedDate($picker, newYear, newMonth, newDay) {
-
- /** All letiables are optional. If not provided, default to the current value. */
- if (typeof newYear === "undefined" || newYear === null) {
- newYear = $picker.get("highlight").year;
- }
- if (typeof newMonth === "undefined" || newMonth === null) {
- newMonth = $picker.get("highlight").month;
- }
- if (typeof newDay === "undefined" || newDay === null) {
- newDay = $picker.get("highlight").date;
- }
-
- /** Update it. */
- $picker.set('highlight', [newYear, newMonth, newDay]);
-
- }
-
-
- /** Whenever the picker renders, do our own rendering on the custom controls. */
- function updateCustomView($datePicker) {
-
- /** Get some variables ready. */
- var $monthPicker = $datePicker.find('.ms-DatePicker-monthPicker');
- var $yearPicker = $datePicker.find('.ms-DatePicker-yearPicker');
- var $picker = $datePicker.find('.ms-TextField-field').pickadate('picker');
-
- /** Set the correct year. */
- $monthPicker.find('.ms-DatePicker-currentYear').text($picker.get('view').year);
-
- /** Highlight the current month. */
- $monthPicker.find('.ms-DatePicker-monthOption').removeClass('is-highlighted');
- $monthPicker.find('.ms-DatePicker-monthOption[data-month="' + $picker.get('highlight').month + '"]').addClass('is-highlighted');
-
- /** Generate the grid of years for the year picker view. */
-
- // Start by removing any existing generated output. */
- $yearPicker.find('.ms-DatePicker-currentDecade').remove();
- $yearPicker.find('.ms-DatePicker-optionGrid').remove();
-
- // Generate the output by going through the years.
- var startingYear = $picker.get('highlight').year - 11;
- var decadeText = startingYear + " - " + (startingYear + 11);
- var output = '
' + decadeText + '
';
- output += '
';
- for (var year = startingYear; year < (startingYear + 12); year++) {
- output += '' + year +'';
- }
- output += '
';
-
- // Output the title and grid of years generated above.
- $yearPicker.append(output);
-
- /** Highlight the current year. */
- $yearPicker.find('.ms-DatePicker-yearOption').removeClass('is-highlighted');
- $yearPicker.find('.ms-DatePicker-yearOption[data-year="' + $picker.get('highlight').year + '"]').addClass('is-highlighted');
- }
-
- /** Scroll the page up so that the field the date picker is attached to is at the top. */
- function scrollUp($datePicker) {
- $('html, body').animate({
- scrollTop: $datePicker.offset().top
- }, 367);
- }
-
-})(jQuery);
diff --git a/src/components/DatePicker/Jquery.DatePicker.ts b/src/components/DatePicker/Jquery.DatePicker.ts
new file mode 100644
index 00000000..c2265d6e
--- /dev/null
+++ b/src/components/DatePicker/Jquery.DatePicker.ts
@@ -0,0 +1,286 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+// @TODO - we can add this once jquery is removed
+// "use strict";
+
+///
+///
+
+namespace fabric {
+ /**
+ * DatePicker Plugin
+ */
+ export class DatePicker {
+
+ constructor(container, options) {
+ /** Set up letiables and run the Pickadate plugin. */
+ let $datePicker = $(container);
+ let $dateField: any = $datePicker.find(".ms-TextField-field").pickadate($.extend({
+ // Strings and translations.
+ weekdaysShort: ["S", "M", "T", "W", "T", "F", "S"],
+
+ // Don't render the buttons
+ clear: "",
+ close: "",
+ today: "",
+
+ // Events
+ onStart: () => {
+ this.initCustomView($datePicker);
+ },
+
+ // Classes
+ klass: {
+
+ // The element states
+ input: "ms-DatePicker-input",
+ active: "ms-DatePicker-input--active",
+
+ // The root picker and states
+ picker: "ms-DatePicker-picker",
+ opened: "ms-DatePicker-picker--opened",
+ focused: "ms-DatePicker-picker--focused",
+
+ // The picker holder
+ holder: "ms-DatePicker-holder",
+
+ // The picker frame, wrapper, and box
+ frame: "ms-DatePicker-frame",
+ wrap: "ms-DatePicker-wrap",
+ box: "ms-DatePicker-dayPicker",
+
+ // The picker header
+ header: "ms-DatePicker-header",
+
+ // Month & year labels
+ month: "ms-DatePicker-month",
+ year: "ms-DatePicker-year",
+
+ // Table of dates
+ table: "ms-DatePicker-table",
+
+ // Weekday labels
+ weekdays: "ms-DatePicker-weekday",
+
+ // Day states
+ day: "ms-DatePicker-day",
+ disabled: "ms-DatePicker-day--disabled",
+ selected: "ms-DatePicker-day--selected",
+ highlighted: "ms-DatePicker-day--highlighted",
+ now: "ms-DatePicker-day--today",
+ infocus: "ms-DatePicker-day--infocus",
+ outfocus: "ms-DatePicker-day--outfocus",
+ },
+ }, options || {}));
+ let $picker = $dateField.pickadate("picker");
+
+ /** Respond to built-in picker events. */
+ $picker.on({
+ render: () => {
+ this.updateCustomView($datePicker);
+ },
+ open: () => {
+ this.scrollUp($datePicker);
+ },
+ });
+ }
+
+ /**
+ * After the Pickadate plugin starts, this function
+ * adds additional controls to the picker view.
+ */
+ public initCustomView($datePicker) {
+
+ /** Get some letiables ready. */
+ let $monthControls = $datePicker.find(".ms-DatePicker-monthComponents");
+ let $goToday = $datePicker.find(".ms-DatePicker-goToday");
+ let $monthPicker = $datePicker.find(".ms-DatePicker-monthPicker");
+ let $yearPicker = $datePicker.find(".ms-DatePicker-yearPicker");
+ let $pickerWrapper = $datePicker.find(".ms-DatePicker-wrap");
+ let $picker = $datePicker.find(".ms-TextField-field").pickadate("picker");
+
+ /** Move the month picker into position. */
+ $monthControls.appendTo($pickerWrapper);
+ $goToday.appendTo($pickerWrapper);
+ $monthPicker.appendTo($pickerWrapper);
+ $yearPicker.appendTo($pickerWrapper);
+
+ /** Update the custom view. */
+ this.updateCustomView($datePicker);
+
+ /** Move back one month. */
+ $monthControls.on("click", ".js-prevMonth", (event) => {
+ event.preventDefault();
+ let newMonth = $picker.get("highlight").month - 1;
+ this.changeHighlightedDate($picker, null, newMonth, null);
+ });
+
+ /** Move ahead one month. */
+ $monthControls.on("click", ".js-nextMonth", (event) => {
+ event.preventDefault();
+ let newMonth = $picker.get("highlight").month + 1;
+ this.changeHighlightedDate($picker, null, newMonth, null);
+ });
+
+ /** Move back one year. */
+ $monthPicker.on("click", ".js-prevYear", (event) => {
+ event.preventDefault();
+ let newYear = $picker.get("highlight").year - 1;
+ this.changeHighlightedDate($picker, newYear, null, null);
+ });
+
+ /** Move ahead one year. */
+ $monthPicker.on("click", ".js-nextYear", (event) => {
+ event.preventDefault();
+ let newYear = $picker.get("highlight").year + 1;
+ this.changeHighlightedDate($picker, newYear, null, null);
+ });
+
+ /** Move back one decade. */
+ $yearPicker.on("click", ".js-prevDecade", (event) => {
+ event.preventDefault();
+ let newYear = $picker.get("highlight").year - 10;
+ this.changeHighlightedDate($picker, newYear, null, null);
+ });
+
+ /** Move ahead one decade. */
+ $yearPicker.on("click", ".js-nextDecade", (event) => {
+ event.preventDefault();
+ let newYear = $picker.get("highlight").year + 10;
+ this.changeHighlightedDate($picker, newYear, null, null);
+ });
+
+ /** Go to the current date, shown in the day picking view. */
+ $goToday.click((event) => {
+ event.preventDefault();
+
+ /** Select the current date, while keeping the picker open. */
+ let now = new Date();
+ $picker.set("select", [now.getFullYear(), now.getMonth(), now.getDate()]);
+
+ /** Switch to the default (calendar) view. */
+ $datePicker.removeClass("is-pickingMonths").removeClass("is-pickingYears");
+
+ });
+
+ /** Change the highlighted month. */
+ $monthPicker.on("click", ".js-changeDate", (event) => {
+ event.preventDefault();
+
+ let $changeDate = $(event.toElement);
+
+ /** Get the requested date from the data attributes. */
+ let newYear = $changeDate.attr("data-year");
+ let newMonth = $changeDate.attr("data-month");
+ let newDay = $changeDate.attr("data-day");
+
+ /** Update the date. */
+ this.changeHighlightedDate($picker, newYear, newMonth, newDay);
+
+ /** If we"ve been in the "picking months" state on mobile, remove that state so we show the calendar again. */
+ if ($datePicker.hasClass("is-pickingMonths")) {
+ $datePicker.removeClass("is-pickingMonths");
+ }
+ });
+
+ /** Change the highlighted year. */
+ $yearPicker.on("click", ".js-changeDate", (event) => {
+ event.preventDefault();
+ let $changeDate = $(event.toElement);
+
+ /** Get the requested date from the data attributes. */
+ let newYear = $changeDate.attr("data-year");
+ let newMonth = $changeDate.attr("data-month");
+ let newDay = $changeDate.attr("data-day");
+
+ /** Update the date. */
+ this.changeHighlightedDate($picker, newYear, newMonth, newDay);
+
+ /** If we"ve been in the "picking years" state on mobile, remove that state so we show the calendar again. */
+ if ($datePicker.hasClass("is-pickingYears")) {
+ $datePicker.removeClass("is-pickingYears");
+ }
+ });
+
+ /** Switch to the default state. */
+ $monthPicker.on("click", ".js-showDayPicker", function() {
+ $datePicker.removeClass("is-pickingMonths");
+ $datePicker.removeClass("is-pickingYears");
+ });
+
+ /** Switch to the is-pickingMonths state. */
+ $monthControls.on("click", ".js-showMonthPicker", function() {
+ $datePicker.toggleClass("is-pickingMonths");
+ });
+
+ /** Switch to the is-pickingYears state. */
+ $monthPicker.on("click", ".js-showYearPicker", function() {
+ $datePicker.toggleClass("is-pickingYears");
+ });
+ }
+
+ /** Change the highlighted date. */
+ public changeHighlightedDate($picker, newYear, newMonth, newDay) {
+
+ /** All letiables are optional. If not provided, default to the current value. */
+ if (typeof newYear === "undefined" || newYear === null) {
+ newYear = $picker.get("highlight").year;
+ }
+ if (typeof newMonth === "undefined" || newMonth === null) {
+ newMonth = $picker.get("highlight").month;
+ }
+ if (typeof newDay === "undefined" || newDay === null) {
+ newDay = $picker.get("highlight").date;
+ }
+
+ /** Update it. */
+ $picker.set("highlight", [newYear, newMonth, newDay]);
+ }
+
+
+ /** Whenever the picker renders, do our own rendering on the custom controls. */
+ public updateCustomView($datePicker) {
+
+ /** Get some letiables ready. */
+ let $monthPicker = $datePicker.find(".ms-DatePicker-monthPicker");
+ let $yearPicker = $datePicker.find(".ms-DatePicker-yearPicker");
+ let $picker = $datePicker.find(".ms-TextField-field").pickadate("picker");
+
+ /** Set the correct year. */
+ $monthPicker.find(".ms-DatePicker-currentYear").text($picker.get("view").year);
+
+ /** Highlight the current month. */
+ $monthPicker.find(".ms-DatePicker-monthOption").removeClass("is-highlighted");
+ $monthPicker.find(".ms-DatePicker-monthOption[data-month='" + $picker.get("highlight").month + "']").addClass("is-highlighted");
+
+ /** Generate the grid of years for the year picker view. */
+
+ // Start by removing any existing generated output. */
+ $yearPicker.find(".ms-DatePicker-currentDecade").remove();
+ $yearPicker.find(".ms-DatePicker-optionGrid").remove();
+
+ // Generate the output by going through the years.
+ let startingYear = $picker.get("highlight").year - 11;
+ let decadeText = startingYear + " - " + (startingYear + 11);
+ let output = "
" + decadeText + "
";
+ output += "
";
+ for (let year = startingYear; year < (startingYear + 12); year++) {
+ output += "" + year + "";
+ }
+ output += "
";
+
+ // Output the title and grid of years generated above.
+ $yearPicker.append(output);
+
+ /** Highlight the current year. */
+ $yearPicker.find(".ms-DatePicker-yearOption").removeClass("is-highlighted");
+ $yearPicker.find(".ms-DatePicker-yearOption[data-year='" + $picker.get("highlight").year + "']").addClass("is-highlighted");
+ }
+
+ /** Scroll the page up so that the field the date picker is attached to is at the top. */
+ public scrollUp($datePicker) {
+ $("html, body").animate({
+ scrollTop: $datePicker.offset().top,
+ }, 367);
+ }
+ }
+}
diff --git a/src/components/Dialog/jquery.Dialog.js b/src/components/Dialog/jquery.Dialog.js
deleted file mode 100644
index 0d647332..00000000
--- a/src/components/Dialog/jquery.Dialog.js
+++ /dev/null
@@ -1,44 +0,0 @@
-// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
-
-/**
- * Dialog Plugin
- *
- * Adds basic demonstration functionality to .ms-Dialog components.
- *
- * @param {jQuery Object} One or more .ms-Dialog components
- * @return {jQuery Object} The same components (allows for chaining)
- */
-(function ($) {
- $.fn.Dialog = function () {
-
- /** Iterate through the sample buttons, which can be used to open the Dialogs. */
- $(".js-DialogAction--open").each(function () {
- /** Open the associated dialog on click. */
- $(this).on('click', function () {
- var target = $(this).data("target");
- $(target).show();
- });
- });
-
-
- return this.each(function () {
- var dialog = this;
-
- /** Have the dialogs hidden for their initial state */
- $(dialog).hide();
-
- /** Have the close buttons close the Dialog. */
- $(dialog).find(".js-DialogAction--close").each(function() {
- $(this).on('click', function () {
- $(dialog).hide();
- });
- });
-
- /** Have the action buttons close the Dialog, though you would usually do some specific action per button. */
- $(dialog).find(".ms-Dialog-action").on('click', function () {
- $(dialog).hide();
- });
-
- });
- };
-})(jQuery);
diff --git a/src/components/Dialog/jquery.Dialog.ts b/src/components/Dialog/jquery.Dialog.ts
new file mode 100644
index 00000000..d938d28e
--- /dev/null
+++ b/src/components/Dialog/jquery.Dialog.ts
@@ -0,0 +1,53 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+// @TODO - we can add this once jquery is removed
+// "use strict";
+
+///
+
+namespace fabric {
+ /**
+ * Dialog Plugin
+ *
+ * Adds basic demonstration functionality to .ms-Dialog components.
+ */
+ export class Dialog {
+
+ /**
+ *
+ * @param {HTMLElement} container - the target container for an instance of Dialog
+ * @constructor
+ */
+ constructor(container: HTMLElement) {
+ let dialog = container;
+
+ /** Have the dialogs hidden for their initial state */
+ $(dialog).hide();
+
+ /** Have the close buttons close the Dialog. */
+ $(dialog).find(".js-DialogAction--close").each(function() {
+ $(this).on("click", function () {
+ $(dialog).hide();
+ });
+ });
+
+ /** Have the action buttons close the Dialog, though you would usually do some specific action per button. */
+ $(dialog).find(".ms-Dialog-action").on("click", function () {
+ $(dialog).hide();
+ });
+ }
+ } // end Dialog
+} // end Fabric namespace
+
+
+/* presentation code for the samples -
+ configure any sample buttons so that they open the associated Dialog */
+$(document).ready(function() {
+ /** Iterate through the sample buttons, which can be used to open the Dialogs. */
+ $(".js-DialogAction--open").each(function () {
+ /** Open the associated dialog on click. */
+ $(this).on("click", function () {
+ let target = $(this).data("target");
+ $(target).show();
+ });
+ });
+});
diff --git a/src/components/Dropdown/Jquery.Dropdown.js b/src/components/Dropdown/Jquery.Dropdown.js
deleted file mode 100644
index 30b806c5..00000000
--- a/src/components/Dropdown/Jquery.Dropdown.js
+++ /dev/null
@@ -1,157 +0,0 @@
-// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
-
-/**
- * Dropdown Plugin
- *
- * Given .ms-Dropdown containers with generic