☰

Waze Editor Clock

Wazeエディターにドラッグ可能でサイズ変更可能な装飾付き時計を表示します

当前为 2024-05-10 提交的版本，查看 最新版本。

// ==UserScript==
// @name        Waze Editor Clock
// @namespace   waze-editor-clock
// @version     1.6
// @description Wazeエディターにドラッグ可能でサイズ変更可能な装飾付き時計を表示します
// @author      Aoi
// @match       https://www.waze.com/ja/*
// @grant       none
// ==/UserScript==

(function() {
  'use strict';

  // 時計要素
  const clockElement = document.createElement('div');
  clockElement.id = 'waze-editor-clock';
  clockElement.style.cssText = `
    position: fixed;
    bottom: 19px;
    left: 50%; /* 中央揃え */
    transform: translateX(-50%);
    z-index: 1000;
    background-color: #007bff; /* 背景色を青に変更 */
    color: #fff; /* テキスト色を白に変更 */
    padding: 10px;
    border-radius: 5px; /* 角を丸くする */
    font-size: 23px;
    cursor: move; /* 時計をドラッグ可能にする */
    aspect-ratio: 1; /* アスペクト比を維持する */
    resize: both; /* サイズ変更を有効にする */
    overflow: hidden; /* サイズ変更中のオーバーフローを隠す */
    min-width: 100px; /* 最小幅を設定 */
    min-height: 40px; /* 最小高さを設定 */
    text-align: center; /* テキストを中央揃えにする */
  `;

  // Load clock position from local storage
  const storedPosition = localStorage.getItem('wazeEditorClockPosition');
  if (storedPosition) {
    const { left, top } = JSON.parse(storedPosition);
    clockElement.style.left = left;
    clockElement.style.top = top;
  }

  // Function to handle drag events
  function handleDrag(event) {
    const newX = event.clientX - offsetX;
    const newY = event.clientY - offsetY;
    // Limit vertical movement to maintain aspect ratio
    if (newY >= 0 && newY + clockElement.offsetHeight <= window.innerHeight) {
      clockElement.style.left = newX + 'px';
      clockElement.style.top = newY + 'px';
      // Save new position to local storage
      localStorage.setItem('wazeEditorClockPosition', JSON.stringify({ left: clockElement.style.left, top: clockElement.style.top }));
    }
  }

  // Function to start dragging
  function startDrag(event) {
    offsetX = event.clientX - clockElement.getBoundingClientRect().left;
    offsetY = event.clientY - clockElement.getBoundingClientRect().top;
    window.addEventListener('mousemove', handleDrag);
    window.addEventListener('mouseup', stopDrag);
  }

  // Function to stop dragging
  function stopDrag() {
    window.removeEventListener('mousemove', handleDrag);
    window.removeEventListener('mouseup', stopDrag);
  }

  // Variables to store offset during drag
  let offsetX, offsetY;

  // Make clock draggable
  clockElement.addEventListener('mousedown', startDrag);

  // Update clock every second
  setInterval(() => {
    const date = new Date();
    const hours = date.getHours().toString().padStart(2, '0');
    const minutes = date.getMinutes().toString().padStart(2, '0');
    // Remove seconds from the clock display
    clockElement.textContent = `${hours}:${minutes}`;
  }, 1000);

  // Append clock element to the body
  document.body.appendChild(clockElement);
})();