Created
October 2, 2019 07:16
-
-
Save hayamiz/6140a80b9abb4dbbd79b9424f4f25387 to your computer and use it in GitHub Desktop.
Event text gen // source https://jsbin.com/dipamox
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>Event text gen</title> | |
| <link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" /> | |
| <script src="https://code.jquery.com/jquery-3.1.0.js"></script> | |
| <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> | |
| <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB0ydAql6nCtGun_GUUtzC1Yzy9SzJtv_g&libraries=places&callback=initMap&language=ja®ion=JP" | |
| async defer></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script> | |
| <style id="jsbin-css"> | |
| p { | |
| font-size: 10px; | |
| } | |
| input { | |
| width: 80%; | |
| font-size: 16px; | |
| } | |
| textarea { | |
| width: 80%; | |
| height: 80pt; | |
| } | |
| iframe.map { | |
| width: 100%; | |
| height: 500px; | |
| } | |
| span#title-loading { | |
| display: none; | |
| } | |
| span#title-loading img { | |
| height: 20px; | |
| } | |
| div#map { | |
| width: 100%; | |
| height: 200pt; | |
| font-size: 10px; | |
| } | |
| .controls { | |
| background-color: #fff; | |
| border-radius: 2px; | |
| border: 1px solid transparent; | |
| box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); | |
| box-sizing: border-box; | |
| font-family: Roboto; | |
| font-size: 15px; | |
| font-weight: 300; | |
| height: 29px; | |
| margin-left: 17px; | |
| margin-top: 10px; | |
| outline: none; | |
| padding: 0 11px 0 13px; | |
| text-overflow: ellipsis; | |
| width: 400px; | |
| } | |
| .controls:focus { | |
| border-color: #4d90fe; | |
| } | |
| .title { | |
| font-weight: bold; | |
| } | |
| #infowindow-content { | |
| display: none; | |
| } | |
| #map #infowindow-content { | |
| display: inline; | |
| } | |
| button.btn2 { | |
| width: 30%; | |
| } | |
| button.btn { | |
| width: 80%; | |
| } | |
| div#output-items div.output-item { | |
| border: 1px solid black; | |
| padding: 5px; | |
| } | |
| div#output-items div.output-item input, button { | |
| font-size: 8pt; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <p> | |
| Event URL:<br> | |
| <input type="url" id="url"> | |
| </p> | |
| <p> | |
| <span id="title-loading"><img src="https://i.gyazo.com/9ba5d915f4840f7dbab93ccb5b7c0663.gif"></span>Event Title:<br> | |
| <input type="text" id="title"> | |
| </p> | |
| <p> | |
| Date begin:<br> | |
| <input type="text" id="datepicker1"> | |
| </p> | |
| <p> | |
| Date ends (optional):<br> | |
| <input type="text" id="datepicker2"> | |
| <button id="dp2-clear">clear</button> | |
| </p> | |
| <p> | |
| Name of place:<br/> | |
| <input type="text" id="placename"> | |
| </p> | |
| <p> | |
| Address of place:<br/> | |
| <input type="text" id="address"> | |
| </p> | |
| <p> | |
| <button id="add" class="btn2">add</button> | |
| <button id="clear" class="btn2">clear</button> | |
| </p> | |
| <div style="display: none"> | |
| <input id="pac-input" | |
| class="controls" | |
| type="text" | |
| placeholder="Enter a location"> | |
| </div> | |
| <div id="map"></div> | |
| <div id="infowindow-content"> | |
| <span id="place-name" class="title"></span><br> | |
| <strong>Place ID:</strong> <span id="place-id"></span><br> | |
| <span id="place-address"></span> | |
| </div> | |
| <div id="output-items"> | |
| <button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js"> | |
| Copy to clipboard | |
| </button> | |
| </div> | |
| <script id="jsbin-javascript"> | |
| var prev_url = ""; | |
| function updateTitle() { | |
| const url = $("#url").val(); | |
| if (url != prev_url) { | |
| prev_url = url; | |
| $("#title-loading").css("display", "inline"); | |
| $.ajax({ | |
| method: "GET", | |
| url: "https://textance.herokuapp.com/rest/title/" + | |
| encodeURIComponent($("#url").val()), | |
| success: function(data) { | |
| title = data; | |
| var m = $("#url").val().match(/twitter\.com\/([^\/]+)\//); | |
| if (m) { | |
| title = "（@" + m[1]+ "）" + title; | |
| } | |
| $("#title").val(title); | |
| $("#title-loading").css("display", "none"); | |
| }, | |
| complete: function(data) { | |
| $("#title-loading").css("display", "none"); | |
| } | |
| }); | |
| } | |
| } | |
| var timer; | |
| function setupTitleHandler() { | |
| timer = window.setInterval(function(){ | |
| updateTitle(); | |
| }, 500); | |
| } | |
| var _marker = null; | |
| var _result = null; | |
| var _last_place_id = null; | |
| // Initialize and add the map | |
| function initMap() { | |
| var map = new google.maps.Map(document.getElementById('map'), { | |
| center: { | |
| lat: 35.6812405, | |
| lng: 139.7649361 | |
| }, | |
| zoom: 12, | |
| mapTypeControl: false | |
| }); | |
| var input = document.getElementById('pac-input'); | |
| var autocomplete = new google.maps.places.Autocomplete(input); | |
| autocomplete.bindTo('bounds', map); | |
| // Specify just the place data fields that you need. | |
| autocomplete.setFields(['place_id', 'geometry', 'name']); | |
| map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); | |
| var infowindow = new google.maps.InfoWindow(); | |
| var infowindowContent = document.getElementById('infowindow-content'); | |
| infowindow.setContent(infowindowContent); | |
| var geocoder = new google.maps.Geocoder; | |
| var marker = new google.maps.Marker({ | |
| map: map | |
| }); | |
| _marker = marker; | |
| marker.addListener('click', function() { | |
| infowindow.open(map, marker); | |
| }); | |
| autocomplete.addListener('place_changed', function() { | |
| infowindow.close(); | |
| _last_place_id = null; | |
| var place = autocomplete.getPlace(); | |
| if (!place.place_id) { | |
| return; | |
| } | |
| geocoder.geocode({ | |
| 'placeId': place.place_id | |
| }, function(results, status) { | |
| if (status !== 'OK') { | |
| window.alert('Geocoder failed due to: ' + status); | |
| return; | |
| } | |
| _result = results; | |
| map.setZoom(11); | |
| map.setCenter(results[0].geometry.location); | |
| // Set the position of the marker using the place ID and location. | |
| marker.setPlace({ | |
| placeId: place.place_id, | |
| location: results[0].geometry.location | |
| }); | |
| marker.setVisible(true); | |
| // Get place name | |
| $("#placename").val(place.name); | |
| // Get rough address | |
| var rough_addr = results[0].formatted_address.match(/[^ 0-9]+[都道府県].+?[市区町村]/); | |
| $("#address").val(rough_addr); | |
| _last_place_id = place.place_id; | |
| infowindowContent.children['place-name'].textContent = place.name; | |
| infowindowContent.children['place-id'].textContent = place.place_id; | |
| infowindowContent.children['place-address'].textContent = | |
| results[0].formatted_address; | |
| infowindow.open(map, marker); | |
| }) | |
| }); | |
| } | |
| function date2str(date) { | |
| out = "" + date.getFullYear() + "/"; | |
| out += (date.getMonth()+1) + "/"; | |
| out += date.getDate(); | |
| out += "（" + ["日","月","火","水","木","金","土"][date.getDay()] + "）"; | |
| return out; | |
| } | |
| function check_empty(elemid) { | |
| if ($("#"+elemid).val() == "") { | |
| $("#"+elemid).effect( "shake" ); | |
| console.log("shake"); | |
| return true; | |
| } | |
| return false; | |
| } | |
| // Initialize components | |
| $(function() { | |
| new ClipboardJS('.copy-btn'); | |
| $("#datepicker1").datepicker(); | |
| dp1 = $("#datepicker1"); | |
| dp1.datepicker("setDate", new Date()); | |
| dp1.datepicker("option", "dateFormat", "yy/mm/dd（D）"); | |
| $("#datepicker2").datepicker(); | |
| dp2 = $("#datepicker2"); | |
| dp2.datepicker("option", "dateFormat", "yy/mm/dd（D）"); | |
| $("#dp2-clear").click(function() { | |
| $("#datepicker2").val(""); | |
| }); | |
| $("#datepicker1").change(function(){ | |
| $("#datepicker2").datepicker( "option", "minDate", $("#datepicker1").datepicker("getDate") ); | |
| }); | |
| $("#add").click(function(){ | |
| var out; | |
| const date = $("#datepicker1").datepicker("getDate"); | |
| const date2 = $("#datepicker2").datepicker("getDate"); | |
| const map_url = "https://www.google.com/maps/search/?api=1&query=" + encodeURIComponent($("#placename").val()) + "&query_place_id=" + _last_place_id; | |
| var err = false; | |
| err = err || check_empty("title"); | |
| err = err || check_empty("url"); | |
| if (err) { | |
| return; | |
| } | |
| var datestr; | |
| datestr = date2str(date); | |
| if (date2 != null && date.toString() != date2.toString()) { | |
| datestr += "～" + date2str(date2); | |
| } | |
| out = datestr; | |
| out += "[" + $("#title").val() + " " + $("#url").val() + "]"; | |
| out += " at " | |
| out += "[" + $("#placename").val() + " " + map_url + "]" | |
| out += "（" + $("#address").val() + "）"; | |
| var output_elem = $("<div></div>", { | |
| addClass: "output-item", | |
| }); | |
| var copy_id = "sb-src-" + Date.now() + "-" + Math.floor(Math.random()*10000); | |
| var sb_src_elem = $("<div></div>"); | |
| sb_src_elem.append($("<input>", { | |
| type: "text", | |
| value: out, | |
| id: copy_id | |
| })); | |
| sb_src_elem.append($("<button class=\"copy-btn\" data-clipboard-target=\"#" + copy_id + "\">copy</button>")); | |
| var tw_elem = $("<a/>", { | |
| "text": "Tweet", | |
| "target": "_blank", | |
| "href": "https://twitter.com/intent/tweet?text=" + encodeURIComponent("[新着]🧶編み物イベント情報\n" + datestr + "：" + $("#title").val() + "（" + $("#address").val() + "）" + "\n\n詳しくは：http://bit.ly/knit-events") + "&hashtags=" + encodeURIComponent("編み物イベント情報") + "&related=hayamiz" | |
| }); | |
| var delete_link = $("<a href=\"#\">DEL</a>"); | |
| delete_link.click(function(event) { | |
| event.preventDefault(); | |
| $(this).parent().remove(); | |
| }); | |
| output_elem.append(sb_src_elem); | |
| output_elem.append(tw_elem); | |
| output_elem.append(" "); | |
| output_elem.append(delete_link); | |
| $("#output-items").append(output_elem); | |
| // $("#scrapbox-src").val(out + "\n" + $("#scrapbox-src").val()); | |
| }); | |
| $("#clear").click(function(){ | |
| prev_url = ""; | |
| $("#url").val(""); | |
| $("#title").val(""); | |
| $("#datepicker1").val(""); | |
| $("#datepicker2").val(""); | |
| $("#placename").val(""); | |
| $("#address").val(""); | |
| }); | |
| setupTitleHandler(); | |
| }); | |
| </script> | |
| <script id="jsbin-source-css" type="text/css"> | |
| p { | |
| font-size: 10px; | |
| } | |
| input { | |
| width: 80%; | |
| font-size: 16px; | |
| } | |
| textarea { | |
| width: 80%; | |
| height: 80pt; | |
| } | |
| iframe.map { | |
| width: 100%; | |
| height: 500px; | |
| } | |
| span#title-loading { | |
| display: none; | |
| } | |
| span#title-loading img { | |
| height: 20px; | |
| } | |
| div#map { | |
| width: 100%; | |
| height: 200pt; | |
| font-size: 10px; | |
| } | |
| .controls { | |
| background-color: #fff; | |
| border-radius: 2px; | |
| border: 1px solid transparent; | |
| box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); | |
| box-sizing: border-box; | |
| font-family: Roboto; | |
| font-size: 15px; | |
| font-weight: 300; | |
| height: 29px; | |
| margin-left: 17px; | |
| margin-top: 10px; | |
| outline: none; | |
| padding: 0 11px 0 13px; | |
| text-overflow: ellipsis; | |
| width: 400px; | |
| } | |
| .controls:focus { | |
| border-color: #4d90fe; | |
| } | |
| .title { | |
| font-weight: bold; | |
| } | |
| #infowindow-content { | |
| display: none; | |
| } | |
| #map #infowindow-content { | |
| display: inline; | |
| } | |
| button.btn2 { | |
| width: 30%; | |
| } | |
| button.btn { | |
| width: 80%; | |
| } | |
| div#output-items div.output-item { | |
| border: 1px solid black; | |
| padding: 5px; | |
| } | |
| div#output-items div.output-item input, button { | |
| font-size: 8pt; | |
| }</script> | |
| <script id="jsbin-source-javascript" type="text/javascript"> | |
| var prev_url = ""; | |
| function updateTitle() { | |
| const url = $("#url").val(); | |
| if (url != prev_url) { | |
| prev_url = url; | |
| $("#title-loading").css("display", "inline"); | |
| $.ajax({ | |
| method: "GET", | |
| url: "https://textance.herokuapp.com/rest/title/" + | |
| encodeURIComponent($("#url").val()), | |
| success: function(data) { | |
| title = data; | |
| var m = $("#url").val().match(/twitter\.com\/([^\/]+)\//); | |
| if (m) { | |
| title = "（@" + m[1]+ "）" + title; | |
| } | |
| $("#title").val(title); | |
| $("#title-loading").css("display", "none"); | |
| }, | |
| complete: function(data) { | |
| $("#title-loading").css("display", "none"); | |
| } | |
| }); | |
| } | |
| } | |
| var timer; | |
| function setupTitleHandler() { | |
| timer = window.setInterval(function(){ | |
| updateTitle(); | |
| }, 500); | |
| } | |
| var _marker = null; | |
| var _result = null; | |
| var _last_place_id = null; | |
| // Initialize and add the map | |
| function initMap() { | |
| var map = new google.maps.Map(document.getElementById('map'), { | |
| center: { | |
| lat: 35.6812405, | |
| lng: 139.7649361 | |
| }, | |
| zoom: 12, | |
| mapTypeControl: false | |
| }); | |
| var input = document.getElementById('pac-input'); | |
| var autocomplete = new google.maps.places.Autocomplete(input); | |
| autocomplete.bindTo('bounds', map); | |
| // Specify just the place data fields that you need. | |
| autocomplete.setFields(['place_id', 'geometry', 'name']); | |
| map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); | |
| var infowindow = new google.maps.InfoWindow(); | |
| var infowindowContent = document.getElementById('infowindow-content'); | |
| infowindow.setContent(infowindowContent); | |
| var geocoder = new google.maps.Geocoder; | |
| var marker = new google.maps.Marker({ | |
| map: map | |
| }); | |
| _marker = marker; | |
| marker.addListener('click', function() { | |
| infowindow.open(map, marker); | |
| }); | |
| autocomplete.addListener('place_changed', function() { | |
| infowindow.close(); | |
| _last_place_id = null; | |
| var place = autocomplete.getPlace(); | |
| if (!place.place_id) { | |
| return; | |
| } | |
| geocoder.geocode({ | |
| 'placeId': place.place_id | |
| }, function(results, status) { | |
| if (status !== 'OK') { | |
| window.alert('Geocoder failed due to: ' + status); | |
| return; | |
| } | |
| _result = results; | |
| map.setZoom(11); | |
| map.setCenter(results[0].geometry.location); | |
| // Set the position of the marker using the place ID and location. | |
| marker.setPlace({ | |
| placeId: place.place_id, | |
| location: results[0].geometry.location | |
| }); | |
| marker.setVisible(true); | |
| // Get place name | |
| $("#placename").val(place.name); | |
| // Get rough address | |
| var rough_addr = results[0].formatted_address.match(/[^ 0-9]+[都道府県].+?[市区町村]/); | |
| $("#address").val(rough_addr); | |
| _last_place_id = place.place_id; | |
| infowindowContent.children['place-name'].textContent = place.name; | |
| infowindowContent.children['place-id'].textContent = place.place_id; | |
| infowindowContent.children['place-address'].textContent = | |
| results[0].formatted_address; | |
| infowindow.open(map, marker); | |
| }) | |
| }); | |
| } | |
| function date2str(date) { | |
| out = "" + date.getFullYear() + "/"; | |
| out += (date.getMonth()+1) + "/"; | |
| out += date.getDate(); | |
| out += "（" + ["日","月","火","水","木","金","土"][date.getDay()] + "）"; | |
| return out; | |
| } | |
| function check_empty(elemid) { | |
| if ($("#"+elemid).val() == "") { | |
| $("#"+elemid).effect( "shake" ); | |
| console.log("shake"); | |
| return true; | |
| } | |
| return false; | |
| } | |
| // Initialize components | |
| $(function() { | |
| new ClipboardJS('.copy-btn'); | |
| $("#datepicker1").datepicker(); | |
| dp1 = $("#datepicker1"); | |
| dp1.datepicker("setDate", new Date()); | |
| dp1.datepicker("option", "dateFormat", "yy/mm/dd（D）"); | |
| $("#datepicker2").datepicker(); | |
| dp2 = $("#datepicker2"); | |
| dp2.datepicker("option", "dateFormat", "yy/mm/dd（D）"); | |
| $("#dp2-clear").click(function() { | |
| $("#datepicker2").val(""); | |
| }); | |
| $("#datepicker1").change(function(){ | |
| $("#datepicker2").datepicker( "option", "minDate", $("#datepicker1").datepicker("getDate") ); | |
| }); | |
| $("#add").click(function(){ | |
| var out; | |
| const date = $("#datepicker1").datepicker("getDate"); | |
| const date2 = $("#datepicker2").datepicker("getDate"); | |
| const map_url = "https://www.google.com/maps/search/?api=1&query=" + encodeURIComponent($("#placename").val()) + "&query_place_id=" + _last_place_id; | |
| var err = false; | |
| err = err || check_empty("title"); | |
| err = err || check_empty("url"); | |
| if (err) { | |
| return; | |
| } | |
| var datestr; | |
| datestr = date2str(date); | |
| if (date2 != null && date.toString() != date2.toString()) { | |
| datestr += "～" + date2str(date2); | |
| } | |
| out = datestr; | |
| out += "[" + $("#title").val() + " " + $("#url").val() + "]"; | |
| out += " at " | |
| out += "[" + $("#placename").val() + " " + map_url + "]" | |
| out += "（" + $("#address").val() + "）"; | |
| var output_elem = $("<div></div>", { | |
| addClass: "output-item", | |
| }); | |
| var copy_id = "sb-src-" + Date.now() + "-" + Math.floor(Math.random()*10000); | |
| var sb_src_elem = $("<div></div>"); | |
| sb_src_elem.append($("<input>", { | |
| type: "text", | |
| value: out, | |
| id: copy_id | |
| })); | |
| sb_src_elem.append($("<button class=\"copy-btn\" data-clipboard-target=\"#" + copy_id + "\">copy</button>")); | |
| var tw_elem = $("<a/>", { | |
| "text": "Tweet", | |
| "target": "_blank", | |
| "href": "https://twitter.com/intent/tweet?text=" + encodeURIComponent("[新着]🧶編み物イベント情報\n" + datestr + "：" + $("#title").val() + "（" + $("#address").val() + "）" + "\n\n詳しくは：http://bit.ly/knit-events") + "&hashtags=" + encodeURIComponent("編み物イベント情報") + "&related=hayamiz" | |
| }); | |
| var delete_link = $("<a href=\"#\">DEL</a>"); | |
| delete_link.click(function(event) { | |
| event.preventDefault(); | |
| $(this).parent().remove(); | |
| }); | |
| output_elem.append(sb_src_elem); | |
| output_elem.append(tw_elem); | |
| output_elem.append(" "); | |
| output_elem.append(delete_link); | |
| $("#output-items").append(output_elem); | |
| // $("#scrapbox-src").val(out + "\n" + $("#scrapbox-src").val()); | |
| }); | |
| $("#clear").click(function(){ | |
| prev_url = ""; | |
| $("#url").val(""); | |
| $("#title").val(""); | |
| $("#datepicker1").val(""); | |
| $("#datepicker2").val(""); | |
| $("#placename").val(""); | |
| $("#address").val(""); | |
| }); | |
| setupTitleHandler(); | |
| });</script></body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| p { | |
| font-size: 10px; | |
| } | |
| input { | |
| width: 80%; | |
| font-size: 16px; | |
| } | |
| textarea { | |
| width: 80%; | |
| height: 80pt; | |
| } | |
| iframe.map { | |
| width: 100%; | |
| height: 500px; | |
| } | |
| span#title-loading { | |
| display: none; | |
| } | |
| span#title-loading img { | |
| height: 20px; | |
| } | |
| div#map { | |
| width: 100%; | |
| height: 200pt; | |
| font-size: 10px; | |
| } | |
| .controls { | |
| background-color: #fff; | |
| border-radius: 2px; | |
| border: 1px solid transparent; | |
| box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); | |
| box-sizing: border-box; | |
| font-family: Roboto; | |
| font-size: 15px; | |
| font-weight: 300; | |
| height: 29px; | |
| margin-left: 17px; | |
| margin-top: 10px; | |
| outline: none; | |
| padding: 0 11px 0 13px; | |
| text-overflow: ellipsis; | |
| width: 400px; | |
| } | |
| .controls:focus { | |
| border-color: #4d90fe; | |
| } | |
| .title { | |
| font-weight: bold; | |
| } | |
| #infowindow-content { | |
| display: none; | |
| } | |
| #map #infowindow-content { | |
| display: inline; | |
| } | |
| button.btn2 { | |
| width: 30%; | |
| } | |
| button.btn { | |
| width: 80%; | |
| } | |
| div#output-items div.output-item { | |
| border: 1px solid black; | |
| padding: 5px; | |
| } | |
| div#output-items div.output-item input, button { | |
| font-size: 8pt; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var prev_url = ""; | |
| function updateTitle() { | |
| const url = $("#url").val(); | |
| if (url != prev_url) { | |
| prev_url = url; | |
| $("#title-loading").css("display", "inline"); | |
| $.ajax({ | |
| method: "GET", | |
| url: "https://textance.herokuapp.com/rest/title/" + | |
| encodeURIComponent($("#url").val()), | |
| success: function(data) { | |
| title = data; | |
| var m = $("#url").val().match(/twitter\.com\/([^\/]+)\//); | |
| if (m) { | |
| title = "（@" + m[1]+ "）" + title; | |
| } | |
| $("#title").val(title); | |
| $("#title-loading").css("display", "none"); | |
| }, | |
| complete: function(data) { | |
| $("#title-loading").css("display", "none"); | |
| } | |
| }); | |
| } | |
| } | |
| var timer; | |
| function setupTitleHandler() { | |
| timer = window.setInterval(function(){ | |
| updateTitle(); | |
| }, 500); | |
| } | |
| var _marker = null; | |
| var _result = null; | |
| var _last_place_id = null; | |
| // Initialize and add the map | |
| function initMap() { | |
| var map = new google.maps.Map(document.getElementById('map'), { | |
| center: { | |
| lat: 35.6812405, | |
| lng: 139.7649361 | |
| }, | |
| zoom: 12, | |
| mapTypeControl: false | |
| }); | |
| var input = document.getElementById('pac-input'); | |
| var autocomplete = new google.maps.places.Autocomplete(input); | |
| autocomplete.bindTo('bounds', map); | |
| // Specify just the place data fields that you need. | |
| autocomplete.setFields(['place_id', 'geometry', 'name']); | |
| map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); | |
| var infowindow = new google.maps.InfoWindow(); | |
| var infowindowContent = document.getElementById('infowindow-content'); | |
| infowindow.setContent(infowindowContent); | |
| var geocoder = new google.maps.Geocoder; | |
| var marker = new google.maps.Marker({ | |
| map: map | |
| }); | |
| _marker = marker; | |
| marker.addListener('click', function() { | |
| infowindow.open(map, marker); | |
| }); | |
| autocomplete.addListener('place_changed', function() { | |
| infowindow.close(); | |
| _last_place_id = null; | |
| var place = autocomplete.getPlace(); | |
| if (!place.place_id) { | |
| return; | |
| } | |
| geocoder.geocode({ | |
| 'placeId': place.place_id | |
| }, function(results, status) { | |
| if (status !== 'OK') { | |
| window.alert('Geocoder failed due to: ' + status); | |
| return; | |
| } | |
| _result = results; | |
| map.setZoom(11); | |
| map.setCenter(results[0].geometry.location); | |
| // Set the position of the marker using the place ID and location. | |
| marker.setPlace({ | |
| placeId: place.place_id, | |
| location: results[0].geometry.location | |
| }); | |
| marker.setVisible(true); | |
| // Get place name | |
| $("#placename").val(place.name); | |
| // Get rough address | |
| var rough_addr = results[0].formatted_address.match(/[^ 0-9]+[都道府県].+?[市区町村]/); | |
| $("#address").val(rough_addr); | |
| _last_place_id = place.place_id; | |
| infowindowContent.children['place-name'].textContent = place.name; | |
| infowindowContent.children['place-id'].textContent = place.place_id; | |
| infowindowContent.children['place-address'].textContent = | |
| results[0].formatted_address; | |
| infowindow.open(map, marker); | |
| }) | |
| }); | |
| } | |
| function date2str(date) { | |
| out = "" + date.getFullYear() + "/"; | |
| out += (date.getMonth()+1) + "/"; | |
| out += date.getDate(); | |
| out += "（" + ["日","月","火","水","木","金","土"][date.getDay()] + "）"; | |
| return out; | |
| } | |
| function check_empty(elemid) { | |
| if ($("#"+elemid).val() == "") { | |
| $("#"+elemid).effect( "shake" ); | |
| console.log("shake"); | |
| return true; | |
| } | |
| return false; | |
| } | |
| // Initialize components | |
| $(function() { | |
| new ClipboardJS('.copy-btn'); | |
| $("#datepicker1").datepicker(); | |
| dp1 = $("#datepicker1"); | |
| dp1.datepicker("setDate", new Date()); | |
| dp1.datepicker("option", "dateFormat", "yy/mm/dd（D）"); | |
| $("#datepicker2").datepicker(); | |
| dp2 = $("#datepicker2"); | |
| dp2.datepicker("option", "dateFormat", "yy/mm/dd（D）"); | |
| $("#dp2-clear").click(function() { | |
| $("#datepicker2").val(""); | |
| }); | |
| $("#datepicker1").change(function(){ | |
| $("#datepicker2").datepicker( "option", "minDate", $("#datepicker1").datepicker("getDate") ); | |
| }); | |
| $("#add").click(function(){ | |
| var out; | |
| const date = $("#datepicker1").datepicker("getDate"); | |
| const date2 = $("#datepicker2").datepicker("getDate"); | |
| const map_url = "https://www.google.com/maps/search/?api=1&query=" + encodeURIComponent($("#placename").val()) + "&query_place_id=" + _last_place_id; | |
| var err = false; | |
| err = err || check_empty("title"); | |
| err = err || check_empty("url"); | |
| if (err) { | |
| return; | |
| } | |
| var datestr; | |
| datestr = date2str(date); | |
| if (date2 != null && date.toString() != date2.toString()) { | |
| datestr += "～" + date2str(date2); | |
| } | |
| out = datestr; | |
| out += "[" + $("#title").val() + " " + $("#url").val() + "]"; | |
| out += " at " | |
| out += "[" + $("#placename").val() + " " + map_url + "]" | |
| out += "（" + $("#address").val() + "）"; | |
| var output_elem = $("<div></div>", { | |
| addClass: "output-item", | |
| }); | |
| var copy_id = "sb-src-" + Date.now() + "-" + Math.floor(Math.random()*10000); | |
| var sb_src_elem = $("<div></div>"); | |
| sb_src_elem.append($("<input>", { | |
| type: "text", | |
| value: out, | |
| id: copy_id | |
| })); | |
| sb_src_elem.append($("<button class=\"copy-btn\" data-clipboard-target=\"#" + copy_id + "\">copy</button>")); | |
| var tw_elem = $("<a/>", { | |
| "text": "Tweet", | |
| "target": "_blank", | |
| "href": "https://twitter.com/intent/tweet?text=" + encodeURIComponent("[新着]🧶編み物イベント情報\n" + datestr + "：" + $("#title").val() + "（" + $("#address").val() + "）" + "\n\n詳しくは：http://bit.ly/knit-events") + "&hashtags=" + encodeURIComponent("編み物イベント情報") + "&related=hayamiz" | |
| }); | |
| var delete_link = $("<a href=\"#\">DEL</a>"); | |
| delete_link.click(function(event) { | |
| event.preventDefault(); | |
| $(this).parent().remove(); | |
| }); | |
| output_elem.append(sb_src_elem); | |
| output_elem.append(tw_elem); | |
| output_elem.append(" "); | |
| output_elem.append(delete_link); | |
| $("#output-items").append(output_elem); | |
| // $("#scrapbox-src").val(out + "\n" + $("#scrapbox-src").val()); | |
| }); | |
| $("#clear").click(function(){ | |
| prev_url = ""; | |
| $("#url").val(""); | |
| $("#title").val(""); | |
| $("#datepicker1").val(""); | |
| $("#datepicker2").val(""); | |
| $("#placename").val(""); | |
| $("#address").val(""); | |
| }); | |
| setupTitleHandler(); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment