33 |
34 |
35 |
36 |
37 |
49 |
50 | */
51 | /* COLORS */
52 | .CardView {
53 | --Name-bg: red;
54 | --
55 | }
56 | /* Hide Table Head */
57 | .CardView thead{
58 | display: none;
59 | line-height: 0;
60 | height: 0px;
61 | }
62 | CardView table {
63 | border-collapse: collapse;
64 | border-spacing: 0;
65 | width: 100%;
66 | }
67 |
68 |
69 | /* Table wide Changes */
70 | /* .CardView tbody {
71 | display: flex;
72 | flex-direction: row;
73 | flex-wrap: wrap;
74 | } */
75 | /* Turn all spans into flex boxes*/
76 | .CardView span {
77 | display: flex;
78 | float: left;
79 | margin: 0;
80 | padding: 0;
81 | max-width: 350px;
82 | }
83 | /* Create a card Shape from the Table Row */
84 | .CardView tr {
85 | display: block;
86 | text-align: justify;
87 | float: left;
88 | padding: 0;
89 | margin-right: 60px;
90 | height: 475px;
91 | width: 310px;
92 | background-color: rgb(36, 32, 32) !important;
93 | border: 5px solid rgb(0, 0, 0) !important;
94 | box-shadow: 10px 11px 19px -1px #070202;
95 | }
96 |
97 | .CardView td {
98 | display: block;
99 | min-height: 50px;
100 | padding: 15px;
101 | }
102 | /* First Column Box*/
103 | .CardView td:first-child {
104 | min-height: 75px !important ;
105 | padding: auto;
106 | background-color: rgba(255, 255, 255, 0.863);
107 | border: 5px solid rgb(255, 255, 255);
108 | }
109 | /* First Column link */
110 | .CardView td:first-child span a {
111 | text-overflow: ellipsis !important;
112 | word-wrap: break-word !important;
113 | text-overflow: ellipsis !important;
114 | display: block;
115 | line-height: 1em;
116 | max-height: 2em;
117 | font-size: 23px;
118 | font-weight: bold !important;
119 | color: rgb(207, 17, 17) !important;
120 | }
121 |
122 | /* Second Column */
123 | /* column bg */
124 | .CardView td:nth-child(2) {
125 | z-index: 2;
126 | background-color: rgb(226, 75, 75);
127 | width: 175px;
128 | display: block;
129 | float: left;
130 | line-height: 1em;
131 | max-height: 2em;
132 | }
133 | /* column link */
134 | .CardView td:nth-child(2) a {
135 | color: rgb(206, 211, 189) !important;
136 | font-weight: bold !important;
137 | width: 60px;
138 | word-wrap: break-word;
139 | text-overflow: ellipsis !important;
140 | }
141 |
142 | /* third column */
143 | .CardView td:nth-child(3) {
144 | max-height: 50px !important;
145 | color: rgb(255, 81, 81) !important;
146 | z-index: -1;
147 | width: 125px;
148 | line-height: 1em;
149 | max-height: 2em;
150 | display: block;
151 | float: right;
152 | background-color: rgb(250, 246, 0);
153 | }
154 | /* third column links */
155 | .CardView td:nth-child(3) span a {
156 | color: rgb(255, 81, 81) !important;
157 | text-align: right;
158 | width: 100%;
159 | overflow: hidden;
160 | display: block;
161 | float: right;
162 | font-weight: bold !important;
163 | word-wrap: break-word;
164 | text-overflow: ellipsis !important;
165 | }
166 | /* third column strings */
167 | .CardView td:nth-child(3) span{
168 | color: rgb(255, 81, 81) !important;
169 | text-align: right;
170 | width: 100%;
171 | overflow: hidden;
172 | display: block;
173 | float: right;
174 | font-weight: bold !important;
175 | word-wrap: break-word;
176 | text-overflow: ellipsis !important;
177 | }
178 |
179 | /* Last Column Image */
180 | .CardView td span img {
181 | display: block;
182 | width: 300px;
183 | height: 300px;
184 | object-fit: contain;
185 | margin: 0 auto;
186 | padding: 0;
187 | margin: 20px auto;
188 | }
189 |
190 | ```
--------------------------------------------------------------------------------
/static/search.js:
--------------------------------------------------------------------------------
1 | function debounce(func, wait) {
2 | var timeout;
3 |
4 | return function () {
5 | var context = this;
6 | var args = arguments;
7 | clearTimeout(timeout);
8 |
9 | timeout = setTimeout(function () {
10 | timeout = null;
11 | func.apply(context, args);
12 | }, wait);
13 | };
14 | }
15 |
16 | // Taken from mdbook
17 | // The strategy is as follows:
18 | // First, assign a value to each word in the document:
19 | // Words that correspond to search terms (stemmer aware): 40
20 | // Normal words: 2
21 | // First word in a sentence: 8
22 | // Then use a sliding window with a constant number of words and count the
23 | // sum of the values of the words within the window. Then use the window that got the
24 | // maximum sum. If there are multiple maximas, then get the last one.
25 | // Enclose the terms in .
26 | function makeTeaser(body, terms) {
27 | var TERM_WEIGHT = 40;
28 | var NORMAL_WORD_WEIGHT = 2;
29 | var FIRST_WORD_WEIGHT = 8;
30 | var TEASER_MAX_WORDS = 30;
31 |
32 | var stemmedTerms = terms.map(function (w) {
33 | return elasticlunr.stemmer(w.toLowerCase());
34 | });
35 | var termFound = false;
36 | var index = 0;
37 | var weighted = []; // contains elements of ["word", weight, index_in_document]
38 |
39 | // split in sentences, then words
40 | var sentences = body.toLowerCase().split(". ");
41 |
42 | for (var i in sentences) {
43 | var words = sentences[i].split(" ");
44 | var value = FIRST_WORD_WEIGHT;
45 |
46 | for (var j in words) {
47 | var word = words[j];
48 |
49 | if (word.length > 0) {
50 | for (var k in stemmedTerms) {
51 | if (elasticlunr.stemmer(word).startsWith(stemmedTerms[k])) {
52 | value = TERM_WEIGHT;
53 | termFound = true;
54 | }
55 | }
56 | weighted.push([word, value, index]);
57 | value = NORMAL_WORD_WEIGHT;
58 | }
59 |
60 | index += word.length;
61 | index += 1; // ' ' or '.' if last word in sentence
62 | }
63 |
64 | index += 1; // because we split at a two-char boundary '. '
65 | }
66 |
67 | if (weighted.length === 0) {
68 | return body;
69 | }
70 |
71 | var windowWeights = [];
72 | var windowSize = Math.min(weighted.length, TEASER_MAX_WORDS);
73 | // We add a window with all the weights first
74 | var curSum = 0;
75 | for (var i = 0; i < windowSize; i++) {
76 | curSum += weighted[i][1];
77 | }
78 | windowWeights.push(curSum);
79 |
80 | for (var i = 0; i < weighted.length - windowSize; i++) {
81 | curSum -= weighted[i][1];
82 | curSum += weighted[i + windowSize][1];
83 | windowWeights.push(curSum);
84 | }
85 |
86 | // If we didn't find the term, just pick the first window
87 | var maxSumIndex = 0;
88 | if (termFound) {
89 | var maxFound = 0;
90 | // backwards
91 | for (var i = windowWeights.length - 1; i >= 0; i--) {
92 | if (windowWeights[i] > maxFound) {
93 | maxFound = windowWeights[i];
94 | maxSumIndex = i;
95 | }
96 | }
97 | }
98 |
99 | var teaser = [];
100 | var startIndex = weighted[maxSumIndex][2];
101 | for (var i = maxSumIndex; i < maxSumIndex + windowSize; i++) {
102 | var word = weighted[i];
103 | if (startIndex < word[2]) {
104 | // missing text from index to start of `word`
105 | teaser.push(body.substring(startIndex, word[2]));
106 | startIndex = word[2];
107 | }
108 |
109 | // add around search terms
110 | if (word[1] === TERM_WEIGHT) {
111 | teaser.push("");
112 | }
113 | startIndex = word[2] + word[0].length;
114 | teaser.push(body.substring(word[2], startIndex));
115 |
116 | if (word[1] === TERM_WEIGHT) {
117 | teaser.push("");
118 | }
119 | }
120 | teaser.push("…");
121 | return teaser.join("");
122 | }
123 |
124 | function formatSearchResultItem(item, terms) {
125 | return (
126 | '| 40 | EACH TD CORRESPONDS TO A COLUMN 41 | THEY ARE ORDERED TOP TO BOTTOM, IN ORDER FROM LEFT TO RIGHT 42 | 43 | THIS SPAN IS WHERE YOUR RETURNS INFO IS (links, images, text) 44 | 45 | | 46 |
' +
127 | `${item.doc.title}` +
128 | `
"
130 | );
131 | }
132 |
133 | function initSearch() {
134 | var $searchInput = document.getElementById("search");
135 | var $searchResults = document.querySelector(".search-results");
136 | var $searchResultsItems = document.querySelector(".search-results__items");
137 |
138 | $searchInput.addEventListener("click", (e) => e.stopPropagation());
139 | $searchResults.addEventListener("click", (e) => e.stopPropagation());
140 | $searchResultsItems.addEventListener("click", (e) => e.stopPropagation());
141 |
142 | var MAX_ITEMS = 10;
143 |
144 | var options = {
145 | bool: "AND",
146 | fields: {
147 | title: { boost: 2 },
148 | body: { boost: 1 },
149 | },
150 | };
151 | var currentTerm = "";
152 | var index = elasticlunr.Index.load(window.searchIndex);
153 |
154 | $searchInput.addEventListener(
155 | "keyup",
156 | debounce(function () {
157 | var term = $searchInput.value.trim();
158 | if (term === currentTerm || !index) {
159 | return;
160 | }
161 | $searchResults.style.display = term === "" ? "none" : "block";
162 | $searchResultsItems.innerHTML = "";
163 | if (term === "") {
164 | return;
165 | }
166 |
167 | var results = index.search(term, options);
168 | if (results.length === 0) {
169 | $searchResults.style.display = "none";
170 | return;
171 | }
172 |
173 | currentTerm = term;
174 | for (var i = 0; i < Math.min(results.length, MAX_ITEMS); i++) {
175 | var item = document.createElement("li");
176 | item.innerHTML = formatSearchResultItem(results[i], term.split(" "));
177 | $searchResultsItems.appendChild(item);
178 | }
179 | }, 150)
180 | );
181 | }
182 |
183 | window.addEventListener("click", (e) => {
184 | var $searchInput = document.getElementById("search");
185 | var $searchResults = document.querySelector(".search-results");
186 | var $searchResultsItems = document.querySelector(".search-results__items");
187 | $searchInput.value = "";
188 | $searchResults.style.display = "none";
189 | $searchResultsItems.innerHTML = "";
190 | });
191 |
192 | function whenAvailable(callback, names) {
193 | var interval = 10; // ms
194 | window.setTimeout(function () {
195 | if (names.every((name) => typeof window[name] !== "undefined")) {
196 | callback();
197 | } else {
198 | window.setTimeout(arguments.callee, interval);
199 | }
200 | }, interval);
201 | }
202 |
203 | whenAvailable(() => {
204 | initSearch();
205 | }, ["elasticlunr", "searchIndex"]);
206 |
--------------------------------------------------------------------------------
/content/snippets/birthdays.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Upcoming Birthdays
3 | date: 2021-05-09
4 | taxonomies:
5 | tags:
6 | - dataview
7 | kind:
8 | - plugins
9 | extra:
10 | author: Moonbase59
11 | ---
12 |
13 | Here’s a rather robust and flexible list of upcoming birthdays that
14 |
15 | - shows **link**, **next birthday**, and **age** someone will turn to
16 | - has a configurabe **date range** (from today, for a “natural language” duration)
17 | - sorts by **next birthday**
18 | - uses **locale settings** from the language _Obsidian is set to_
19 | - doesn’t choke when crossing the year boundary
20 | - has YAML **searchterm** configuration
21 | - has YAML “natural language” **duration** configuration; “odd” data like `duration: 0.5 years` will be auto-translated to `6 months` (or `6 Monate` in German)
22 | - has YAML **date format** configuration (yay!)
23 | - has a configurable **info line** above the table (can be disabled)
24 |
25 | 
26 |
27 |
28 | Upcoming birthdays with English settings, custom date format and info line
29 |
30 | **The technically-minded** may also find interesting:
31 |
32 | - utility functions that can be used for table data
33 | - custom function for “where”
34 | - comparator function for “sort”
35 | - easily translatable “info line” with parameters
36 | - how I need to _undo_ Dataview’s YAML pre-parsing of dates and durations
37 |
38 | 
39 |
40 |
41 | Upcoming birthdays with German settings, custom date format and info line
42 |
43 | ## Requirements
44 |
45 |
46 | - _Dataview 0.3.3+_
47 | - `moment.js` (comes with Obsidian)
48 | - Notes to be included must have a birthday as `YYYY-MM-DD` in the frontmatter:
49 |
50 | birthday: 1959-07-19
51 |
52 |
53 | - The note _using_ this script **must** have the parameters `searchterm` and a (more or less) “natural language” `duration` in the frontmatter:
54 |
55 | #searchterm: "#family or #friends"
56 | searchterm: '"People"'
57 | duration: 1 year
58 |
59 |
60 | - The note using this script **_can_** have an additional `dateformat` in the frontmatter:
61 |
62 | dateformat: "ddd, D MMMM YYYY"
63 |
64 |
65 | If left out or empty, it will default to `YYYY-MM-DD`.
66 |
67 | ## Code
68 |
69 | ### YAML frontmatter example
70 |
71 | ```yaml
72 | #searchterm: "#family or #friends"
73 | searchterm: '"People"'
74 | duration: 1 year
75 | dateformat: "ddd, D MMMM YYYY"
76 | ```
77 |
78 | ### `dataviewjs` code
79 |
80 | This contains some utility functions that can be used in your table, like `nextBirthday()`, `turns()`.
81 |
82 | ```js
83 | var start = moment().startOf('day');
84 | var end = moment(start).add(dv.current().duration);
85 | var dateformat = "YYYY-MM-DD";
86 | if (dv.current().dateformat) { dateformat = dv.current().dateformat; }
87 |
88 | // info text above table, {0}=duration, {1}=start date, {2}=end date
89 | // parameters can be left out, or the string empty
90 | var infotext = "Upcoming birthdays for {0} from now ({1} – {2})${makeTeaser(item.doc.body, terms)}
` +
129 | ""; 91 | 92 | //====================================================================== 93 | 94 | function nextBirthday(birthday) { 95 | // Get person’s next birthday on or after "start" 96 | // returns a moment 97 | 98 | // need to "unparse" because DV has already converted YAML birthday to DateTime object 99 | // shouldn’t harm if already a string 100 | var bday = moment(birthday.toString()); 101 | var bdayNext = moment(bday).year(start.year()); 102 | if (bdayNext.isBefore(start, 'day')) { 103 | bdayNext.add(1, "year"); 104 | } 105 | return bdayNext; 106 | } 107 | 108 | function turns(birthday) { 109 | // Get the age in years a person will turn to on their next birthday 110 | 111 | // need to "unparse" because DV has already converted YAML birthday to DateTime object 112 | // shouldn’t harm if already a string 113 | var bday = moment(birthday.toString()); 114 | return nextBirthday(birthday).diff(bday, 'years'); 115 | } 116 | 117 | function showBirthday(birthday) { 118 | // Determine if this birthday is in the range to be shown 119 | // including the start date, excluding the end date 120 | // because that comes from a duration calculation 121 | // for use with "where", returns true or false 122 | 123 | if (birthday) { 124 | // need to "unparse" because DV has already converted YAML birthday to DateTime object 125 | // shouldn’t harm if already a string 126 | var bday = moment(birthday.toString()); 127 | var bdayNext = nextBirthday(birthday); 128 | if (bdayNext.isBetween(start, end, 'day', '[)')) { 129 | return true; 130 | } else { 131 | return false; 132 | } 133 | } else { 134 | return false; 135 | } 136 | } 137 | 138 | function sortByNextBirthday(a, b) { 139 | // comparator function for "sort" 140 | 141 | if (nextBirthday(a).isBefore(nextBirthday(b))) { 142 | return -1; 143 | } 144 | if (nextBirthday(a).isAfter(nextBirthday(b))) { 145 | return 1; 146 | } 147 | // they’re equal 148 | return 0; 149 | } 150 | 151 | 152 | //====================================================================== 153 | 154 | dv.paragraph(infotext.format(moment.duration(dv.current().duration.toString()).humanize(), start.format(dateformat), end.format(dateformat))); 155 | 156 | dv.table( 157 | ["Name", "Birthday", "Turns"], 158 | dv.pages(dv.current().searchterm) 159 | // use a function to see if this birthday is in range to be shown 160 | .where(p => showBirthday(p.birthday)) 161 | // use a comparator function to sort by next birthday 162 | .sort(p => p.birthday, 'asc', sortByNextBirthday) 163 | .map(p => [ 164 | p.file.link, 165 | p.birthday ? nextBirthday(p.birthday).format(dateformat) : '–', 166 | turns(p.birthday) 167 | ]) 168 | ); 169 | ``` 170 | 171 | ## Notes 172 | 173 | 174 | - Dataview actually _parses_ the cell content, so if you for example set the date format to `D. MMMM`, you’ll get large vertical spacing. This is because DV _thinks_ something like `17. May` must be an _ordered list item_ and parses it accordingly. Which in turn will ruin your vertical spacing. 175 | See [0.3.3: table item converts to ordered list, ruining vertical spacing · Issue #199 · blacksmithgu/obsidian-dataview · GitHub 1](https://github.com/blacksmithgu/obsidian-dataview/issues/199). 176 | 177 | - Using durations > 1 year (like `2 years`) _work_, but don’t make much sense. The table will only display a person’s _next_ birthday. So no duplicates. 178 | 179 | [Original Forum Post](https://forum.obsidian.md/t/dataviewjs-snippet-showcase/17847/6) -------------------------------------------------------------------------------- /content/snippets/people-nearby.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Show family members friends and places that are nearby 3 | date: 2021-05-08 4 | taxonomies: 5 | tags: 6 | - dataview 7 | kind: 8 | - plugins 9 | extra: 10 | author: Moonbase59 11 | --- 12 | 13 | I love location data, maps, and visualizing stuff. When I plan to travel or visit a friend or family member, I love to see “what’s near” in each person or location note. Automatically linking places and people together, so to say. 14 | 15 |  16 | 17 | * If I visit a friend, I can check if there are other friends or places of interest nearby, and we could maybe visit them together. 18 | * I can check if other friends are near enough to do something together, maybe meet for a barbeque. 19 | * When sightseeing, I won’t miss nearby friends, business contacts, favourite restaurants or other sights anymore. 20 | 21 | ## Goals 22 | - Never miss anything nearby anymore. 23 | - Have this dataview available as a template so it can be in every person, business contact, and place-of-interest note and automatically show me what’s near this place. 24 | - No more people and location notes without location data (easily be copied from Google Maps or the like). 25 | 26 | ## Requirements 27 | 28 | - All people/location notes must have a 29 | 30 | ```yaml 31 | location: [lat, lon] 32 | ``` 33 | 34 | entry in the YAML frontmatter. (This syntax has something to do with YAML & JS data structure and easy parsing. The sequence [lat, lon] has been chosen for practical reasons: People are used to it and it can easily be copied from Google Maps and others.) 35 | - _Dataview 0.3.0+_ installed. 36 | - `moment.js` available (it currently is). 37 | - Distance units of **m**, **km**, **yd** and **mi** must be usable and easy to switch. 38 | - Distances must be calculated as correct straight-line distances, taking into account that Earth is not a perfect sphere but a rotational ellipsoid. 39 | - Distances must also be available as (approximate; for speed and offline use) driving distances. 40 | - Distances shall be shown with the unit appended but internally numeric, for easy calculation/comparison. 41 | - Numbers shall be formatted *according to the language currently set in Obsidian* (`4,096.1` vs `4.096,1`). The OS’s system setting shall only be used if all else fails. 42 | - Date & time strings must be easily formatable however I wish, defaulting to ISO-8601 (`2021-05-08T10:34:05+02:00`). 43 | - Very long note title links shall optionally be shortened in Dataview table views, using my [dataview-shorten-links.css snippet](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/152). 44 | - Tags (from frontmatter only, a current Dataview restriction) shall be shown in one (comma- or blank-)separated string, not as a list. 45 | - The list shall be sorted by distance from “here” (i.e., this note). 46 | - The distance values shall be clickable and lead to the Google Maps Route Planner, destination already filled in, and start point taken from the current location. 47 | - Above the table, a text line shall show the currently set “nearby” radius as well as the selected unit of measurement (`within 100 km driving distance, within 50 mi straight-line distance`), so we later know what’s actually shown in the table. 48 | 49 | ## The Code 50 | 51 | ```js 52 | // Nearby Family Members, Friends and Places 53 | // 2021-05-15 - Matthias C. Hormann (Moonbase59) 54 | 55 | // set parameters (to be supplied via YAML frontmatter, eventually) 56 | // DV 0.3.3 interprets "500000 m" as a Luxon duration, 57 | // so we have to put nearby: '"500000 m"' and remove the ". 58 | let nearby = dv.current().nearby.replace(/['"]+/g, ''); 59 | let unit = nearby.split(' ')[1]; 60 | let radius = nearby.split(' ')[0]; 61 | let origin = dv.current().location; 62 | 63 | // search term as used in dv.pages() 64 | // use "#tags" or '"folder/subfolder"' for a folder 65 | let searchterm = dv.current().searchterm; 66 | 67 | //====================================================================== 68 | 69 | function getDistance(origin, destination, unit='m') { 70 | // return distance in selected unit (m,km,yd,mi) 71 | var factor = 1.0; 72 | switch (unit) { 73 | case 'm': 74 | factor = 1.0; 75 | break; 76 | case 'km': 77 | factor = 1000.0; 78 | break; 79 | case 'yd': 80 | factor = 0.9144; 81 | break; 82 | case 'mi': 83 | factor = 1609.344; 84 | break; 85 | default: 86 | factor = 1.0; 87 | console.warn("getDistance: Invalid unit '%s', using 'm'. Valid units are: m,km,yd,mi.",unit); 88 | } 89 | 90 | var lon1 = toRadian(origin[1]), 91 | lat1 = toRadian(origin[0]), 92 | lon2 = toRadian(destination[1]), 93 | lat2 = toRadian(destination[0]); 94 | 95 | var deltaLat = lat2 - lat1; 96 | var deltaLon = lon2 - lon1; 97 | 98 | var a = Math.pow(Math.sin(deltaLat/2), 2) + Math.cos(lat1) * Math.cos(lat2) * Math.pow(Math.sin(deltaLon/2), 2); 99 | var c = 2 * Math.asin(Math.sqrt(a)); 100 | var EARTH_RADIUS = 6371000; // 6,371 km in metres 101 | return c * EARTH_RADIUS / factor; 102 | } 103 | 104 | function toRadian(degree) { 105 | return degree*Math.PI/180; 106 | } 107 | 108 | function getDrivingDistance(origin, destination, unit='m') { 109 | // PREDICTED, using a factor. 110 | // Much faster, and no need for Internet access. 111 | // The U.S. predict 1.417, based on statistical analysis. 112 | // For Germany, I’ve found 1.3 a good value (comparing w/ Google Maps "best route") 113 | var factor = 1.3; 114 | return getDistance(origin, destination, unit) * factor; 115 | } 116 | 117 | //====================================================================== 118 | 119 | // Show what we will display. 120 | dv.paragraph("List shows nearby places (within " + radius + " " + unit + " driving distance)."); 121 | dv.paragraph("
"); 122 | 123 | // get the pages 124 | let pages = dv.pages(searchterm) 125 | .where(p => p.location && 126 | // must be >0 so we don’t catch ourselves! 127 | getDrivingDistance(origin, p.location, unit) > 0.0 && 128 | getDrivingDistance(origin, p.location, unit) <= radius) 129 | .sort(p => getDistance(origin, p.location, unit)); 130 | 131 | // create table 132 | dv.table(["Name", "Tags", "Distance*"], 133 | pages.map(p => [ 134 | // The name 135 | p.file.link, 136 | // tags (show '–' if none defined) 137 | (p.file.etags ? p.file.etags.join(' ') : '–'), 138 | // straight-line distance 139 | /* 140 | getDistance(origin, p.location, unit) 141 | .toLocaleString(moment.locale(), {maximumFractionDigits: 1}) + " " + unit, 142 | */ 143 | // predicted driving distance and Google Maps Route Planner Link 144 | (getDrivingDistance(origin, p.location, unit) 145 | .toLocaleString(moment.locale(), {maximumFractionDigits: 1}) + " " + unit) 146 | .link('https://www.google.com/maps/dir/?api=1&dir_action=navigate&destination=' + p.location[0] + ',' + p.location[1]), 147 | ]) 148 | ); 149 | 150 | // show a small legend 151 | dv.paragraph("* Approximate driving distance; when clicked, opens a new Google Maps Route Planner window."); 152 | ``` 153 | 154 | [Original Forum Post](https://forum.obsidian.md/t/dataviewjs-snippet-showcase/17847/2) -------------------------------------------------------------------------------- /static/reset.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /* Document 4 | ========================================================================== */ 5 | 6 | /** 7 | * 1. Correct the line height in all browsers. 8 | * 2. Prevent adjustments of font size after orientation changes in iOS. 9 | */ 10 | 11 | html { 12 | line-height: 1.15; /* 1 */ 13 | -webkit-text-size-adjust: 100%; /* 2 */ 14 | } 15 | 16 | /* Sections 17 | ========================================================================== */ 18 | 19 | /** 20 | * Remove the margin in all browsers. 21 | */ 22 | 23 | body { 24 | margin: 0; 25 | } 26 | 27 | /** 28 | * Render the `main` element consistently in IE. 29 | */ 30 | 31 | main { 32 | display: block; 33 | } 34 | 35 | /** 36 | * Correct the font size and margin on `h1` elements within `section` and 37 | * `article` contexts in Chrome, Firefox, and Safari. 38 | */ 39 | 40 | h1 { 41 | font-size: 2em; 42 | margin: 0.67em 0; 43 | } 44 | 45 | /* Grouping content 46 | ========================================================================== */ 47 | 48 | /** 49 | * 1. Add the correct box sizing in Firefox. 50 | * 2. Show the overflow in Edge and IE. 51 | */ 52 | 53 | hr { 54 | box-sizing: content-box; /* 1 */ 55 | height: 0; /* 1 */ 56 | overflow: visible; /* 2 */ 57 | } 58 | 59 | /** 60 | * 1. Correct the inheritance and scaling of font size in all browsers. 61 | * 2. Correct the odd `em` font sizing in all browsers. 62 | */ 63 | 64 | pre { 65 | font-family: monospace, monospace; /* 1 */ 66 | font-size: 1em; /* 2 */ 67 | } 68 | 69 | /* Text-level semantics 70 | ========================================================================== */ 71 | 72 | /** 73 | * Remove the gray background on active links in IE 10. 74 | */ 75 | 76 | a { 77 | background-color: transparent; 78 | } 79 | 80 | /** 81 | * 1. Remove the bottom border in Chrome 57- 82 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 83 | */ 84 | 85 | abbr[title] { 86 | border-bottom: none; /* 1 */ 87 | text-decoration: underline; /* 2 */ 88 | text-decoration: underline dotted; /* 2 */ 89 | } 90 | 91 | /** 92 | * Add the correct font weight in Chrome, Edge, and Safari. 93 | */ 94 | 95 | b, 96 | strong { 97 | font-weight: bolder; 98 | } 99 | 100 | /** 101 | * 1. Correct the inheritance and scaling of font size in all browsers. 102 | * 2. Correct the odd `em` font sizing in all browsers. 103 | */ 104 | 105 | code, 106 | kbd, 107 | samp { 108 | font-family: monospace, monospace; /* 1 */ 109 | font-size: 1em; /* 2 */ 110 | } 111 | 112 | /** 113 | * Add the correct font size in all browsers. 114 | */ 115 | 116 | small { 117 | font-size: 80%; 118 | } 119 | 120 | /** 121 | * Prevent `sub` and `sup` elements from affecting the line height in 122 | * all browsers. 123 | */ 124 | 125 | sub, 126 | sup { 127 | font-size: 75%; 128 | line-height: 0; 129 | position: relative; 130 | vertical-align: baseline; 131 | } 132 | 133 | sub { 134 | bottom: -0.25em; 135 | } 136 | 137 | sup { 138 | top: -0.5em; 139 | } 140 | 141 | /* Embedded content 142 | ========================================================================== */ 143 | 144 | /** 145 | * Remove the border on images inside links in IE 10. 146 | */ 147 | 148 | img { 149 | border-style: none; 150 | } 151 | 152 | /* Forms 153 | ========================================================================== */ 154 | 155 | /** 156 | * 1. Change the font styles in all browsers. 157 | * 2. Remove the margin in Firefox and Safari. 158 | */ 159 | 160 | button, 161 | input, 162 | optgroup, 163 | select, 164 | textarea { 165 | font-family: inherit; /* 1 */ 166 | font-size: 100%; /* 1 */ 167 | line-height: 1.15; /* 1 */ 168 | margin: 0; /* 2 */ 169 | } 170 | 171 | /** 172 | * Show the overflow in IE. 173 | * 1. Show the overflow in Edge. 174 | */ 175 | 176 | button, 177 | input { 178 | /* 1 */ 179 | overflow: visible; 180 | } 181 | 182 | /** 183 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 184 | * 1. Remove the inheritance of text transform in Firefox. 185 | */ 186 | 187 | button, 188 | select { 189 | /* 1 */ 190 | text-transform: none; 191 | } 192 | 193 | /** 194 | * Correct the inability to style clickable types in iOS and Safari. 195 | */ 196 | 197 | button, 198 | [type="button"], 199 | [type="reset"], 200 | [type="submit"] { 201 | -webkit-appearance: button; 202 | } 203 | 204 | /** 205 | * Remove the inner border and padding in Firefox. 206 | */ 207 | 208 | button::-moz-focus-inner, 209 | [type="button"]::-moz-focus-inner, 210 | [type="reset"]::-moz-focus-inner, 211 | [type="submit"]::-moz-focus-inner { 212 | border-style: none; 213 | padding: 0; 214 | } 215 | 216 | /** 217 | * Restore the focus styles unset by the previous rule. 218 | */ 219 | 220 | button:-moz-focusring, 221 | [type="button"]:-moz-focusring, 222 | [type="reset"]:-moz-focusring, 223 | [type="submit"]:-moz-focusring { 224 | outline: 1px dotted ButtonText; 225 | } 226 | 227 | /** 228 | * Correct the padding in Firefox. 229 | */ 230 | 231 | fieldset { 232 | padding: 0.35em 0.75em 0.625em; 233 | } 234 | 235 | /** 236 | * 1. Correct the text wrapping in Edge and IE. 237 | * 2. Correct the color inheritance from `fieldset` elements in IE. 238 | * 3. Remove the padding so developers are not caught out when they zero out 239 | * `fieldset` elements in all browsers. 240 | */ 241 | 242 | legend { 243 | box-sizing: border-box; /* 1 */ 244 | color: inherit; /* 2 */ 245 | display: table; /* 1 */ 246 | max-width: 100%; /* 1 */ 247 | padding: 0; /* 3 */ 248 | white-space: normal; /* 1 */ 249 | } 250 | 251 | /** 252 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 253 | */ 254 | 255 | progress { 256 | vertical-align: baseline; 257 | } 258 | 259 | /** 260 | * Remove the default vertical scrollbar in IE 10+. 261 | */ 262 | 263 | textarea { 264 | overflow: auto; 265 | } 266 | 267 | /** 268 | * 1. Add the correct box sizing in IE 10. 269 | * 2. Remove the padding in IE 10. 270 | */ 271 | 272 | [type="checkbox"], 273 | [type="radio"] { 274 | box-sizing: border-box; /* 1 */ 275 | padding: 0; /* 2 */ 276 | } 277 | 278 | /** 279 | * Correct the cursor style of increment and decrement buttons in Chrome. 280 | */ 281 | 282 | [type="number"]::-webkit-inner-spin-button, 283 | [type="number"]::-webkit-outer-spin-button { 284 | height: auto; 285 | } 286 | 287 | /** 288 | * 1. Correct the odd appearance in Chrome and Safari. 289 | * 2. Correct the outline style in Safari. 290 | */ 291 | 292 | [type="search"] { 293 | -webkit-appearance: textfield; /* 1 */ 294 | outline-offset: -2px; /* 2 */ 295 | } 296 | 297 | /** 298 | * Remove the inner padding in Chrome and Safari on macOS. 299 | */ 300 | 301 | [type="search"]::-webkit-search-decoration { 302 | -webkit-appearance: none; 303 | } 304 | 305 | /** 306 | * 1. Correct the inability to style clickable types in iOS and Safari. 307 | * 2. Change font properties to `inherit` in Safari. 308 | */ 309 | 310 | ::-webkit-file-upload-button { 311 | -webkit-appearance: button; /* 1 */ 312 | font: inherit; /* 2 */ 313 | } 314 | 315 | /* Interactive 316 | ========================================================================== */ 317 | 318 | /* 319 | * Add the correct display in Edge, IE 10+, and Firefox. 320 | */ 321 | 322 | details { 323 | display: block; 324 | } 325 | 326 | /* 327 | * Add the correct display in all browsers. 328 | */ 329 | 330 | summary { 331 | display: list-item; 332 | } 333 | 334 | /* Misc 335 | ========================================================================== */ 336 | 337 | /** 338 | * Add the correct display in IE 10+. 339 | */ 340 | 341 | template { 342 | display: none; 343 | } 344 | 345 | /** 346 | * Add the correct display in IE 10. 347 | */ 348 | 349 | [hidden] { 350 | display: none; 351 | } 352 | --------------------------------------------------------------------------------