Skip to content

Instantly share code, notes, and snippets.

@hayamiz

hayamiz/index.html

Created October 2, 2019 07:16
Show Gist options
  • Save hayamiz/6140a80b9abb4dbbd79b9424f4f25387 to your computer and use it in GitHub Desktop.
Save hayamiz/6140a80b9abb4dbbd79b9424f4f25387 to your computer and use it in GitHub Desktop.
Download ZIP
Event text gen // source https://jsbin.com/dipamox
Raw
index.html
<!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&region=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("&nbsp;&nbsp;&nbsp;&nbsp;");
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("&nbsp;&nbsp;&nbsp;&nbsp;");
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>
Raw
jsbin.dipamox.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;
}
Raw
jsbin.dipamox.js
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("&nbsp;&nbsp;&nbsp;&nbsp;");
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