diff --git a/README.md b/README.md index 3939e26d..e8f1510b 100644 --- a/README.md +++ b/README.md @@ -2,15 +2,15 @@ Heat.js [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Heat.js%2C%20a%20free%20JavaScript%heat%20map&url=https://github.com/williamtroup/Heat.js&hashtags=javascript,heat,map) -[![npm](https://img.shields.io/badge/npmjs-v1.1.0-blue)](https://www.npmjs.com/package/jheat.js) -[![nuget](https://img.shields.io/badge/nuget-v1.1.0-purple)](https://www.nuget.org/packages/jHeat.js/) +[![npm](https://img.shields.io/badge/npmjs-v1.2.0-blue)](https://www.npmjs.com/package/jheat.js) +[![nuget](https://img.shields.io/badge/nuget-v1.2.0-purple)](https://www.nuget.org/packages/jHeat.js/) [![license](https://img.shields.io/badge/license-MIT-green)](https://github.com/williamtroup/Heat.js/blob/main/LICENSE.txt) [![discussions Welcome](https://img.shields.io/badge/discussions-Welcome-red)](https://github.com/williamtroup/Heat.js/discussions) -[![coded by William Troup](https://img.shields.io/badge/coded_by-William_Troup-yellow)](https://github.com/williamtroup) +[![coded by William Troup](https://img.shields.io/badge/coded_by-William_Troup-yellow)](https://william-troup.com/) >

🌞 A lightweight JavaScript library that generates customizable heat maps to visualize date-based activity and trends.

->

v1.1.0

+>

v1.2.0


![Heat.js](docs/images/main.png) @@ -96,9 +96,9 @@ Make sure you include the "DOCTYPE html" tag at the top of your HTML, as follows ``` -To see a list of all the available binding options you can use for "data-heat-options", click [here](docs/binding/options/OPTIONS.md). +To see a list of all the available binding options you can use for "data-heat-options", click [here](docs/binding/OPTIONS.md). -To see a list of all the available custom triggers you can use for "data-heat-options", click [here](docs/binding/options/CUSTOM_TRIGGERS.md). +To see a list of all the available custom triggers you can use for "data-heat-options", click [here](docs/binding/CUSTOM_TRIGGERS.md).
diff --git a/README_NUGET.md b/README_NUGET.md index 71980d96..55e446c1 100644 --- a/README_NUGET.md +++ b/README_NUGET.md @@ -1,11 +1,11 @@ -# Heat.js v1.1.0 +# Heat.js v1.2.0 [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Heat.js%2C%20a%20free%20JavaScript%heat%20map&url=https://github.com/williamtroup/Heat.js&hashtags=javascript,heat,map) -[![npm](https://img.shields.io/badge/npmjs-v1.1.0-blue)](https://www.npmjs.com/package/jheat.js) -[![nuget](https://img.shields.io/badge/nuget-v1.1.0-purple)](https://www.nuget.org/packages/jHeat.js/) +[![npm](https://img.shields.io/badge/npmjs-v1.2.0-blue)](https://www.npmjs.com/package/jheat.js) +[![nuget](https://img.shields.io/badge/nuget-v1.2.0-purple)](https://www.nuget.org/packages/jHeat.js/) [![license](https://img.shields.io/badge/license-MIT-green)](https://github.com/williamtroup/Heat.js/blob/main/LICENSE.txt) [![discussions Welcome](https://img.shields.io/badge/discussions-Welcome-red)](https://github.com/williamtroup/Heat.js/discussions) -[![coded by William Troup](https://img.shields.io/badge/coded_by-William_Troup-yellow)](https://github.com/williamtroup) +[![coded by William Troup](https://img.shields.io/badge/coded_by-William_Troup-yellow)](https://william-troup.com/) > 🌞 A lightweight JavaScript library that generates customizable heat maps to visualize date-based activity and trends. @@ -45,7 +45,7 @@ All modern browsers (such as Google Chrome, FireFox, and Opera) are fully suppor ## What are the most recent changes? -To see a list of all the most recent changes, click [here](https://github.com/williamtroup/Heat.js/blob/main/docs/CHANGE_LOG.md). +To see a list of all the most recent changes, click [here](https://william-troup.com/heat-js/documentation/recent-changes.html). ## How do I get started? @@ -75,9 +75,9 @@ Make sure you include the "DOCTYPE html" tag at the top of your HTML, as follows ``` -To see a list of all the available binding options you can use for "data-heat-options", click [here](https://github.com/williamtroup/Heat.js/blob/main/docs/binding/options/OPTIONS.md). +To see a list of all the available binding options you can use for "data-heat-options", click [here](https://william-troup.com/heat-js/documentation/binding-options.html). -To see a list of all the available custom triggers you can use for "data-heat-options", click [here](https://github.com/williamtroup/Heat.js/blob/main/docs/binding/options/CUSTOM_TRIGGERS.md). +To see a list of all the available custom triggers you can use for "data-heat-options", click [here](https://william-troup.com/heat-js/documentation/binding-options-custom-triggers.html). ### 4. Adding Dates: @@ -106,7 +106,7 @@ To customize, and get more out of Heat.js, please read through the following doc ### 1. Public Functions: -To see a list of all the public functions available, click [here](https://github.com/williamtroup/Heat.js/blob/main/docs/PUBLIC_FUNCTIONS.md). +To see a list of all the public functions available, click [here](https://william-troup.com/heat-js/documentation/public-functions.html). ### 2. Configuration: @@ -121,4 +121,4 @@ Configuration options allow you to customize how Heat.js will function. You can ``` -To see a list of all the available configuration options you can use, click [here](https://github.com/williamtroup/Heat.js/blob/main/docs/OPTIONS.md). \ No newline at end of file +To see a list of all the available configuration options you can use, click [here](https://william-troup.com/heat-js/documentation/options.html). \ No newline at end of file diff --git a/dist/heat.js b/dist/heat.js index d5812a32..5ca6f8f3 100644 --- a/dist/heat.js +++ b/dist/heat.js @@ -1,4 +1,4 @@ -/*! Heat.js v1.1.0 | (c) Bunoon 2024 | MIT License */ +/*! Heat.js v1.2.0 | (c) Bunoon 2024 | MIT License */ (function() { function render() { var tagTypes = _configuration.domElementTypes; @@ -27,7 +27,7 @@ bindingOptions.element = element; bindingOptions.currentView = {}; bindingOptions.currentView.colorsVisible = {}; - bindingOptions.currentView.year = null; + bindingOptions.currentView.year = bindingOptions.year; bindingOptions.currentView.type = _elements_DateCounts_DefaultType; fireCustomTrigger(bindingOptions.onBeforeRender, element); if (!isDefinedString(element.id)) { @@ -59,50 +59,34 @@ renderControlMap(bindingOptions); } function renderControlTitleBar(bindingOptions) { - if (!isDefinedNumber(bindingOptions.currentView.year)) { - bindingOptions.currentView.year = (new Date()).getFullYear(); - } if (bindingOptions.showTitle || bindingOptions.showYearSelector || bindingOptions.showRefreshButton || bindingOptions.showExportButton) { - var titleBar = createElement("div", "title-bar"); - bindingOptions.element.appendChild(titleBar); + var titleBar = createElement(bindingOptions.element, "div", "title-bar"); if (bindingOptions.showTitle) { - var title = createElement("div", "title"); - title.innerHTML = bindingOptions.titleText; - titleBar.appendChild(title); + createElementWithHTML(titleBar, "div", "title", bindingOptions.titleText); } if (bindingOptions.showExportButton) { - var exportData = createElement("button", "export"); - exportData.innerHTML = _configuration.exportButtonText; - titleBar.appendChild(exportData); + var exportData = createElementWithHTML(titleBar, "button", "export", _configuration.exportButtonText); exportData.onclick = function() { exportAllData(bindingOptions); fireCustomTrigger(bindingOptions.onExport, bindingOptions.element); }; } if (bindingOptions.showRefreshButton) { - var refresh = createElement("button", "refresh"); - refresh.innerHTML = _configuration.refreshButtonText; - titleBar.appendChild(refresh); + var refresh = createElementWithHTML(titleBar, "button", "refresh", _configuration.refreshButtonText); refresh.onclick = function() { renderControl(bindingOptions); fireCustomTrigger(bindingOptions.onRefresh, bindingOptions.element); }; } if (bindingOptions.showYearSelector) { - var back = createElement("button", "back"); - back.innerHTML = _configuration.backButtonText; - titleBar.appendChild(back); + var back = createElementWithHTML(titleBar, "button", "back", _configuration.backButtonText); back.onclick = function() { bindingOptions.currentView.year--; renderControl(bindingOptions); fireCustomTrigger(bindingOptions.onBackYear, bindingOptions.currentView.year); }; - bindingOptions.currentView.yearText = createElement("div", "year-text"); - bindingOptions.currentView.yearText.innerHTML = bindingOptions.currentView.year; - titleBar.appendChild(bindingOptions.currentView.yearText); - var next = createElement("button", "next"); - next.innerHTML = _configuration.nextButtonText; - titleBar.appendChild(next); + bindingOptions.currentView.yearText = createElementWithHTML(titleBar, "div", "year-text", bindingOptions.currentView.year); + var next = createElementWithHTML(titleBar, "button", "next", _configuration.nextButtonText); next.onclick = function() { bindingOptions.currentView.year++; renderControl(bindingOptions); @@ -112,16 +96,13 @@ } } function renderControlMap(bindingOptions) { - var mapContents = createElement("div", "map-contents"); - bindingOptions.element.appendChild(mapContents); - var map = createElement("div", "map"); - mapContents.appendChild(map); + var mapContents = createElement(bindingOptions.element, "div", "map-contents"); + var map = createElement(mapContents, "div", "map"); renderControlViewGuide(bindingOptions); var currentYear = bindingOptions.currentView.year; var monthAdded = false; if (bindingOptions.showDayNames) { - var days = createElement("div", "days"); - map.appendChild(days); + var days = createElement(map, "div", "days"); if (!bindingOptions.showMonthNames || bindingOptions.placeMonthNamesOnTheBottom) { days.style.paddingTop = "0px"; days.style.marginTop = !bindingOptions.placeMonthNamesOnTheBottom ? "-5px" : "-2px"; @@ -129,33 +110,25 @@ var dayNameIndex = 0; for (; dayNameIndex < 7; dayNameIndex++) { if (bindingOptions.daysToShow.indexOf(dayNameIndex + 1) > -1) { - var dayName = createElement("div", "day-name"); - dayName.innerHTML = _configuration.dayNames[dayNameIndex]; - days.appendChild(dayName); + createElementWithHTML(days, "div", "day-name", _configuration.dayNames[dayNameIndex]); } } } - var months = createElement("div", "months"); - map.appendChild(months); + var months = createElement(map, "div", "months"); var mapRangeColors = bindingOptions.mapRangeColors.sort(function(a, b) { return b.range - a.range; }); var monthIndex = 0; for (; monthIndex < 12; monthIndex++) { if (bindingOptions.monthsToShow.indexOf(monthIndex + 1) > -1) { - var month = createElement("div", "month"); - months.appendChild(month); + var month = createElement(months, "div", "month"); if (bindingOptions.showMonthNames && !bindingOptions.placeMonthNamesOnTheBottom) { - var monthNameTop = createElement("div", "month-name"); - monthNameTop.innerHTML = _configuration.monthNames[monthIndex]; - month.appendChild(monthNameTop); + createElementWithHTML(month, "div", "month-name", _configuration.monthNames[monthIndex]); } - var dayColumns = createElement("div", "day-columns"); - month.appendChild(dayColumns); + var dayColumns = createElement(month, "div", "day-columns"); var totalDaysInMonth = getTotalDaysInMonth(currentYear, monthIndex); - var currentDayColumn = createElement("div", "day-column"); + var currentDayColumn = createElement(dayColumns, "div", "day-column"); var startFillingDays = false; - dayColumns.appendChild(currentDayColumn); var firstDayInMonth = new Date(currentYear, monthIndex, 1); var firstDayNumberInMonth = getWeekdayNumber(firstDayInMonth); var actualDay = 1; @@ -165,25 +138,27 @@ if (dayIndex >= firstDayNumberInMonth) { startFillingDays = true; } else { - var day = createElement("div", "day-disabled"); - currentDayColumn.appendChild(day); + createElement(currentDayColumn, "div", "day-disabled"); } if (startFillingDays) { + var day = null; if (bindingOptions.daysToShow.indexOf(actualDay) > -1) { - renderControlViewMonthDay(bindingOptions, currentDayColumn, dayIndex - firstDayNumberInMonth, monthIndex, currentYear, mapRangeColors); + day = renderControlViewMonthDay(bindingOptions, currentDayColumn, dayIndex - firstDayNumberInMonth, monthIndex, currentYear, mapRangeColors); } if ((dayIndex + 1) % 7 === 0) { - currentDayColumn = createElement("div", "day-column"); - dayColumns.appendChild(currentDayColumn); + currentDayColumn = createElement(dayColumns, "div", "day-column"); actualDay = 0; + if (!isDefined(_elements_Day_Width) && isDefined(day)) { + var marginLeft = getStyleValueByName(day, "margin-left", true); + var marginRight = getStyleValueByName(day, "margin-right", true); + _elements_Day_Width = day.offsetWidth + marginLeft + marginRight; + } } } actualDay++; } if (bindingOptions.showMonthNames && bindingOptions.placeMonthNamesOnTheBottom) { - var monthNameBottom = createElement("div", "month-name-bottom"); - monthNameBottom.innerHTML = _configuration.monthNames[monthIndex]; - month.appendChild(monthNameBottom); + createElementWithHTML(month, "div", "month-name-bottom", _configuration.monthNames[monthIndex]); } if (monthAdded && isDefined(_elements_Day_Width)) { if (firstDayNumberInMonth > 0 && !bindingOptions.showMonthDayGaps) { @@ -198,12 +173,11 @@ } function renderControlViewMonthDay(bindingOptions, currentDayColumn, dayNumber, month, year, mapRangeColors) { var actualDay = dayNumber + 1; - var day = createElement("div", "day"); + var day = createElement(currentDayColumn, "div", "day"); var date = new Date(year, month, actualDay); var dateCount = _elements_DateCounts[bindingOptions.element.id].type[bindingOptions.currentView.type][toStorageDate(date)]; dateCount = isDefinedNumber(dateCount) ? dateCount : 0; day.title = getCustomFormattedDateText(bindingOptions.dayToolTipText, date); - currentDayColumn.appendChild(day); if (isDefinedFunction(bindingOptions.onDayClick)) { day.onclick = function() { fireCustomTrigger(bindingOptions.onDayClick, date, dateCount); @@ -223,17 +197,11 @@ if (isDefined(useMapRangeColor) && isHeatMapColorVisible(bindingOptions, useMapRangeColor.id)) { day.className += _string.space + useMapRangeColor.cssClassName; } - if (!isDefined(_elements_Day_Width)) { - var marginLeft = getStyleValueByName(day, "margin-left", true); - var marginRight = getStyleValueByName(day, "margin-right", true); - _elements_Day_Width = day.offsetWidth + marginLeft + marginRight; - } + return day; } function renderControlViewGuide(bindingOptions) { - var guide = createElement("div", "guide"); - bindingOptions.element.appendChild(guide); - var mapTypes = createElement("div", "map-types"); - guide.appendChild(mapTypes); + var guide = createElement(bindingOptions.element, "div", "guide"); + var mapTypes = createElement(guide, "div", "map-types"); var noneTypeCount = 0; var storageDate; for (storageDate in _elements_DateCounts[bindingOptions.element.id].type[_elements_DateCounts_DefaultType]) { @@ -254,11 +222,8 @@ } } if (bindingOptions.showGuide) { - var mapToggles = createElement("div", "map-toggles"); - guide.appendChild(mapToggles); - var lessText = createElement("div", "less-text"); - lessText.innerHTML = _configuration.lessText; - mapToggles.appendChild(lessText); + var mapToggles = createElement(guide, "div", "map-toggles"); + var lessText = createElementWithHTML(mapToggles, "div", "less-text", _configuration.lessText); if (bindingOptions.mapTogglesEnabled) { lessText.onclick = function() { updateMapRangeColorToggles(bindingOptions, false); @@ -266,8 +231,7 @@ } else { lessText.className += _string.space + "no-click"; } - var days = createElement("div", "days"); - mapToggles.appendChild(days); + var days = createElement(mapToggles, "div", "days"); var mapRangeColors = bindingOptions.mapRangeColors.sort(function(a, b) { return b.range - a.range; }); @@ -276,9 +240,7 @@ for (; mapRangeColorsIndex < mapRangeColorsLength; mapRangeColorsIndex++) { renderControlViewGuideDay(bindingOptions, days, mapRangeColors[mapRangeColorsIndex]); } - var moreText = createElement("div", "more-text"); - moreText.innerHTML = _configuration.moreText; - mapToggles.appendChild(moreText); + var moreText = createElementWithHTML(mapToggles, "div", "more-text", _configuration.moreText); if (bindingOptions.mapTogglesEnabled) { moreText.onclick = function() { updateMapRangeColorToggles(bindingOptions, true); @@ -289,9 +251,7 @@ } } function renderControlViewGuideTypeButton(bindingOptions, mapTypes, type) { - var typeButton = createElement("button", "type"); - typeButton.innerHTML = type; - mapTypes.appendChild(typeButton); + var typeButton = createElementWithHTML(mapTypes, "button", "type", type); if (bindingOptions.currentView.type === type) { typeButton.className += _string.space + "active"; } @@ -304,9 +264,8 @@ }; } function renderControlViewGuideDay(bindingOptions, days, mapRangeColor) { - var day = createElement("div"); + var day = createElement(days, "div"); day.title = mapRangeColor.tooltipText; - days.appendChild(day); if (isHeatMapColorVisible(bindingOptions, mapRangeColor.id)) { day.className = "day " + mapRangeColor.cssClassName; } else { @@ -347,12 +306,11 @@ function exportAllData(bindingOptions) { var csvContents = getCsvContent(bindingOptions); if (csvContents !== _string.empty) { - var tempLink = createElement("a"); + var tempLink = createElement(_parameter_Document.body, "a"); tempLink.style.display = "none"; tempLink.setAttribute("target", "_blank"); tempLink.setAttribute("href", "data:text/csv;charset=utf-8," + encodeURIComponent(csvContents)); tempLink.setAttribute("download", getCsvFilename(bindingOptions)); - _parameter_Document.body.appendChild(tempLink); tempLink.click(); _parameter_Document.body.removeChild(tempLink); } @@ -425,6 +383,7 @@ options.mapTogglesEnabled = getDefaultBoolean(options.mapTogglesEnabled, true); options.placeMonthNamesOnTheBottom = getDefaultBoolean(options.placeMonthNamesOnTheBottom, false); options.exportOnlyYearBeingViewed = getDefaultBoolean(options.exportOnlyYearBeingViewed, true); + options.year = getDefaultNumber(options.year, (new Date()).getFullYear()); if (isInvalidOptionArray(options.monthsToShow)) { options.monthsToShow = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; } @@ -514,7 +473,7 @@ function isDefinedArray(object) { return isDefinedObject(object) && object instanceof Array; } - function createElement(type, className) { + function createElement(container, type, className) { var result = null; var nodeType = type.toLowerCase(); var isText = nodeType === "text"; @@ -525,8 +484,14 @@ if (isDefined(className)) { result.className = className; } + container.appendChild(result); return result; } + function createElementWithHTML(container, type, className, html) { + var element = createElement(container, type, className); + element.innerHTML = html; + return element; + } function getStyleValueByName(element, stylePropertyName, toNumber) { var value = null; toNumber = isDefined(toNumber) ? toNumber : false; @@ -536,7 +501,7 @@ value = element.currentStyle[stylePropertyName]; } if (toNumber) { - value = parseInt(value, 10); + value = parseFloat(value, 10); } return value; } @@ -557,6 +522,9 @@ function getDefaultArray(value, defaultValue) { return isDefinedArray(value) ? value : defaultValue; } + function getDefaultNumber(value, defaultValue) { + return isDefinedNumber(value) ? value : defaultValue; + } function getDefaultStringOrArray(value, defaultValue) { if (isDefinedString(value)) { value = value.split(_string.space); @@ -763,7 +731,7 @@ return this; }; this.getVersion = function() { - return "1.1.0"; + return "1.2.0"; }; (function(documentObject, windowObject) { _parameter_Document = documentObject; diff --git a/dist/heat.js.css b/dist/heat.js.css index d80a21eb..cab003ce 100644 --- a/dist/heat.js.css +++ b/dist/heat.js.css @@ -1,5 +1,5 @@ /* - * Heat.js Library v1.1.0 + * Heat.js Library v1.2.0 * * Copyright 2024 Bunoon * Released under the MIT License @@ -11,12 +11,22 @@ --heat-js-container-background-color: #22272e; --heat-js-container-border-color: #454c56; --heat-js-day-background-color: #2d333b; - --heat-js-day-border-color: #454c56; - --heat-js-day-background-color-hover: #454c56; + --heat-js-day-border-color: var(--heat-js-container-border-color); + --heat-js-day-background-color-hover: var(--heat-js-container-border-color); --heat-js-day-spacing: 6.3px; - --heat-js-button-background-color: #2d333b; - --heat-js-button-border-color: #454c56; - --heat-js-button-background-color-hover: #454c56; + --heat-js-day-opacity-hover: 0.7; + --heat-js-day-color-1-background-color: rgba( 57, 211, 83, 0.25 ); + --heat-js-day-color-1-border-color: rgba( 57, 211, 83, 0.15 ); + --heat-js-day-color-2-background-color: rgba( 57, 211, 83, 0.50 ); + --heat-js-day-color-2-border-color: rgba( 57, 211, 83, 0.25 ); + --heat-js-day-color-3-background-color: rgba( 57, 211, 83, 0.75 ); + --heat-js-day-color-3-border-color: rgba( 57, 211, 83, 0.50 ); + --heat-js-day-color-4-background-color: rgba( 57, 211, 83, 1 ); + --heat-js-day-color-4-border-color: rgba( 57, 211, 83, 0.75 ); + --heat-js-button-background-color: var(--heat-js-day-background-color); + --heat-js-button-border-color: var(--heat-js-container-border-color); + --heat-js-button-background-color-hover: var(--heat-js-container-border-color); + --heat-js-button-background-color-active: #616b79; --heat-js-border-radius: 0.5rem; --heat-js-border-radius-day: 0.25rem; --heat-js-border-size: 0.5px; @@ -52,6 +62,7 @@ div.heat-js { font-size: var(--heat-js-spacing-font-size); width: 100%; max-width: 700px; + margin: 0 !important; } div.heat-js * { box-sizing: border-box; @@ -69,7 +80,7 @@ div.heat-js *::before, div.heat-js *::after { */ div.heat-js div.title-bar { text-align: right; - margin-bottom: var(--heat-js-spacing); + margin-bottom: calc(var(--heat-js-spacing) + var(--heat-js-spacing) / 2); } div.heat-js div.title-bar div.title { float: left; @@ -86,11 +97,14 @@ div.heat-js div.title-bar button { padding-left: 9px; padding-right: 9px; outline: none; + transition: var(--heat-js-transition); +} +div.heat-js div.title-bar button:active { + background: var(--heat-js-button-background-color-active) !important; } div.heat-js div.title-bar button:hover { cursor: pointer; background: var(--heat-js-button-background-color-hover); - transition: var(--heat-js-transition); } div.heat-js div.title-bar button.active { cursor: default; @@ -141,8 +155,8 @@ div.heat-js div.map-contents div.map div.months div.month { flex: 1; pointer-events: none; } -div.heat-js div.map-contents div.map div.months div.month:last-child { - margin-right: 0; +div.heat-js div.map-contents div.map div.months div.month:last-child div.day-columns div.day-column:last-child div.day { + margin-right: 0 !important; } div.heat-js div.map-contents div.map div.months div.month div.month-name, div.heat-js div.map-contents div.map div.months div.month div.month-name-bottom { @@ -174,11 +188,11 @@ div.heat-js div.map-contents div.map div.months div.month div.day-columns div.da pointer-events: all !important; background-color: var(--heat-js-day-background-color); border: var(--heat-js-border-size) solid var(--heat-js-day-border-color); + transition: var(--heat-js-transition); } div.heat-js div.map-contents div.map div.months div.month div.day-columns div.day-column div.day:hover { cursor: pointer; background: var(--heat-js-day-background-color-hover); - transition: var(--heat-js-transition); } /* @@ -207,11 +221,14 @@ div.heat-js div.guide div.map-types button { padding-left: 9px; padding-right: 9px; outline: none; + transition: var(--heat-js-transition); +} +div.heat-js div.guide div.map-types button:active { + background: var(--heat-js-button-background-color-active) !important; } div.heat-js div.guide div.map-types button:hover { cursor: pointer; background: var(--heat-js-button-background-color-hover); - transition: var(--heat-js-transition); } div.heat-js div.guide div.map-types button.active { cursor: default; @@ -220,7 +237,7 @@ div.heat-js div.guide div.map-types button.active { } div.heat-js div.guide div.map-types button { margin-left: 0 !important; - margin-right: var(--heat-js-spacing) !important; + margin-right: calc(var(--heat-js-spacing) / 2) !important; } div.heat-js div.guide div.map-toggles { text-align: right; @@ -235,12 +252,17 @@ div.heat-js div.guide div.map-toggles div.less-text, div.heat-js div.guide div.map-toggles div.more-text { display: inline-block; font-weight: 300; + transition: var(--heat-js-transition); } div.heat-js div.guide div.map-toggles div.less-text:hover, div.heat-js div.guide div.map-toggles div.more-text:hover { cursor: pointer; text-decoration: underline; } +div.heat-js div.guide div.map-toggles div.less-text:active, +div.heat-js div.guide div.map-toggles div.more-text:active { + color: var(--heat-js-color-gray); +} div.heat-js div.guide div.map-toggles div.less-text { margin-right: var(--heat-js-spacing); } @@ -261,6 +283,7 @@ div.heat-js div.guide div.map-toggles div.days div.day { height: var(--heat-js-spacing-font-size); margin-right: var(--heat-js-day-spacing); cursor: pointer; + transition: var(--heat-js-transition); } div.heat-js div.guide div.map-toggles div.days div.day:last-child { margin-right: 0; @@ -272,30 +295,30 @@ div.heat-js div.guide div.map-toggles div.days div.day:last-child { ------------------------------------------------------------------------- */ div.heat-js div.day-color-1 { - background-color: rgba(57, 211, 83, 0.25) !important; - border: var(--heat-js-border-size-day) solid rgba(57, 211, 83, 0.15) !important; + background-color: var(--heat-js-day-color-1-background-color) !important; + border: var(--heat-js-border-size-day) solid var(--heat-js-day-color-1-border-color) !important; } div.heat-js div.day-color-1:hover { - opacity: 0.7; + opacity: var(--heat-js-day-opacity-hover); } div.heat-js div.day-color-2 { - background-color: rgba(57, 211, 83, 0.5) !important; - border: var(--heat-js-border-size-day) solid rgba(57, 211, 83, 0.25) !important; + background-color: var(--heat-js-day-color-2-background-color) !important; + border: var(--heat-js-border-size-day) solid var(--heat-js-day-color-2-border-color) !important; } div.heat-js div.day-color-2:hover { - opacity: 0.7; + opacity: var(--heat-js-day-opacity-hover); } div.heat-js div.day-color-3 { - background-color: rgba(57, 211, 83, 0.75) !important; - border: var(--heat-js-border-size-day) solid rgba(57, 211, 83, 0.5) !important; + background-color: var(--heat-js-day-color-3-background-color) !important; + border: var(--heat-js-border-size-day) solid var(--heat-js-day-color-3-border-color) !important; } div.heat-js div.day-color-3:hover { - opacity: 0.7; + opacity: var(--heat-js-day-opacity-hover); } div.heat-js div.day-color-4 { - background-color: rgb(57, 211, 83) !important; - border: var(--heat-js-border-size-day) solid rgba(57, 211, 83, 0.75) !important; + background-color: var(--heat-js-day-color-4-background-color) !important; + border: var(--heat-js-border-size-day) solid var(--heat-js-day-color-4-border-color) !important; } div.heat-js div.day-color-4:hover { - opacity: 0.7; + opacity: var(--heat-js-day-opacity-hover); }/*# sourceMappingURL=heat.js.css.map */ \ No newline at end of file diff --git a/dist/heat.js.css.map b/dist/heat.js.css.map index 361afbec..3ffc3e84 100644 --- a/dist/heat.js.css.map +++ b/dist/heat.js.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../src/heat.js.scss","../src/foundation/_styles.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUA;EAEI;EACA;EACA;EAGA;EACA;EAGA;EACA;EACA;EACA;EAGA;EACA;EACA;EAGA;EACA;EACA;EACA;EAGA;EACA;EAGA;;;AAIJ;AAAA;AAAA;AAAA;AAAA;AAgCA;AAAA;AAAA;AAAA;AAAA;AAMA;ECjFI;EACA;EACA;EACA;EACA;EACA;ED8EA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEA;EAEI;EACA;;;AAMZ;AAAA;AAAA;AAAA;AAAA;AAOI;EACI;EACA;;AAEA;EACI;EACA;EACA;;AAtER;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAIR;EACI;EACA;EACA;;AAsDA;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;;AAMZ;AAAA;AAAA;AAAA;AAAA;AAOI;EACI;;AAEA;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAIR;EACI;EACA;EACA;;AAEA;EACI;EACA;;AAEA;EACI;;AAGJ;AAAA;EAEI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;;AAGI;AAAA;EAEI;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACI;;AAIR;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;;;AAYpC;AAAA;AAAA;AAAA;AAAA;AAOI;EACI;EACA;;AAEA;AAAA;EAEI;;AAGJ;EACI;;AAxMR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAIR;EACI;EACA;EACA;;AAuLI;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;AAAA;EAEI;EACA;;AAEA;AAAA;EACI;EACA;;AAIR;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;;AASxB;AAAA;AAAA;AAAA;AAAA;AAOI;EACI;EACA;;AAEA;EACI;;AAIR;EACI;EACA;;AAEA;EACI;;AAIR;EACI;EACA;;AAEA;EACI;;AAIR;EACI;EACA;;AAEA;EACI","file":"heat.js.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../src/heat.js.scss","../src/foundation/_styles.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUA;EAEI;EACA;EACA;EAGA;EACA;EAGA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EAGA;EACA;EAGA;;;AAIJ;AAAA;AAAA;AAAA;AAAA;AAoCA;AAAA;AAAA;AAAA;AAAA;AAMA;ECjGI;EACA;EACA;EACA;EACA;EACA;ED8FA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEA;EAEI;EACA;;;AAMZ;AAAA;AAAA;AAAA;AAAA;AAOI;EACI;EACA;;AAEA;EACI;EACA;EACA;;AA3ER;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;EACA;;AAuDA;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;;AAMZ;AAAA;AAAA;AAAA;AAAA;AAOI;EACI;;AAEA;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAIR;EACI;EACA;EACA;;AAEA;EACI;EACA;;AAMgB;EACI;;AAOpB;AAAA;EAEI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;;AAGI;AAAA;EAEI;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACI;;AAIR;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;;;AAYpC;AAAA;AAAA;AAAA;AAAA;AAOI;EACI;EACA;;AAEA;AAAA;EAEI;;AAGJ;EACI;;AArNR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;EACA;;AAgMI;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;AAAA;EAEI;EACA;EACA;;AAEA;AAAA;EACI;EACA;;AAGJ;AAAA;EACI;;AAIR;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;;AASxB;AAAA;AAAA;AAAA;AAAA;AAOI;EACI;EACA;;AAEA;EACI;;AAIR;EACI;EACA;;AAEA;EACI;;AAIR;EACI;EACA;;AAEA;EACI;;AAIR;EACI;EACA;;AAEA;EACI","file":"heat.js.css"} \ No newline at end of file diff --git a/dist/heat.js.min.css b/dist/heat.js.min.css index 73778f8c..b98a15e3 100644 --- a/dist/heat.js.min.css +++ b/dist/heat.js.min.css @@ -1,2 +1,2 @@ -/*! Heat.js v1.1.0 | (c) Bunoon 2024 | MIT License */ -:root{--heat-js-color-black:#3b3a3a;--heat-js-color-white:#F5F5F5;--heat-js-color-gray:#AAA;--heat-js-container-background-color:#22272e;--heat-js-container-border-color:#454c56;--heat-js-day-background-color:#2d333b;--heat-js-day-border-color:#454c56;--heat-js-day-background-color-hover:#454c56;--heat-js-day-spacing:6.3px;--heat-js-button-background-color:#2d333b;--heat-js-button-border-color:#454c56;--heat-js-button-background-color-hover:#454c56;--heat-js-border-radius:.5rem;--heat-js-border-radius-day:.25rem;--heat-js-border-size:.5px;--heat-js-border-size-day:1px;--heat-js-spacing:10px;--heat-js-spacing-font-size:.85rem;--heat-js-transition:all .3s}div.heat-js{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;cursor:default;display:inline-block;border-radius:var(--heat-js-border-radius);background-color:var(--heat-js-container-background-color);color:var(--heat-js-color-white);border:var(--heat-js-border-size) solid var(--heat-js-container-border-color);padding:var(--heat-js-spacing);font-size:var(--heat-js-spacing-font-size);width:100%;max-width:700px}div.heat-js *{box-sizing:border-box;line-height:normal}div.heat-js *::before,div.heat-js *::after{box-sizing:border-box;line-height:normal}div.heat-js div.title-bar{text-align:right;margin-bottom:var(--heat-js-spacing)}div.heat-js div.title-bar div.title{float:left;font-weight:800;font-size:1.2rem}div.heat-js div.title-bar button{background-color:var(--heat-js-button-background-color);border:var(--heat-js-border-size) solid var(--heat-js-button-border-color);color:var(--heat-js-color-white);border-radius:var(--heat-js-border-radius);padding-top:5px;padding-bottom:5px;padding-left:9px;padding-right:9px;outline:none}div.heat-js div.title-bar button:hover{cursor:pointer;background:var(--heat-js-button-background-color-hover);transition:var(--heat-js-transition)}div.heat-js div.title-bar button.active{cursor:default;background:var(--heat-js-button-background-color-hover);transition:var(--heat-js-transition)}div.heat-js div.title-bar button.back{margin-left:calc(var(--heat-js-spacing) * 2)!important}div.heat-js div.title-bar button.export{margin-right:calc(var(--heat-js-spacing) / 2)!important}div.heat-js div.title-bar div.year-text{margin-left:var(--heat-js-spacing);margin-right:var(--heat-js-spacing);display:inline-block}div.heat-js div.map-contents{overflow-y:scroll}div.heat-js div.map-contents div.map{display:inline-flex;flex-direction:row}div.heat-js div.map-contents div.map div.days{background-color:var(--heat-js-container-background-color);padding-right:calc(var(--heat-js-spacing) * 3);padding-top:calc(var(--heat-js-spacing-font-size) + var(--heat-js-spacing) + 1px);position:sticky;left:0}div.heat-js div.map-contents div.map div.days div.day-name{font-weight:300;margin-bottom:4px}div.heat-js div.map-contents div.map div.months{display:flex;justify-content:space-between;flex-grow:1}div.heat-js div.map-contents div.map div.months div.month{flex:1;pointer-events:none}div.heat-js div.map-contents div.map div.months div.month:last-child{margin-right:0}div.heat-js div.map-contents div.map div.months div.month div.month-name,div.heat-js div.map-contents div.map div.months div.month div.month-name-bottom{font-weight:300}div.heat-js div.map-contents div.map div.months div.month div.month-name{margin-bottom:var(--heat-js-spacing)}div.heat-js div.map-contents div.map div.months div.month div.month-name-bottom{margin-top:var(--heat-js-spacing)}div.heat-js div.map-contents div.map div.months div.month div.day-columns{display:flex;justify-content:space-between}div.heat-js div.map-contents div.map div.months div.month div.day-columns div.day-column div.day,div.heat-js div.map-contents div.map div.months div.month div.day-columns div.day-column div.day-disabled{border-radius:var(--heat-js-border-radius-day);width:var(--heat-js-spacing-font-size);height:var(--heat-js-spacing-font-size);margin-right:var(--heat-js-day-spacing);margin-bottom:var(--heat-js-day-spacing)}div.heat-js div.map-contents div.map div.months div.month div.day-columns div.day-column div.day:last-child,div.heat-js div.map-contents div.map div.months div.month div.day-columns div.day-column div.day-disabled:last-child{margin-bottom:0}div.heat-js div.map-contents div.map div.months div.month div.day-columns div.day-column div.day{pointer-events:all!important;background-color:var(--heat-js-day-background-color);border:var(--heat-js-border-size) solid var(--heat-js-day-border-color)}div.heat-js div.map-contents div.map div.months div.month div.day-columns div.day-column div.day:hover{cursor:pointer;background:var(--heat-js-day-background-color-hover);transition:var(--heat-js-transition)}div.heat-js div.guide{margin-top:calc(var(--heat-js-spacing) + var(--heat-js-spacing) / 2);display:flex}div.heat-js div.guide div.map-types,div.heat-js div.guide div.map-toggles{flex-basis:100%}div.heat-js div.guide div.map-types{text-align:left}div.heat-js div.guide div.map-types button{background-color:var(--heat-js-button-background-color);border:var(--heat-js-border-size) solid var(--heat-js-button-border-color);color:var(--heat-js-color-white);border-radius:var(--heat-js-border-radius);padding-top:5px;padding-bottom:5px;padding-left:9px;padding-right:9px;outline:none}div.heat-js div.guide div.map-types button:hover{cursor:pointer;background:var(--heat-js-button-background-color-hover);transition:var(--heat-js-transition)}div.heat-js div.guide div.map-types button.active{cursor:default;background:var(--heat-js-button-background-color-hover);transition:var(--heat-js-transition)}div.heat-js div.guide div.map-types button{margin-left:0!important;margin-right:var(--heat-js-spacing)!important}div.heat-js div.guide div.map-toggles{text-align:right;display:flex;align-items:center;justify-content:right}div.heat-js div.guide div.map-toggles div.no-click{pointer-events:none}div.heat-js div.guide div.map-toggles div.less-text,div.heat-js div.guide div.map-toggles div.more-text{display:inline-block;font-weight:300}div.heat-js div.guide div.map-toggles div.less-text:hover,div.heat-js div.guide div.map-toggles div.more-text:hover{cursor:pointer;text-decoration:underline}div.heat-js div.guide div.map-toggles div.less-text{margin-right:var(--heat-js-spacing)}div.heat-js div.guide div.map-toggles div.more-text{margin-left:var(--heat-js-spacing)}div.heat-js div.guide div.map-toggles div.days{display:inline-flex;align-items:center;justify-content:right}div.heat-js div.guide div.map-toggles div.days div.day{background-color:var(--heat-js-day-background-color);border:var(--heat-js-border-size) solid var(--heat-js-day-border-color);display:inline-block;border-radius:var(--heat-js-border-radius-day);width:var(--heat-js-spacing-font-size);height:var(--heat-js-spacing-font-size);margin-right:var(--heat-js-day-spacing);cursor:pointer}div.heat-js div.guide div.map-toggles div.days div.day:last-child{margin-right:0}div.heat-js div.day-color-1{background-color:rgba(57,211,83,.25)!important;border:var(--heat-js-border-size-day) solid rgba(57,211,83,.15)!important}div.heat-js div.day-color-1:hover{opacity:.7}div.heat-js div.day-color-2{background-color:rgba(57,211,83,.5)!important;border:var(--heat-js-border-size-day) solid rgba(57,211,83,.25)!important}div.heat-js div.day-color-2:hover{opacity:.7}div.heat-js div.day-color-3{background-color:rgba(57,211,83,.75)!important;border:var(--heat-js-border-size-day) solid rgba(57,211,83,.5)!important}div.heat-js div.day-color-3:hover{opacity:.7}div.heat-js div.day-color-4{background-color:rgb(57,211,83)!important;border:var(--heat-js-border-size-day) solid rgba(57,211,83,.75)!important}div.heat-js div.day-color-4:hover{opacity:.7} \ No newline at end of file +/*! Heat.js v1.2.0 | (c) Bunoon 2024 | MIT License */ +:root{--heat-js-color-black:#3b3a3a;--heat-js-color-white:#F5F5F5;--heat-js-color-gray:#AAA;--heat-js-container-background-color:#22272e;--heat-js-container-border-color:#454c56;--heat-js-day-background-color:#2d333b;--heat-js-day-border-color:var(--heat-js-container-border-color);--heat-js-day-background-color-hover:var(--heat-js-container-border-color);--heat-js-day-spacing:6.3px;--heat-js-day-opacity-hover:.7;--heat-js-day-color-1-background-color:rgba(57,211,83,.25);--heat-js-day-color-1-border-color:rgba(57,211,83,.15);--heat-js-day-color-2-background-color:rgba(57,211,83,.5);--heat-js-day-color-2-border-color:rgba(57,211,83,.25);--heat-js-day-color-3-background-color:rgba(57,211,83,.75);--heat-js-day-color-3-border-color:rgba(57,211,83,.5);--heat-js-day-color-4-background-color:rgba(57,211,83,1);--heat-js-day-color-4-border-color:rgba(57,211,83,.75);--heat-js-button-background-color:var(--heat-js-day-background-color);--heat-js-button-border-color:var(--heat-js-container-border-color);--heat-js-button-background-color-hover:var(--heat-js-container-border-color);--heat-js-button-background-color-active:#616b79;--heat-js-border-radius:.5rem;--heat-js-border-radius-day:.25rem;--heat-js-border-size:.5px;--heat-js-border-size-day:1px;--heat-js-spacing:10px;--heat-js-spacing-font-size:.85rem;--heat-js-transition:all .3s}div.heat-js{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;cursor:default;display:inline-block;border-radius:var(--heat-js-border-radius);background-color:var(--heat-js-container-background-color);color:var(--heat-js-color-white);border:var(--heat-js-border-size) solid var(--heat-js-container-border-color);padding:var(--heat-js-spacing);font-size:var(--heat-js-spacing-font-size);width:100%;max-width:700px;margin:0!important}div.heat-js *{box-sizing:border-box;line-height:normal}div.heat-js *::before,div.heat-js *::after{box-sizing:border-box;line-height:normal}div.heat-js div.title-bar{text-align:right;margin-bottom:calc(var(--heat-js-spacing) + var(--heat-js-spacing) / 2)}div.heat-js div.title-bar div.title{float:left;font-weight:800;font-size:1.2rem}div.heat-js div.title-bar button{background-color:var(--heat-js-button-background-color);border:var(--heat-js-border-size) solid var(--heat-js-button-border-color);color:var(--heat-js-color-white);border-radius:var(--heat-js-border-radius);padding-top:5px;padding-bottom:5px;padding-left:9px;padding-right:9px;outline:none;transition:var(--heat-js-transition)}div.heat-js div.title-bar button:active{background:var(--heat-js-button-background-color-active)!important}div.heat-js div.title-bar button:hover{cursor:pointer;background:var(--heat-js-button-background-color-hover)}div.heat-js div.title-bar button.active{cursor:default;background:var(--heat-js-button-background-color-hover);transition:var(--heat-js-transition)}div.heat-js div.title-bar button.back{margin-left:calc(var(--heat-js-spacing) * 2)!important}div.heat-js div.title-bar button.export{margin-right:calc(var(--heat-js-spacing) / 2)!important}div.heat-js div.title-bar div.year-text{margin-left:var(--heat-js-spacing);margin-right:var(--heat-js-spacing);display:inline-block}div.heat-js div.map-contents{overflow-y:scroll}div.heat-js div.map-contents div.map{display:inline-flex;flex-direction:row}div.heat-js div.map-contents div.map div.days{background-color:var(--heat-js-container-background-color);padding-right:calc(var(--heat-js-spacing) * 3);padding-top:calc(var(--heat-js-spacing-font-size) + var(--heat-js-spacing) + 1px);position:sticky;left:0}div.heat-js div.map-contents div.map div.days div.day-name{font-weight:300;margin-bottom:4px}div.heat-js div.map-contents div.map div.months{display:flex;justify-content:space-between;flex-grow:1}div.heat-js div.map-contents div.map div.months div.month{flex:1;pointer-events:none}div.heat-js div.map-contents div.map div.months div.month:last-child div.day-columns div.day-column:last-child div.day{margin-right:0!important}div.heat-js div.map-contents div.map div.months div.month div.month-name,div.heat-js div.map-contents div.map div.months div.month div.month-name-bottom{font-weight:300}div.heat-js div.map-contents div.map div.months div.month div.month-name{margin-bottom:var(--heat-js-spacing)}div.heat-js div.map-contents div.map div.months div.month div.month-name-bottom{margin-top:var(--heat-js-spacing)}div.heat-js div.map-contents div.map div.months div.month div.day-columns{display:flex;justify-content:space-between}div.heat-js div.map-contents div.map div.months div.month div.day-columns div.day-column div.day,div.heat-js div.map-contents div.map div.months div.month div.day-columns div.day-column div.day-disabled{border-radius:var(--heat-js-border-radius-day);width:var(--heat-js-spacing-font-size);height:var(--heat-js-spacing-font-size);margin-right:var(--heat-js-day-spacing);margin-bottom:var(--heat-js-day-spacing)}div.heat-js div.map-contents div.map div.months div.month div.day-columns div.day-column div.day:last-child,div.heat-js div.map-contents div.map div.months div.month div.day-columns div.day-column div.day-disabled:last-child{margin-bottom:0}div.heat-js div.map-contents div.map div.months div.month div.day-columns div.day-column div.day{pointer-events:all!important;background-color:var(--heat-js-day-background-color);border:var(--heat-js-border-size) solid var(--heat-js-day-border-color);transition:var(--heat-js-transition)}div.heat-js div.map-contents div.map div.months div.month div.day-columns div.day-column div.day:hover{cursor:pointer;background:var(--heat-js-day-background-color-hover)}div.heat-js div.guide{margin-top:calc(var(--heat-js-spacing) + var(--heat-js-spacing) / 2);display:flex}div.heat-js div.guide div.map-types,div.heat-js div.guide div.map-toggles{flex-basis:100%}div.heat-js div.guide div.map-types{text-align:left}div.heat-js div.guide div.map-types button{background-color:var(--heat-js-button-background-color);border:var(--heat-js-border-size) solid var(--heat-js-button-border-color);color:var(--heat-js-color-white);border-radius:var(--heat-js-border-radius);padding-top:5px;padding-bottom:5px;padding-left:9px;padding-right:9px;outline:none;transition:var(--heat-js-transition)}div.heat-js div.guide div.map-types button:active{background:var(--heat-js-button-background-color-active)!important}div.heat-js div.guide div.map-types button:hover{cursor:pointer;background:var(--heat-js-button-background-color-hover)}div.heat-js div.guide div.map-types button.active{cursor:default;background:var(--heat-js-button-background-color-hover);transition:var(--heat-js-transition)}div.heat-js div.guide div.map-types button{margin-left:0!important;margin-right:calc(var(--heat-js-spacing) / 2)!important}div.heat-js div.guide div.map-toggles{text-align:right;display:flex;align-items:center;justify-content:right}div.heat-js div.guide div.map-toggles div.no-click{pointer-events:none}div.heat-js div.guide div.map-toggles div.less-text,div.heat-js div.guide div.map-toggles div.more-text{display:inline-block;font-weight:300;transition:var(--heat-js-transition)}div.heat-js div.guide div.map-toggles div.less-text:hover,div.heat-js div.guide div.map-toggles div.more-text:hover{cursor:pointer;text-decoration:underline}div.heat-js div.guide div.map-toggles div.less-text:active,div.heat-js div.guide div.map-toggles div.more-text:active{color:var(--heat-js-color-gray)}div.heat-js div.guide div.map-toggles div.less-text{margin-right:var(--heat-js-spacing)}div.heat-js div.guide div.map-toggles div.more-text{margin-left:var(--heat-js-spacing)}div.heat-js div.guide div.map-toggles div.days{display:inline-flex;align-items:center;justify-content:right}div.heat-js div.guide div.map-toggles div.days div.day{background-color:var(--heat-js-day-background-color);border:var(--heat-js-border-size) solid var(--heat-js-day-border-color);display:inline-block;border-radius:var(--heat-js-border-radius-day);width:var(--heat-js-spacing-font-size);height:var(--heat-js-spacing-font-size);margin-right:var(--heat-js-day-spacing);cursor:pointer;transition:var(--heat-js-transition)}div.heat-js div.guide div.map-toggles div.days div.day:last-child{margin-right:0}div.heat-js div.day-color-1{background-color:var(--heat-js-day-color-1-background-color)!important;border:var(--heat-js-border-size-day) solid var(--heat-js-day-color-1-border-color)!important}div.heat-js div.day-color-1:hover{opacity:var(--heat-js-day-opacity-hover)}div.heat-js div.day-color-2{background-color:var(--heat-js-day-color-2-background-color)!important;border:var(--heat-js-border-size-day) solid var(--heat-js-day-color-2-border-color)!important}div.heat-js div.day-color-2:hover{opacity:var(--heat-js-day-opacity-hover)}div.heat-js div.day-color-3{background-color:var(--heat-js-day-color-3-background-color)!important;border:var(--heat-js-border-size-day) solid var(--heat-js-day-color-3-border-color)!important}div.heat-js div.day-color-3:hover{opacity:var(--heat-js-day-opacity-hover)}div.heat-js div.day-color-4{background-color:var(--heat-js-day-color-4-background-color)!important;border:var(--heat-js-border-size-day) solid var(--heat-js-day-color-4-border-color)!important}div.heat-js div.day-color-4:hover{opacity:var(--heat-js-day-opacity-hover)} \ No newline at end of file diff --git a/dist/heat.min.js b/dist/heat.min.js index 56b8f208..215d5b22 100644 --- a/dist/heat.min.js +++ b/dist/heat.min.js @@ -1,27 +1,26 @@ -/*! Heat.js v1.1.0 | (c) Bunoon 2024 | MIT License */ -(function(){function t(a){a.element.className="heat-js";a.element.innerHTML=q.empty;X(a);Y(a)}function X(a){N(a.currentView.year)||(a.currentView.year=(new Date).getFullYear());if(a.showTitle||a.showYearSelector||a.showRefreshButton||a.showExportButton){var c=n("div","title-bar");a.element.appendChild(c);if(a.showTitle){var b=n("div","title");b.innerHTML=a.titleText;c.appendChild(b)}a.showExportButton&&(b=n("button","export"),b.innerHTML=f.exportButtonText,c.appendChild(b),b.onclick=function(){var e= -k[a.element.id].type[a.currentView.type];var g=[];var h=[];g.push([D(f.dateText),D(f.countText)].join());for(var l in e)e.hasOwnProperty(l)&&h.push(l);h.sort();if(a.exportOnlyYearBeingViewed)for(h=0;12>h;h++){l=(new Date(a.currentView.year,h+1,0)).getDate();for(var p=0;ph;h++)if(-1h;h++)if(-1=p)F=!0;else{var ca=n("div","day-disabled");d.appendChild(ca)}F&&(-1=l.minimum)e=l;else break;w(e)&&R(a,e.id)&&(b.className+=q.space+e.cssClassName);w(G)||(h=S(b,"margin-left",!0),c=S(b,"margin-right",!0),G=b.offsetWidth+h+c)}function Z(a){var c=n("div","guide");a.element.appendChild(c);var b=n("div","map-types"); -c.appendChild(b);var e=0;for(h in k[a.element.id].type.None)if(k[a.element.id].type.None.hasOwnProperty(h)){e++;break}if(1a.getDay()-1?6:a.getDay()-1}function ea(a,c){var b=a,e=Q(c);b=b.replace("{dddd}",f.dayNames[e]);b=b.replace("{dd}",z(c.getDate()));b=b.replace("{d}",c.getDate()); -e=b.replace;var g=c.getDate(),h=f.thText;if(31===g||21===g||1===g)h=f.stText;else if(22===g||2===g)h=f.ndText;else if(23===g||3===g)h=f.rdText;b=e.call(b,"{o}",h);b=b.replace("{mmmm}",f.monthNames[c.getMonth()]);b=b.replace("{mm}",z(c.getMonth()+1));b=b.replace("{m}",c.getMonth()+1);b=b.replace("{yyyy}",c.getFullYear());b=b.replace("{yyy}",c.getFullYear().toString().substring(1));b=b.replace("{yy}",c.getFullYear().toString().substring(2));return b=b.replace("{y}",parseInt(c.getFullYear().toString().substring(2)).toString())} -function w(a){return null!==a&&void 0!==a&&a!==q.empty}function J(a){return w(a)&&"object"===typeof a}function K(a){return w(a)&&"boolean"===typeof a}function B(a){return w(a)&&"string"===typeof a}function I(a){return w(a)&&"function"===typeof a}function N(a){return w(a)&&"number"===typeof a}function O(a){return J(a)&&a instanceof Array}function n(a,c){var b=a.toLowerCase();var e="text"===b;P.hasOwnProperty(b)||(P[b]=e?A.createTextNode(q.empty):A.createElement(b));b=P[b].cloneNode(!1);w(c)&&(b.className= -c);return b}function S(a,c,b){var e=null;b=w(b)?b:!1;L.getComputedStyle?e=A.defaultView.getComputedStyle(a,null).getPropertyValue(c):a.currentStyle&&(e=a.currentStyle[c]);b&&(e=parseInt(e,10));return e}function u(a){I(a)&&a.apply(null,[].slice.call(arguments,1))}function r(a,c){return B(a)?a:c}function x(a,c){return K(a)?a:c}function y(a,c){return I(a)?a:c}function ia(a){var c=!0,b=null;try{B(a)&&(b=JSON.parse(a))}catch(e){try{b=eval("("+a+")"),I(b)&&(b=b())}catch(g){f.safeMode||(console.error("Errors in object: "+ -e.message+", "+g.message),c=!1),b=null}}return{parsed:c,result:b}}function V(){for(var a=[],c=0;32>c;c++){8!==c&&12!==c&&16!==c&&20!==c||a.push("-");var b=Math.floor(16*Math.random()).toString(16);a.push(b)}return a.join(q.empty)}function z(a){a=a.toString();return 1===a.length?"0"+a:a}function H(a){return a.getFullYear()+"-"+z(a.getMonth()+1)+"-"+z(a.getDate())}function W(){f.safeMode=x(f.safeMode,!0);var a=f,c=f.domElementTypes,b=["*"];B(c)?(c=c.split(q.space),0===c.length&&(c=b)):c=O(c)?c:b;a.domElementTypes= -c;f.stText=r(f.stText,"st");f.ndText=r(f.ndText,"nd");f.rdText=r(f.rdText,"rd");f.thText=r(f.thText,"th");f.backButtonText=r(f.backButtonText,"Back");f.nextButtonText=r(f.nextButtonText,"Next");f.refreshButtonText=r(f.refreshButtonText,"Refresh");f.exportButtonText=r(f.exportButtonText,"Export");f.lessText=r(f.lessText,"Less");f.moreText=r(f.moreText,"More");f.dateText=r(f.dateText,"Date");f.countText=r(f.countText,"Count");M(f.monthNames,12)&&(f.monthNames="Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec".split(" ")); -M(f.dayNames,7)&&(f.dayNames="Mon Tue Wed Thu Fri Sat Sun".split(" "))}function M(a,c){c=N(c)?c:1;return!O(a)||a.lengthg;g++){h=(new Date(a.currentView.year,g+1,0)).getDate();for(var l=0;lh;h++)-1h;h++)if(-1= +z?d=!0:p(F,"div","day-disabled");if(d){var H=null;-1=r.minimum)g=r;else break}w(g)&&U(a,g.id)&&(b.className+=n.space+g.cssClassName);return b}function ba(a){var b=p(a.element,"div","guide"),c=p(b,"div","map-types"),e=0;for(h in k[a.element.id].type.None)if(k[a.element.id].type.None.hasOwnProperty(h)){e++; +break}if(1a.getDay()-1?6:a.getDay()-1}function ia(a,b){var c=a,e=S(b);c=c.replace("{dddd}",f.dayNames[e]);c=c.replace("{dd}",D(b.getDate()));c=c.replace("{d}",b.getDate());e=c.replace;var g=b.getDate(),h=f.thText;if(31===g||21===g||1===g)h=f.stText;else if(22===g||2===g)h=f.ndText;else if(23===g||3===g)h=f.rdText;c=e.call(c,"{o}",h);c=c.replace("{mmmm}",f.monthNames[b.getMonth()]);c=c.replace("{mm}",D(b.getMonth()+ +1));c=c.replace("{m}",b.getMonth()+1);c=c.replace("{yyyy}",b.getFullYear());c=c.replace("{yyy}",b.getFullYear().toString().substring(1));c=c.replace("{yy}",b.getFullYear().toString().substring(2));return c=c.replace("{y}",parseInt(b.getFullYear().toString().substring(2)).toString())}function w(a){return null!==a&&void 0!==a&&a!==n.empty}function L(a){return w(a)&&"object"===typeof a}function M(a){return w(a)&&"boolean"===typeof a}function E(a){return w(a)&&"string"===typeof a}function K(a){return w(a)&& +"function"===typeof a}function P(a){return w(a)&&"number"===typeof a}function Q(a){return L(a)&&a instanceof Array}function p(a,b,c){b=b.toLowerCase();var e="text"===b;R.hasOwnProperty(b)||(R[b]=e?C.createTextNode(n.empty):C.createElement(b));b=R[b].cloneNode(!1);w(c)&&(b.className=c);a.appendChild(b);return b}function x(a,b,c,e){a=p(a,b,c);a.innerHTML=e;return a}function T(a,b,c){var e=null;c=w(c)?c:!1;N.getComputedStyle?e=C.defaultView.getComputedStyle(a,null).getPropertyValue(b):a.currentStyle&& +(e=a.currentStyle[b]);c&&(e=parseFloat(e,10));return e}function v(a){K(a)&&a.apply(null,[].slice.call(arguments,1))}function t(a,b){return E(a)?a:b}function y(a,b){return M(a)?a:b}function A(a,b){return K(a)?a:b}function la(a){var b=!0,c=null;try{E(a)&&(c=JSON.parse(a))}catch(e){try{c=eval("("+a+")"),K(c)&&(c=c())}catch(g){f.safeMode||(console.error("Errors in object: "+e.message+", "+g.message),b=!1),c=null}}return{parsed:b,result:c}}function X(){for(var a=[],b=0;32>b;b++){8!==b&&12!==b&&16!==b&& +20!==b||a.push("-");var c=Math.floor(16*Math.random()).toString(16);a.push(c)}return a.join(n.empty)}function D(a){a=a.toString();return 1===a.length?"0"+a:a}function J(a){return a.getFullYear()+"-"+D(a.getMonth()+1)+"-"+D(a.getDate())}function Y(){f.safeMode=y(f.safeMode,!0);var a=f,b=f.domElementTypes,c=["*"];E(b)?(b=b.split(n.space),0===b.length&&(b=c)):b=Q(b)?b:c;a.domElementTypes=b;f.stText=t(f.stText,"st");f.ndText=t(f.ndText,"nd");f.rdText=t(f.rdText,"rd");f.thText=t(f.thText,"th");f.backButtonText= +t(f.backButtonText,"Back");f.nextButtonText=t(f.nextButtonText,"Next");f.refreshButtonText=t(f.refreshButtonText,"Refresh");f.exportButtonText=t(f.exportButtonText,"Export");f.lessText=t(f.lessText,"Less");f.moreText=t(f.moreText,"More");f.dateText=t(f.dateText,"Date");f.countText=t(f.countText,"Count");O(f.monthNames,12)&&(f.monthNames="Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec".split(" "));O(f.dayNames,7)&&(f.dayNames="Mon Tue Wed Thu Fri Sat Sun".split(" "))}function O(a,b){b=P(b)?b:1;return!Q(a)|| +a.length + + ## Version 1.1.0: #### **Translations:** diff --git a/docs/binding/OPTIONS.md b/docs/binding/OPTIONS.md index 794a77db..6f4e2573 100644 --- a/docs/binding/OPTIONS.md +++ b/docs/binding/OPTIONS.md @@ -23,6 +23,7 @@ Below is a list of all the options supported in the "data-heat-options" binding | *boolean* | mapTogglesEnabled | States if the heat map toggles are enabled (defaults to true). | | *boolean* | placeMonthNamesOnTheBottom | States if the month names should be placed at the bottom (defaults to false). | | *boolean* | exportOnlyYearBeingViewed | States if only the data for the year being viewed should be exported (defaults to true). | +| *number* | year | States the year that should be shown when the heat map is rendered for the first time (defaults to the current year). |
diff --git a/docs/images/main.png b/docs/images/main.png index 823fb145..4c86fb09 100644 Binary files a/docs/images/main.png and b/docs/images/main.png differ diff --git a/heat.js.nuspec b/heat.js.nuspec index 24e09110..95bef655 100644 --- a/heat.js.nuspec +++ b/heat.js.nuspec @@ -2,7 +2,7 @@ jHeat.js - 1.1.0 + 1.2.0 Heat.js A lightweight JavaScript library that generates customizable heat maps to visualize date-based activity and trends. William Troup diff --git a/package.json b/package.json index 2f499843..2500ba03 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "jheat.js", "title": "Heat.js", "description": "A lightweight JavaScript library that generates customizable heat maps to visualize date-based activity and trends.", - "version": "1.1.0", + "version": "1.2.0", "main": "dist/heat.js", "homepage": "https://www.william-troup.com/heat-js/", "author": { diff --git a/src/heat.js b/src/heat.js index 80da5035..5c787195 100644 --- a/src/heat.js +++ b/src/heat.js @@ -4,7 +4,7 @@ * A lightweight JavaScript library that generates customizable heat maps to visualize date-based activity and trends. * * @file observe.js - * @version v1.1.0 + * @version v1.2.0 * @author Bunoon * @license MIT License * @copyright Bunoon 2024 @@ -75,7 +75,7 @@ bindingOptions.element = element; bindingOptions.currentView = {}; bindingOptions.currentView.colorsVisible = {}; - bindingOptions.currentView.year = null; + bindingOptions.currentView.year = bindingOptions.year; bindingOptions.currentView.type = _elements_DateCounts_DefaultType; fireCustomTrigger( bindingOptions.onBeforeRender, element ); @@ -117,24 +117,15 @@ } function renderControlTitleBar( bindingOptions ) { - if ( !isDefinedNumber( bindingOptions.currentView.year ) ) { - bindingOptions.currentView.year = new Date().getFullYear(); - } - if ( bindingOptions.showTitle || bindingOptions.showYearSelector || bindingOptions.showRefreshButton || bindingOptions.showExportButton ) { - var titleBar = createElement( "div", "title-bar" ); - bindingOptions.element.appendChild( titleBar ); + var titleBar = createElement( bindingOptions.element, "div", "title-bar" ); if ( bindingOptions.showTitle ) { - var title = createElement( "div", "title" ); - title.innerHTML = bindingOptions.titleText; - titleBar.appendChild( title ); + createElementWithHTML( titleBar, "div", "title", bindingOptions.titleText ); } if ( bindingOptions.showExportButton ) { - var exportData = createElement( "button", "export" ); - exportData.innerHTML = _configuration.exportButtonText; - titleBar.appendChild( exportData ); + var exportData = createElementWithHTML( titleBar, "button", "export", _configuration.exportButtonText ); exportData.onclick = function() { exportAllData( bindingOptions ); @@ -143,9 +134,7 @@ } if ( bindingOptions.showRefreshButton ) { - var refresh = createElement( "button", "refresh" ); - refresh.innerHTML = _configuration.refreshButtonText; - titleBar.appendChild( refresh ); + var refresh = createElementWithHTML( titleBar, "button", "refresh", _configuration.refreshButtonText ); refresh.onclick = function() { renderControl( bindingOptions ); @@ -154,9 +143,7 @@ } if ( bindingOptions.showYearSelector ) { - var back = createElement( "button", "back" ); - back.innerHTML = _configuration.backButtonText; - titleBar.appendChild( back ); + var back = createElementWithHTML( titleBar, "button", "back", _configuration.backButtonText ); back.onclick = function() { bindingOptions.currentView.year--; @@ -164,14 +151,10 @@ renderControl( bindingOptions ); fireCustomTrigger( bindingOptions.onBackYear, bindingOptions.currentView.year ); }; + + bindingOptions.currentView.yearText = createElementWithHTML( titleBar, "div", "year-text", bindingOptions.currentView.year ); - bindingOptions.currentView.yearText = createElement( "div", "year-text" ); - bindingOptions.currentView.yearText.innerHTML = bindingOptions.currentView.year; - titleBar.appendChild( bindingOptions.currentView.yearText ); - - var next = createElement( "button", "next" ); - next.innerHTML = _configuration.nextButtonText; - titleBar.appendChild( next ); + var next = createElementWithHTML( titleBar, "button", "next", _configuration.nextButtonText ); next.onclick = function() { bindingOptions.currentView.year++; @@ -184,11 +167,8 @@ } function renderControlMap( bindingOptions ) { - var mapContents = createElement( "div", "map-contents" ); - bindingOptions.element.appendChild( mapContents ); - - var map = createElement( "div", "map" ); - mapContents.appendChild( map ); + var mapContents = createElement( bindingOptions.element, "div", "map-contents" ), + map = createElement( mapContents, "div", "map" ); renderControlViewGuide( bindingOptions ); @@ -196,8 +176,7 @@ monthAdded = false; if ( bindingOptions.showDayNames ) { - var days = createElement( "div", "days" ); - map.appendChild( days ); + var days = createElement( map, "div", "days" ); if ( !bindingOptions.showMonthNames || bindingOptions.placeMonthNamesOnTheBottom ) { days.style.paddingTop = "0px"; @@ -206,15 +185,12 @@ for ( var dayNameIndex = 0; dayNameIndex < 7; dayNameIndex++ ) { if ( bindingOptions.daysToShow.indexOf( dayNameIndex + 1 ) > -1 ) { - var dayName = createElement( "div", "day-name" ); - dayName.innerHTML = _configuration.dayNames[ dayNameIndex ]; - days.appendChild( dayName ); + createElementWithHTML( days, "div", "day-name", _configuration.dayNames[ dayNameIndex ] ); } } } - var months = createElement( "div", "months" ); - map.appendChild( months ); + var months = createElement( map, "div", "months" ); var mapRangeColors = bindingOptions.mapRangeColors.sort( function( a, b ) { return b.range - a.range; @@ -222,24 +198,18 @@ for ( var monthIndex = 0; monthIndex < 12; monthIndex++ ) { if ( bindingOptions.monthsToShow.indexOf( monthIndex + 1 ) > -1 ) { - var month = createElement( "div", "month" ); - months.appendChild( month ); + var month = createElement( months, "div", "month" ); if ( bindingOptions.showMonthNames && !bindingOptions.placeMonthNamesOnTheBottom ) { - var monthNameTop = createElement( "div", "month-name" ); - monthNameTop.innerHTML = _configuration.monthNames[ monthIndex ]; - month.appendChild( monthNameTop ); + createElementWithHTML( month, "div", "month-name", _configuration.monthNames[ monthIndex ] ); } - var dayColumns = createElement( "div", "day-columns" ); - month.appendChild( dayColumns ); + var dayColumns = createElement( month, "div", "day-columns" ); var totalDaysInMonth = getTotalDaysInMonth( currentYear, monthIndex ), - currentDayColumn = createElement( "div", "day-column" ), + currentDayColumn = createElement( dayColumns, "div", "day-column" ), startFillingDays = false; - dayColumns.appendChild( currentDayColumn ); - var firstDayInMonth = new Date( currentYear, monthIndex, 1 ), firstDayNumberInMonth = getWeekdayNumber( firstDayInMonth ), actualDay = 1; @@ -251,19 +221,26 @@ startFillingDays = true; } else { - var day = createElement( "div", "day-disabled" ); - currentDayColumn.appendChild( day ); + createElement( currentDayColumn, "div", "day-disabled" ); } if ( startFillingDays ) { + var day = null; + if ( bindingOptions.daysToShow.indexOf( actualDay ) > -1 ) { - renderControlViewMonthDay( bindingOptions, currentDayColumn, dayIndex - firstDayNumberInMonth, monthIndex, currentYear, mapRangeColors ); + day = renderControlViewMonthDay( bindingOptions, currentDayColumn, dayIndex - firstDayNumberInMonth, monthIndex, currentYear, mapRangeColors ); } if ( ( dayIndex + 1 ) % 7 === 0 ) { - currentDayColumn = createElement( "div", "day-column" ); - dayColumns.appendChild( currentDayColumn ); + currentDayColumn = createElement( dayColumns, "div", "day-column" ); actualDay = 0; + + if ( !isDefined( _elements_Day_Width ) && isDefined( day ) ) { + var marginLeft = getStyleValueByName( day, "margin-left", true ), + marginRight = getStyleValueByName( day, "margin-right", true ); + + _elements_Day_Width = day.offsetWidth + marginLeft + marginRight; + } } } @@ -271,9 +248,7 @@ } if ( bindingOptions.showMonthNames && bindingOptions.placeMonthNamesOnTheBottom ) { - var monthNameBottom = createElement( "div", "month-name-bottom" ); - monthNameBottom.innerHTML = _configuration.monthNames[ monthIndex ]; - month.appendChild( monthNameBottom ); + createElementWithHTML( month, "div", "month-name-bottom", _configuration.monthNames[ monthIndex ] ); } if ( monthAdded && isDefined( _elements_Day_Width ) ) { @@ -291,13 +266,12 @@ function renderControlViewMonthDay( bindingOptions, currentDayColumn, dayNumber, month, year, mapRangeColors ) { var actualDay = dayNumber + 1, - day = createElement( "div", "day" ), + day = createElement( currentDayColumn, "div", "day" ), date = new Date( year, month, actualDay ), dateCount = _elements_DateCounts[ bindingOptions.element.id ].type[ bindingOptions.currentView.type ][ toStorageDate( date ) ]; dateCount = isDefinedNumber( dateCount ) ? dateCount : 0; day.title = getCustomFormattedDateText( bindingOptions.dayToolTipText, date ); - currentDayColumn.appendChild( day ); if ( isDefinedFunction( bindingOptions.onDayClick ) ) { day.onclick = function() { @@ -322,20 +296,12 @@ day.className += _string.space + useMapRangeColor.cssClassName; } - if ( !isDefined( _elements_Day_Width ) ) { - var marginLeft = getStyleValueByName( day, "margin-left", true ), - marginRight = getStyleValueByName( day, "margin-right", true ); - - _elements_Day_Width = day.offsetWidth + marginLeft + marginRight; - } + return day; } function renderControlViewGuide( bindingOptions ) { - var guide = createElement( "div", "guide" ); - bindingOptions.element.appendChild( guide ); - - var mapTypes = createElement( "div", "map-types" ); - guide.appendChild( mapTypes ); + var guide = createElement( bindingOptions.element, "div", "guide" ), + mapTypes = createElement( guide, "div", "map-types" ); var noneTypeCount = 0; for ( var storageDate in _elements_DateCounts[ bindingOptions.element.id ].type[ _elements_DateCounts_DefaultType ] ) { @@ -358,12 +324,8 @@ } if ( bindingOptions.showGuide ) { - var mapToggles = createElement( "div", "map-toggles" ); - guide.appendChild( mapToggles ); - - var lessText = createElement( "div", "less-text" ); - lessText.innerHTML = _configuration.lessText; - mapToggles.appendChild( lessText ); + var mapToggles = createElement( guide, "div", "map-toggles" ), + lessText = createElementWithHTML( mapToggles, "div", "less-text", _configuration.lessText ); if ( bindingOptions.mapTogglesEnabled ) { lessText.onclick = function() { @@ -374,12 +336,10 @@ lessText.className += _string.space + "no-click"; } - var days = createElement( "div", "days" ); - mapToggles.appendChild( days ); - - var mapRangeColors = bindingOptions.mapRangeColors.sort( function( a, b ) { - return b.range - a.range; - } ); + var days = createElement( mapToggles, "div", "days" ), + mapRangeColors = bindingOptions.mapRangeColors.sort( function( a, b ) { + return b.range - a.range; + } ); var mapRangeColorsLength = mapRangeColors.length; @@ -387,9 +347,7 @@ renderControlViewGuideDay( bindingOptions, days, mapRangeColors[ mapRangeColorsIndex ] ); } - var moreText = createElement( "div", "more-text" ); - moreText.innerHTML = _configuration.moreText; - mapToggles.appendChild( moreText ); + var moreText = createElementWithHTML( mapToggles, "div", "more-text", _configuration.moreText ); if ( bindingOptions.mapTogglesEnabled ) { moreText.onclick = function() { @@ -403,9 +361,7 @@ } function renderControlViewGuideTypeButton( bindingOptions, mapTypes, type ) { - var typeButton = createElement( "button", "type" ); - typeButton.innerHTML = type; - mapTypes.appendChild( typeButton ); + var typeButton = createElementWithHTML( mapTypes, "button", "type", type ); if ( bindingOptions.currentView.type === type ) { typeButton.className += _string.space + "active"; @@ -422,9 +378,8 @@ } function renderControlViewGuideDay( bindingOptions, days, mapRangeColor ) { - var day = createElement( "div" ); + var day = createElement( days, "div" ); day.title = mapRangeColor.tooltipText; - days.appendChild( day ); if ( isHeatMapColorVisible( bindingOptions, mapRangeColor.id ) ) { day.className = "day " + mapRangeColor.cssClassName; @@ -489,14 +444,13 @@ var csvContents = getCsvContent( bindingOptions ); if ( csvContents !== _string.empty ) { - var tempLink = createElement( "a" ); + var tempLink = createElement( _parameter_Document.body, "a" ); tempLink.style.display = "none"; tempLink.setAttribute( "target", "_blank" ); tempLink.setAttribute( "href", "data:text/csv;charset=utf-8," + encodeURIComponent( csvContents ) ); tempLink.setAttribute( "download", getCsvFilename( bindingOptions ) ); - - _parameter_Document.body.appendChild( tempLink ); tempLink.click(); + _parameter_Document.body.removeChild( tempLink ); } } @@ -589,6 +543,7 @@ options.mapTogglesEnabled = getDefaultBoolean( options.mapTogglesEnabled, true ); options.placeMonthNamesOnTheBottom = getDefaultBoolean( options.placeMonthNamesOnTheBottom, false ); options.exportOnlyYearBeingViewed = getDefaultBoolean( options.exportOnlyYearBeingViewed, true ); + options.year = getDefaultNumber( options.year, new Date().getFullYear() ); if ( isInvalidOptionArray( options.monthsToShow ) ) { options.monthsToShow = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ]; @@ -749,7 +704,7 @@ * ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ - function createElement( type, className ) { + function createElement( container, type, className ) { var result = null, nodeType = type.toLowerCase(), isText = nodeType === "text"; @@ -764,9 +719,18 @@ result.className = className; } + container.appendChild( result ); + return result; } + function createElementWithHTML( container, type, className, html ) { + var element = createElement( container, type, className ); + element.innerHTML = html; + + return element; + } + function getStyleValueByName( element, stylePropertyName, toNumber ) { var value = null; @@ -780,7 +744,7 @@ } if ( toNumber ) { - value = parseInt( value, 10 ); + value = parseFloat( value, 10 ); } return value; @@ -822,6 +786,10 @@ return isDefinedArray( value ) ? value : defaultValue; } + function getDefaultNumber( value, defaultValue ) { + return isDefinedNumber( value ) ? value : defaultValue; + } + function getDefaultStringOrArray( value, defaultValue ) { if ( isDefinedString( value ) ) { value = value.split( _string.space ); @@ -1275,7 +1243,7 @@ * @returns {string} The version number. */ this.getVersion = function() { - return "1.1.0"; + return "1.2.0"; }; diff --git a/src/heat.js.scss b/src/heat.js.scss index c1415eb9..44839b07 100644 --- a/src/heat.js.scss +++ b/src/heat.js.scss @@ -1,5 +1,5 @@ /* - * Heat.js Library v1.1.0 + * Heat.js Library v1.2.0 * * Copyright 2024 Bunoon * Released under the MIT License @@ -20,14 +20,26 @@ // Days --heat-js-day-background-color: #2d333b; - --heat-js-day-border-color: #454c56;; - --heat-js-day-background-color-hover: #454c56; + --heat-js-day-border-color: var(--heat-js-container-border-color); + --heat-js-day-background-color-hover: var(--heat-js-container-border-color); --heat-js-day-spacing: 6.3px; + --heat-js-day-opacity-hover: 0.7; + + // Days - Colors + --heat-js-day-color-1-background-color: rgba( 57, 211, 83, 0.25 ); + --heat-js-day-color-1-border-color: rgba( 57, 211, 83, 0.15 ); + --heat-js-day-color-2-background-color: rgba( 57, 211, 83, 0.50 ); + --heat-js-day-color-2-border-color: rgba( 57, 211, 83, 0.25 ); + --heat-js-day-color-3-background-color: rgba( 57, 211, 83, 0.75 ); + --heat-js-day-color-3-border-color: rgba( 57, 211, 83, 0.50 ); + --heat-js-day-color-4-background-color: rgba( 57, 211, 83, 1 ); + --heat-js-day-color-4-border-color: rgba( 57, 211, 83, 0.75 ); // Button - --heat-js-button-background-color: #2d333b; - --heat-js-button-border-color: #454c56; - --heat-js-button-background-color-hover: #454c56; + --heat-js-button-background-color: var(--heat-js-day-background-color); + --heat-js-button-border-color: var(--heat-js-container-border-color); + --heat-js-button-background-color-hover: var(--heat-js-container-border-color); + --heat-js-button-background-color-active: #616b79; // Borders --heat-js-border-radius: 0.5rem; @@ -61,11 +73,15 @@ padding-left: 9px; padding-right: 9px; outline: none; + transition: var(--heat-js-transition); + + &:active { + background: var(--heat-js-button-background-color-active) !important; + } &:hover { cursor: pointer; background: var(--heat-js-button-background-color-hover); - transition: var(--heat-js-transition); } } @@ -93,6 +109,7 @@ div.heat-js { font-size: var(--heat-js-spacing-font-size); width: 100%; max-width: 700px; + margin: 0 !important; * { box-sizing: border-box; @@ -116,7 +133,7 @@ div.heat-js { div.heat-js { div.title-bar { text-align: right; - margin-bottom: var(--heat-js-spacing); + margin-bottom: calc( var(--heat-js-spacing) + var(--heat-js-spacing) / 2 ); div.title { float: left; @@ -180,7 +197,15 @@ div.heat-js { pointer-events: none; &:last-child { - margin-right: 0; + div.day-columns { + div.day-column { + &:last-child { + div.day { + margin-right: 0 !important; + } + } + } + } } div.month-name, @@ -218,11 +243,11 @@ div.heat-js { pointer-events: all !important; background-color: var(--heat-js-day-background-color); border: var(--heat-js-border-size) solid var(--heat-js-day-border-color); - + transition: var(--heat-js-transition); + &:hover { cursor: pointer; background: var(--heat-js-day-background-color-hover); - transition: var(--heat-js-transition); } } } @@ -257,7 +282,7 @@ div.heat-js { button { margin-left: 0 !important; - margin-right: var(--heat-js-spacing) !important; + margin-right: calc( var(--heat-js-spacing) / 2 ) !important; } } @@ -275,11 +300,16 @@ div.heat-js { div.more-text { display: inline-block; font-weight: 300; + transition: var(--heat-js-transition); &:hover { cursor: pointer; text-decoration: underline; } + + &:active { + color: var(--heat-js-color-gray); + } } div.less-text { @@ -304,6 +334,7 @@ div.heat-js { height: var(--heat-js-spacing-font-size); margin-right: var(--heat-js-day-spacing); cursor: pointer; + transition: var(--heat-js-transition); &:last-child { margin-right: 0; @@ -323,38 +354,38 @@ div.heat-js { div.heat-js { div.day-color-1 { - background-color: rgba( 57, 211, 83, 0.25 ) !important; - border: var(--heat-js-border-size-day) solid rgba( 57, 211, 83, 0.15 ) !important; + background-color: var(--heat-js-day-color-1-background-color) !important; + border: var(--heat-js-border-size-day) solid var(--heat-js-day-color-1-border-color) !important; &:hover { - opacity: 0.7; + opacity: var(--heat-js-day-opacity-hover); } } div.day-color-2 { - background-color: rgba( 57, 211, 83, 0.5 ) !important; - border: var(--heat-js-border-size-day) solid rgba( 57, 211, 83, 0.25 ) !important; + background-color: var(--heat-js-day-color-2-background-color) !important; + border: var(--heat-js-border-size-day) solid var(--heat-js-day-color-2-border-color) !important; &:hover { - opacity: 0.7; + opacity: var(--heat-js-day-opacity-hover); } } div.day-color-3 { - background-color: rgba( 57, 211, 83, 0.75 ) !important; - border: var(--heat-js-border-size-day) solid rgba( 57, 211, 83, 0.5 ) !important; + background-color: var(--heat-js-day-color-3-background-color) !important; + border: var(--heat-js-border-size-day) solid var(--heat-js-day-color-3-border-color) !important; &:hover { - opacity: 0.7; + opacity: var(--heat-js-day-opacity-hover); } } div.day-color-4 { - background-color: rgba( 57, 211, 83, 1 ) !important; - border: var(--heat-js-border-size-day) solid rgba( 57, 211, 83, 0.75 ) !important; + background-color: var(--heat-js-day-color-4-background-color) !important; + border: var(--heat-js-border-size-day) solid var(--heat-js-day-color-4-border-color) !important; &:hover { - opacity: 0.7; + opacity: var(--heat-js-day-opacity-hover); } } } \ No newline at end of file diff --git a/test/css/styles.css b/test/css/styles.css index 21b7f665..8bea550b 100644 --- a/test/css/styles.css +++ b/test/css/styles.css @@ -42,8 +42,4 @@ h2 { div.contents { padding: 10px; -} - -button { - margin: 3px !important; } \ No newline at end of file diff --git a/test/dist/heat.js.bootstrap.html b/test/dist/heat.js.bootstrap.html index 04fb1f7f..e2ece2bd 100644 --- a/test/dist/heat.js.bootstrap.html +++ b/test/dist/heat.js.bootstrap.html @@ -20,7 +20,7 @@

Heat.js - Bootstrap



-
+
@@ -59,6 +59,8 @@

Additional Data:

+ + + +
+

Heat.js - Theme

+

This is a basic example of how to use Heat.js to create a basic heatmap using an override theme CSS file.

+
+ +
+
+
+ + + + \ No newline at end of file diff --git a/test/src/heat.js.bootstrap.html b/test/src/heat.js.bootstrap.html index f2733e4c..355ac8db 100644 --- a/test/src/heat.js.bootstrap.html +++ b/test/src/heat.js.bootstrap.html @@ -20,7 +20,7 @@

Heat.js - Bootstrap



-
+
@@ -59,6 +59,8 @@

Additional Data:

+ + + +
+

Heat.js - Theme

+

This is a basic example of how to use Heat.js to create a basic heatmap using an override theme CSS file.

+
+ +
+
+
+ + + + \ No newline at end of file