JavaScript – 水色（仮）

2024年5月4日2024年5月4日

Carousel Function

/**
 * カルーセルを操作する関数
 * Function to control the carousel
 * @param {object} params パラメーターオブジェクト // Parameters object
 */
function carrusel(params) {
    params = {
        ...{
            id: 'carrusel',  // カルーセルのID // ID of the carousel
            waitDuration: 3000,  // 待機時間（ミリ秒） // Wait duration (milliseconds)
            animationDuration: 300,  // アニメーションの時間（ミリ秒） // Animation duration (milliseconds)
            showIndicator: true,  // インジケーターを表示するかどうか // Whether to show indicators
            enableIndicatorEvent: true,  // インジケーターのイベントを有効にするかどうか // Whether to enable indicator events
            indicatorEventTypeQuick: false,  // インジケーターのイベントの種類を Quick にするかどうか // Whether to enable indicator events type is quick motion
            showChangeContentButton: true,  // コンテンツ変更ボタンを表示するかどうか // Whether to show content change buttons
        }, ...params
    };

    const list = document.querySelector('#' + params.id + ' .sliders');
    const lis = list.querySelectorAll('li');
    const countLi = lis.length;
    const centerIndex = parseInt(countLi / 2);
    const isEven = countLi % 2 == 0;

    let firstLi, lastLi, cloneHeadLi, cloneEndLi;
    let width, maxWidth;
    let animating = false;

    const btnContainerStyleDisplay = document.querySelector('#' + params.id + ' .btn-container').style.display;
    const indicatorsStyleDisplay = document.querySelector('#' + params.id + ' .indicators').style.display;

    if (isEven) {
        // 最後の li を複製して先頭に追加して奇数個にする
        // Duplicate the last li and add it to the beginning to make it odd
        const lastLi = list.querySelector('li:last-child');
        const cloneLastLi = lastLi.cloneNode(true); // 複製を作成 // Create a clone
        list.insertBefore(cloneLastLi, list.firstElementChild); // 先頭に複製を追加 // Add clone to the beginning
    }

    function showChangeContentButton(b) {
        let v = btnContainerStyleDisplay;
        if (!b) { v = 'none'; }
        document.querySelector('#' + params.id + ' .btn-container').style.display = v;
    }

    showChangeContentButton(params.showChangeContentButton);

    function showIndicator(b) {
        let v = indicatorsStyleDisplay;
        if (!b) { v = 'none'; }
        document.querySelector('#' + params.id + ' .indicators').style.display = v;
    }

    showIndicator(params.showIndicator);

    let startTimer;
    // 開始を一時停止するためのフラグ
    // Flag to temporarily pause the start
    let animationPaused = false;

    // マウスが要素に入ったときの処理
    // Processing when the mouse enters the element
    list.addEventListener('mouseenter', () => {
        clearTimeout(startTimer);
        animationPaused = true;
    });

    // マウスが要素から離れたときの処理
    // Processing when the mouse leaves the element
    list.addEventListener('mouseleave', () => {
        animationPaused = false;
        start();
    });

    // 前へボタン
    // Previous button
    document.querySelector('#' + params.id + ' .prevBtn').addEventListener('click', () => {
        if (animating) return;

        animationPaused = true;
        clearTimeout(startTimer);
        // 逆方向のアニメーションを開始 // Start animation in reverse direction
        animateReverseMargin();
    });

    // 次へボタン
    // Next button
    document.querySelector('#' + params.id + ' .nextBtn').addEventListener('click', () => {
        if (animating) return;

        animationPaused = true;
        clearTimeout(startTimer);
        animateMargin();
    });

    const indicatorsContainer = document.querySelector('#' + params.id + ' .indicators');

    // ドットインジケーターを生成する関数
    // Function to create dot indicators
    function createIndicators() {
        for (let i = 0; i < countLi; i++) {
            lis[i].setAttribute('index', i);

            const indicator = document.createElement('span');
            indicator.classList.add('indicator');
            indicator.setAttribute('data-index', i);
            indicatorsContainer.appendChild(indicator);
        }
    }

    // アクティブなインジケーターを更新する関数
    // Function to update active indicators
    function updateIndicators() {
        const lis = list.querySelectorAll('li');
        const activeIndex = lis[centerIndex].getAttribute('index');
        const indicators = document.querySelectorAll('#' + params.id + ' .indicator');
        indicators.forEach((indicator, index) => {
            if (index == activeIndex) {
                indicator.classList.add('active');
            } else {
                indicator.classList.remove('active');
            }
        });
    }

    // インジケーターをクリックしたときのイベントリスナー 1
    // Event listener 1 for clicking on indicators
    if (params.enableIndicatorEvent && params.indicatorEventTypeQuick) {
        indicatorsContainer.addEventListener('click', (event) => {
            if (animating) return;

            if (event.target.classList.contains('indicator')) {
                animationPaused = true;
                const index = parseInt(event.target.getAttribute('data-index'));
                for (let i = 0; i < countLi; i++) {
                    // 先頭のli要素を取得 // Get the first li element
                    if (isEven) {
                        firstLi = list.querySelector('li:nth-child(2)');
                    } else {
                        firstLi = list.querySelector('li:first-child');
                    }
                    lastLi = list.removeChild(firstLi);
                    list.appendChild(lastLi);
                    let lis = list.querySelectorAll('li');
                    let activeIndex = lis[centerIndex].getAttribute('index');
                    if (index == activeIndex) { break; }
                }
                updateIndicators();
            }
        });
    }

    // インジケーターをクリックしたときのイベントリスナー 2
    // Event listener 2 for clicking on indicators
    if (params.enableIndicatorEvent && !params.indicatorEventTypeQuick) {
        indicatorsContainer.addEventListener('click', (event) => {
            if (animating) return;

            if (event.target.classList.contains('indicator')) {
                clearTimeout(startTimer);
                animationPaused = true;
                const index = parseInt(event.target.getAttribute('data-index'));
                const lis = list.querySelectorAll('li');
                const activeIndex = lis[centerIndex].getAttribute('index');
                let l = index - activeIndex;
                if (l == 0) { return; }
                if (l < 0) {
                    l = countLi + l;
                }
                async function moveNext() {
                    if (animating) {
                        return;
                    }
                    await animateMargin();
                    await delay(params.animationDuration * 2);
                    l--;
                    if (l) {
                        moveNext();
                    }
                }
                moveNext();
            }
        });
    }

    // .sliders 内の最初と最後の <li> 要素がはみ出すことなく収まっているかどうかを確認する関数
    // Check if the first and last <li> elements in .sliders fit together without overflowing
    function isCarouselInViewport() {
        const carousel = document.getElementById(params.id);
        if (!carousel) {
            console.error('Carousel element not found.');
            return false;
        }

        const sliders = carousel.querySelector('.sliders');
        if (!sliders) {
            console.error('Sliders element not found within the carousel.');
            return false;
        }

        const firstLi = sliders.querySelector('li:first-child');
        const lastLi = sliders.querySelector('li:last-child');

        const rect = sliders.getBoundingClientRect();
        const firstLiRect = firstLi.getBoundingClientRect();
        const lastLiRect = lastLi.getBoundingClientRect();

        if (firstLiRect.left < rect.left || lastLiRect.right > rect.right) {
            return false;
        }

        return true;
    }

    // margin を変更してアニメーション
    // Animate by changing the margin
    async function animateMargin() {
        if (isCarouselInViewport()) {
            start();
            return;
        }

        animating = true;
        clearTimeout(startTimer);

        // 先頭のli要素を取得 // Get the first li element
        if (isEven) {
            firstLi = list.querySelector('li:nth-child(2)');
        } else {
            firstLi = list.querySelector('li:first-child');
        }

        // 要素の幅を取得 // Get the width of the element
        width = firstLi.offsetWidth; // 要素の幅（border と padding を含む）
        maxWidth = width * -2;

        // 先頭のli要素のクローンを作成 // Create a clone of the first li element
        // アニメーションの設定 // Animation settings
        cloneEndLi = firstLi.cloneNode(true);

        cloneHeadLi = cloneEndLi.cloneNode(true); // 複製を作成 // Create a clone
        cloneHeadLi.style.marginLeft = 0;

        list.appendChild(cloneEndLi); // 末尾に追加 // Add to the end
        list.insertBefore(cloneHeadLi, list.firstElementChild); // 先頭に追加 // Add to the beginning

        // 先頭のli要素のアニメーション // Animation of the first li element
        requestAnimationFrame(cloneHeadLiAnimation);
    }

    // 逆方向のアニメーションを開始 // Start animation in reverse direction
    function animateReverseMargin() {
        if (isCarouselInViewport()) {
            return;
        }

        animating = true;
        clearTimeout(startTimer);

        // 最後のli要素を取得 // Get the last li element
        lastLi = list.querySelector('li:last-child');
        // 要素の幅を取得 // Get the width of the element
        width = lastLi.offsetWidth; // 要素の幅（border と padding を含む）

        // 最後のli要素のクローンを作成 // Create a clone of the last li element
        // アニメーションの設定 // Animation settings
        cloneEndLi = lastLi.cloneNode(true);
        cloneEndLi.style.marginRight = 0;

        cloneHeadLi = cloneEndLi.cloneNode(true); // 複製を作成 // Create a clone

        list.appendChild(cloneEndLi); // 末尾に追加 // Add to the end
        if (isEven) {
            // 2つ目に挿入 // Insert as the second element
            const secondChild = list.children[1]; // インデックス1の子要素を取得 // Get the child element at index 1
            list.insertBefore(cloneHeadLi, secondChild);
        } else {
            list.insertBefore(cloneHeadLi, list.firstElementChild); // 先頭に追加 // Add to the beginning
        }

        // 最後のli要素のアニメーション // Animation of the last li element
        requestAnimationFrame(reverseCloneEndLiAnimation);
    }

    let animationStartTime = 0;
    function calc(timestamp) {
        if (animationStartTime == 0) {
            animationStartTime = timestamp;
        }
        const elapsed = timestamp - animationStartTime;

        const pxPerMs = maxWidth / params.animationDuration; // rate
        let l = pxPerMs * elapsed;
        // console.log('elapsed', elapsed, 'pxPerMs', pxPerMs, 'l', l + 'px > ', max);

        if (l < maxWidth) {
            l = maxWidth;
        }
        return l;
    }

    // 最後のli要素のアニメーション // Animation of the last li element
    async function cloneHeadLiAnimation(timestamp) {
        const l = calc(timestamp);
        cloneHeadLi.style.marginLeft = l + 'px';

        if (l > maxWidth) {
            requestAnimationFrame(cloneHeadLiAnimation);
        } else {
            animationStartTime = 0;
            list.removeChild(cloneHeadLi);
            list.removeChild(firstLi);
            animating = false;
            start();
        }
    }

    // 最後のli要素の逆方向のアニメーション // Reverse animation of the last li element
    async function reverseCloneEndLiAnimation(timestamp) {
        const l = calc(timestamp);
        cloneEndLi.style.marginRight = l + 'px';

        if (l > maxWidth) {
            requestAnimationFrame(reverseCloneEndLiAnimation);
        } else {
            animationStartTime = 0;
            list.removeChild(cloneEndLi);
            list.removeChild(lastLi);
            animating = false;
            start();
        }
    }

    // アニメーションループ // Animation loop
    function start() {
        if (animating) return;

        // インジケーターを更新 // Update the indicators
        updateIndicators();

        if (isCarouselInViewport()) {
            showChangeContentButton(false);
            showIndicator(false);
        } else {
            showChangeContentButton(true);
            showIndicator(true);
        }

        // アニメーションが一時停止していたら何もしない // If animation is paused, do nothing
        if (animationPaused) return;

        startTimer = setTimeout(() => {
            animateMargin();
        }, params.waitDuration);
    }

    function delay(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }

    // 開始 // Start
    // ドットインジケーターを生成 // Create dot indicators
    createIndicators();
    start();
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

/**

* カルーセルを操作する関数

* Function to control the carousel

* @param {object} params パラメーターオブジェクト // Parameters object

function carrusel(params) {

params = {

...{

id: 'carrusel', // カルーセルのID // ID of the carousel

waitDuration: 3000, // 待機時間（ミリ秒） // Wait duration (milliseconds)

animationDuration: 300, // アニメーションの時間（ミリ秒） // Animation duration (milliseconds)

showIndicator: true, // インジケーターを表示するかどうか // Whether to show indicators

enableIndicatorEvent: true, // インジケーターのイベントを有効にするかどうか // Whether to enable indicator events

indicatorEventTypeQuick: false, // インジケーターのイベントの種類を Quick にするかどうか // Whether to enable indicator events type is quick motion

showChangeContentButton: true, // コンテンツ変更ボタンを表示するかどうか // Whether to show content change buttons

}, ...params

};

const list = document.querySelector('#' + params.id + ' .sliders');

const lis = list.querySelectorAll('li');

const countLi = lis.length;

const centerIndex = parseInt(countLi / 2);

const isEven = countLi % 2 == 0;

let firstLi, lastLi, cloneHeadLi, cloneEndLi;

let width, maxWidth;

let animating = false;

const btnContainerStyleDisplay = document.querySelector('#' + params.id + ' .btn-container').style.display;

const indicatorsStyleDisplay = document.querySelector('#' + params.id + ' .indicators').style.display;

if (isEven) {

// 最後の li を複製して先頭に追加して奇数個にする

// Duplicate the last li and add it to the beginning to make it odd

const lastLi = list.querySelector('li:last-child');

const cloneLastLi = lastLi.cloneNode(true); // 複製を作成 // Create a clone

list.insertBefore(cloneLastLi, list.firstElementChild); // 先頭に複製を追加 // Add clone to the beginning

}

function showChangeContentButton(b) {

let v = btnContainerStyleDisplay;

if (!b) { v = 'none'; }

document.querySelector('#' + params.id + ' .btn-container').style.display = v;

}

showChangeContentButton(params.showChangeContentButton);

function showIndicator(b) {

let v = indicatorsStyleDisplay;

if (!b) { v = 'none'; }

document.querySelector('#' + params.id + ' .indicators').style.display = v;

}

showIndicator(params.showIndicator);

let startTimer;

// 開始を一時停止するためのフラグ

// Flag to temporarily pause the start

let animationPaused = false;

// マウスが要素に入ったときの処理

// Processing when the mouse enters the element

list.addEventListener('mouseenter', () => {

clearTimeout(startTimer);

animationPaused = true;

});

// マウスが要素から離れたときの処理

// Processing when the mouse leaves the element

list.addEventListener('mouseleave', () => {

animationPaused = false;

start();

});

// 前へボタン

// Previous button

document.querySelector('#' + params.id + ' .prevBtn').addEventListener('click', () => {

if (animating) return;

animationPaused = true;

clearTimeout(startTimer);

// 逆方向のアニメーションを開始 // Start animation in reverse direction

animateReverseMargin();

});

// 次へボタン

// Next button

document.querySelector('#' + params.id + ' .nextBtn').addEventListener('click', () => {

if (animating) return;

animationPaused = true;

clearTimeout(startTimer);

animateMargin();

});

const indicatorsContainer = document.querySelector('#' + params.id + ' .indicators');

// ドットインジケーターを生成する関数

// Function to create dot indicators

function createIndicators() {

for (let i = 0; i < countLi; i++) {

lis[i].setAttribute('index', i);

const indicator = document.createElement('span');

indicator.classList.add('indicator');

indicator.setAttribute('data-index', i);

indicatorsContainer.appendChild(indicator);

}

// アクティブなインジケーターを更新する関数

// Function to update active indicators

function updateIndicators() {

const lis = list.querySelectorAll('li');

const activeIndex = lis[centerIndex].getAttribute('index');

const indicators = document.querySelectorAll('#' + params.id + ' .indicator');

indicators.forEach((indicator, index) => {

if (index == activeIndex) {

indicator.classList.add('active');

} else {

indicator.classList.remove('active');

}

});

}

// インジケーターをクリックしたときのイベントリスナー 1

// Event listener 1 for clicking on indicators

if (params.enableIndicatorEvent && params.indicatorEventTypeQuick) {

indicatorsContainer.addEventListener('click', (event) => {

if (animating) return;

if (event.target.classList.contains('indicator')) {

animationPaused = true;

const index = parseInt(event.target.getAttribute('data-index'));

for (let i = 0; i < countLi; i++) {

// 先頭のli要素を取得 // Get the first li element

if (isEven) {

firstLi = list.querySelector('li:nth-child(2)');

} else {

firstLi = list.querySelector('li:first-child');

}

lastLi = list.removeChild(firstLi);

list.appendChild(lastLi);

let lis = list.querySelectorAll('li');

let activeIndex = lis[centerIndex].getAttribute('index');

if (index == activeIndex) { break; }

}

updateIndicators();

}

});

}

// インジケーターをクリックしたときのイベントリスナー 2

// Event listener 2 for clicking on indicators

if (params.enableIndicatorEvent && !params.indicatorEventTypeQuick) {

indicatorsContainer.addEventListener('click', (event) => {

if (animating) return;

if (event.target.classList.contains('indicator')) {

clearTimeout(startTimer);

animationPaused = true;

const index = parseInt(event.target.getAttribute('data-index'));

const lis = list.querySelectorAll('li');

const activeIndex = lis[centerIndex].getAttribute('index');

let l = index - activeIndex;

if (l == 0) { return; }

if (l < 0) {

l = countLi + l;

}

async function moveNext() {

if (animating) {

return;

}

await animateMargin();

await delay(params.animationDuration * 2);

l--;

if (l) {

moveNext();

}

moveNext();

}

});

}

// .sliders 内の最初と最後の <li> 要素がはみ出すことなく収まっているかどうかを確認する関数

// Check if the first and last <li> elements in .sliders fit together without overflowing

function isCarouselInViewport() {

const carousel = document.getElementById(params.id);

if (!carousel) {

console.error('Carousel element not found.');

return false;

}

const sliders = carousel.querySelector('.sliders');

if (!sliders) {

console.error('Sliders element not found within the carousel.');

return false;

}

const firstLi = sliders.querySelector('li:first-child');

const lastLi = sliders.querySelector('li:last-child');

const rect = sliders.getBoundingClientRect();

const firstLiRect = firstLi.getBoundingClientRect();

const lastLiRect = lastLi.getBoundingClientRect();

if (firstLiRect.left < rect.left || lastLiRect.right > rect.right) {

return false;

}

return true;

}

// margin を変更してアニメーション

// Animate by changing the margin

async function animateMargin() {

if (isCarouselInViewport()) {

start();

return;

}

animating = true;

clearTimeout(startTimer);

// 先頭のli要素を取得 // Get the first li element

if (isEven) {

firstLi = list.querySelector('li:nth-child(2)');

} else {

firstLi = list.querySelector('li:first-child');

}

// 要素の幅を取得 // Get the width of the element

width = firstLi.offsetWidth; // 要素の幅（border と padding を含む）

maxWidth = width * -2;

// 先頭のli要素のクローンを作成 // Create a clone of the first li element

// アニメーションの設定 // Animation settings

cloneEndLi = firstLi.cloneNode(true);

cloneHeadLi = cloneEndLi.cloneNode(true); // 複製を作成 // Create a clone

cloneHeadLi.style.marginLeft = 0;

list.appendChild(cloneEndLi); // 末尾に追加 // Add to the end

list.insertBefore(cloneHeadLi, list.firstElementChild); // 先頭に追加 // Add to the beginning

// 先頭のli要素のアニメーション // Animation of the first li element

requestAnimationFrame(cloneHeadLiAnimation);

}

// 逆方向のアニメーションを開始 // Start animation in reverse direction

function animateReverseMargin() {

if (isCarouselInViewport()) {

return;

}

animating = true;

clearTimeout(startTimer);

// 最後のli要素を取得 // Get the last li element

lastLi = list.querySelector('li:last-child');

// 要素の幅を取得 // Get the width of the element

width = lastLi.offsetWidth; // 要素の幅（border と padding を含む）

// 最後のli要素のクローンを作成 // Create a clone of the last li element

// アニメーションの設定 // Animation settings

cloneEndLi = lastLi.cloneNode(true);

cloneEndLi.style.marginRight = 0;

cloneHeadLi = cloneEndLi.cloneNode(true); // 複製を作成 // Create a clone

list.appendChild(cloneEndLi); // 末尾に追加 // Add to the end

if (isEven) {

// 2つ目に挿入 // Insert as the second element

const secondChild = list.children[1]; // インデックス1の子要素を取得 // Get the child element at index 1

list.insertBefore(cloneHeadLi, secondChild);

} else {

list.insertBefore(cloneHeadLi, list.firstElementChild); // 先頭に追加 // Add to the beginning

}

// 最後のli要素のアニメーション // Animation of the last li element

requestAnimationFrame(reverseCloneEndLiAnimation);

}

let animationStartTime = 0;

function calc(timestamp) {

if (animationStartTime == 0) {

animationStartTime = timestamp;

}

const elapsed = timestamp - animationStartTime;

const pxPerMs = maxWidth / params.animationDuration; // rate

let l = pxPerMs * elapsed;

// console.log('elapsed', elapsed, 'pxPerMs', pxPerMs, 'l', l + 'px > ', max);

if (l < maxWidth) {

l = maxWidth;

}

return l;

}

// 最後のli要素のアニメーション // Animation of the last li element

async function cloneHeadLiAnimation(timestamp) {

const l = calc(timestamp);

cloneHeadLi.style.marginLeft = l + 'px';

if (l > maxWidth) {

requestAnimationFrame(cloneHeadLiAnimation);

} else {

animationStartTime = 0;

list.removeChild(cloneHeadLi);

list.removeChild(firstLi);

animating = false;

start();

}

// 最後のli要素の逆方向のアニメーション // Reverse animation of the last li element

async function reverseCloneEndLiAnimation(timestamp) {

const l = calc(timestamp);

cloneEndLi.style.marginRight = l + 'px';

if (l > maxWidth) {

requestAnimationFrame(reverseCloneEndLiAnimation);

} else {

animationStartTime = 0;

list.removeChild(cloneEndLi);

list.removeChild(lastLi);

animating = false;

start();

}

// アニメーションループ // Animation loop

function start() {

if (animating) return;

// インジケーターを更新 // Update the indicators

updateIndicators();

if (isCarouselInViewport()) {

showChangeContentButton(false);

showIndicator(false);

} else {

showChangeContentButton(true);

showIndicator(true);

}

// アニメーションが一時停止していたら何もしない // If animation is paused, do nothing

if (animationPaused) return;

startTimer = setTimeout(() => {

animateMargin();

}, params.waitDuration);

}

function delay(ms) {

return new Promise(resolve => setTimeout(resolve, ms));

}

// 開始 // Start

// ドットインジケーターを生成 // Create dot indicators

createIndicators();

start();

}

Screenshot:

表示試験 / Try displaying

2023年7月11日2023年7月11日

Air Datepicker Japanese and Cleave.js and React.js

/**
 * datepicker function
 * @param {string} selector   : "#id", ".className"
 * @param {function} callback : function (event) { setRecord({ ...record, Date: event.formattedDate }); }, record.Date);
 * @param {string} dateString : "2023-07-11"
 *
 * https://air-datepicker.com/docs
 * https://github.com/t1m0n/air-datepicker/tree/v3/dist
 *
Example:
// Air Datepicker and Cleave.js and React.js
const e = React.createElement;
e(Cleave, {
    options: { date: true, delimiter: '-', datePattern: ['Y', 'm', 'd'] },
    id: "date",
    value: record.Date,
    onChange: e => { setRecord({ ...record, Date: e.target.value }); },
    onClick: e => {
        datepicker("#date", function (event) { setRecord({ ...record, Date: event.formattedDate }); }, record.Date);
    },
    // onFocus: ...
    placeholder: "YYYY-MM-DD",
    style: { gridColumn: "span 2" },
}),
 */
function datepicker(selector, callback, dateString) {
    let obj = new AirDatepicker(selector, {
        // startDate: record.Date,
        locale: {
            days: ['日', '月', '火', '水', '木', '金', '土'],
            daysShort: ['日', '月', '火', '水', '木', '金', '土'],
            daysMin: ['日', '月', '火', '水', '木', '金', '土'],
            months: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            monthsShort: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            today: '今日',
            clear: 'クリア',
            // dateFormat: 'yyyy-mm-dd',
            dateFormat: 'yyyy-MM-dd',
            // timeFormat: 'hh:ii aa',
            timeFormat: 'HH:mm',
            firstDay: 0
        },
        position: 'top center',
        dateFormat: "yyyy-MM-dd",
        range: false,
        timepicker: false,
        // multipleDates: true,
        // Title format:
        navTitles: {
            // days: 'MM, <i>yyyy</i>',
            days: 'yyyy 年 MM 月',
            months: 'yyyy',
            years: 'yyyy1 - yyyy2'
        },
        onSelect: function (event) {
            if (event) {
                callback(event);
            }
        },
        onHide: function (event) {
            if (event) {
                obj.destroy();
                obj = null;
            }
        },
    });

    const regex = /^(\d{4})-(\d{2})-(\d{2})$/;
    if (regex.test(dateString)) {
        const matches = dateString.match(regex);
        obj.selectDate(new Date(Number(matches[1]), Number(matches[2]) - 1, Number(matches[3])));
    }
    obj.show();
}

/**

* datepicker function

* @param {string} selector : "#id", ".className"

* @param {function} callback : function (event) { setRecord({ ...record, Date: event.formattedDate }); }, record.Date);

* @param {string} dateString : "2023-07-11"

* https://air-datepicker.com/docs

* https://github.com/t1m0n/air-datepicker/tree/v3/dist

Example:

// Air Datepicker and Cleave.js and React.js

const e = React.createElement;

e(Cleave, {

options: { date: true, delimiter: '-', datePattern: ['Y', 'm', 'd'] },

id: "date",

value: record.Date,

onChange: e => { setRecord({ ...record, Date: e.target.value }); },

onClick: e => {

datepicker("#date", function (event) { setRecord({ ...record, Date: event.formattedDate }); }, record.Date);

// onFocus: ...

placeholder: "YYYY-MM-DD",

style: { gridColumn: "span 2" },

}),

function datepicker(selector, callback, dateString) {

let obj = new AirDatepicker(selector, {

// startDate: record.Date,

locale: {

days: ['日', '月', '火', '水', '木', '金', '土'],

daysShort: ['日', '月', '火', '水', '木', '金', '土'],

daysMin: ['日', '月', '火', '水', '木', '金', '土'],

months: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],

monthsShort: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],

today: '今日',

clear: 'クリア',

// dateFormat: 'yyyy-mm-dd',

dateFormat: 'yyyy-MM-dd',

// timeFormat: 'hh:ii aa',

timeFormat: 'HH:mm',

firstDay: 0

position: 'top center',

dateFormat: "yyyy-MM-dd",

range: false,

timepicker: false,

// multipleDates: true,

// Title format:

navTitles: {

// days: 'MM, <i>yyyy</i>',

days: 'yyyy 年 MM 月',

months: 'yyyy',

years: 'yyyy1 - yyyy2'

onSelect: function (event) {

if (event) {

callback(event);

}

onHide: function (event) {

if (event) {

obj.destroy();

obj = null;

}

});

const regex = /^(\d{4})-(\d{2})-(\d{2})$/;

if (regex.test(dateString)) {

const matches = dateString.match(regex);

obj.selectDate(new Date(Number(matches[1]), Number(matches[2]) - 1, Number(matches[3])));

}

obj.show();

}

2023年4月18日2023年4月18日

React Hooks で Input Float してみる / Try Input Float with React Hooks

/**
 * Input Float numeric Plain React Hooks function
 *
 * props:
 *   value
 *   numeralDecimalScale
 *   onChange
 *   id
 *   className
 *   style
 */
function InputFloat(props) {
    const e = React.createElement;

    const refInput = React.useRef(null);

    const numeralDecimalScale = React.useRef(props.numeralDecimalScale ? props.numeralDecimalScale : 2);
    const SaveValue = React.useRef(format(props.value));
    const Start = React.useRef(0);
    const End = React.useRef(0);

    const [value, setValue] = React.useState({ value: format(props.value) });

    // Prop value changed
    React.useEffect(() => {
        if (props == undefined || props.value === undefined) { return; }
        // console.log("change props", props, props.value);

        if (float(props.value) == float(SaveValue.current)) {
            // console.log("not change props.value", props, props.value);
            return;
        }

        const v = format(props.value);
        setV(v, 0, 0);
        setValue({ value: v });
    }, [props.value]);

    // Set cursor position after change state value
    React.useEffect(() => {
        refInput.current.setSelectionRange(Start.current, End.current);
    }, [value]);

    function setV(v, start, end) {
        // console.log("setV", v, start, end);
        SaveValue.current = v;
        Start.current = start;
        End.current = end;
    }

    /**
     * Using:
     *  agh.sprintf.js
     *  https://github.com/akinomyoga/agh.sprintf.js
     */
    function format(v) {
        // console.log("format from", v);
        v += "";
        const sign = v.indexOf("-") >= 0;
        const f = float(v);
        v = sprintf("%'0.0" + numeralDecimalScale.current + "f", f);
        if (sign && f == 0) {
            v = "-" + v;
        }
        return v;
    }

    // convert to float
    function float(v) {
        v += "";
        const dot = dotPosition(v);
        let f = parseFloat(v.substring(0, dot + numeralDecimalScale.current + 1).replaceAll(",", ""));
        if (isNaN(f)) { f = 0; }
        return f;
    }

    function dotPosition(v) {
        v += "";
        let dot = v.indexOf(".");
        if (dot == -1) { dot = v.length; }
        return dot;
    }

    /**
     * position より前の位置にある , の数を数える
     * Count the number of "," before the position of v
     */
    function countComma(v, position) {
        const targetStr = ",";
        return (v.substring(0, position).match(new RegExp(targetStr, "g")) || []).length;
    }

    function replace(src, position, s) {
        return format(src.substring(0, position) + s + src.substring(position + s.length));
    }

    function insert(src, position, s) {
        return format(src.substring(0, position) + s + src.substring(position));
    }

    // src の position 位置から n 文字削除
    // Delete n characters from position in src
    function remove(src, position, n) {
        return src.substring(0, position) + src.substring(position + n);
    }

    function handleKeyDown(e) {
        // console.log("handleKeyDown", e);
        // console.log("Key pressed: ", e.key);
        // console.log("Key pressed: ", e.which);

        let v = e.target.value;
        let c = e.key;
        let start = refInput.current.selectionStart;
        let end = refInput.current.selectionEnd;

        if (c == "Process" || c == "Control") {
            return false;
        }

        // console.log("c", c, "start", start, "end", end, "dom", v, "v", v);

        // Selected
        if (start != end) {
            if ((c >= "0" || c <= "9") || c == "-") {
                const co1 = countComma(v, start);
                v = remove(v, start, end - start);
                v = insert(v, start, c);
                v = format(v);
                const co2 = countComma(v, start - 1);
                const co = co1 - co2 - 1;
                setV(v, start - co, start - co);
                return;
            }
            // No change
            setV(v, start, end);
            return;
        }

        const dot = dotPosition(v);

        // console.log("c", c, "start", start, "end", end, "dot", dot, "dom", v, "v", v);

        if (c == "Delete") {
            const del = v.substring(start + 1, start);
            // console.log("del", del);
            if (del == ".") {
                // don't delete float point dot
                // No change
                setV(v, start, end);
                return;
            }

            if (start > dot) { // decimal part
                v = replace(v, start, "0");
                setV(v, start + 1, end + 1);
                return;
            }

            if (del == ",") {
                const co1 = countComma(v, start + 1);
                v = remove(v, start + 1, 1);
                v = format(v);
                const co2 = countComma(v, start);
                const co = 1 - (co1 - co2);
                setV(v, start + co, end + co);
                return;
            }

            const co1 = countComma(v, start);
            v = remove(v, start, 1);
            v = format(v);
            const co2 = countComma(v, start - 1);
            const co = (co1 - co2);
            setV(v, start - co, end - co);
            return;
        }

        if (c == "Backspace") {
            if (dot + 1 == start) {
                // don't delete float point dot
                // No change
                setV(v, start - 1, end - 1);
                return;
            }

            if (start > dot) { // decimal part
                v = replace(v, start - 1, "0");
                setV(v, start - 1, end - 1);
                return;
            }

            // real part
            const del = v.substring(start - 1, start);
            let cursorBack = 1;
            if (del == ",") {
                start--;
                end--;
                cursorBack = 2;
            }
            const co1 = countComma(v, start);
            v = remove(v, start - 1, 1);
            v = format(v);
            const co2 = countComma(v, start - 1);
            const co = cursorBack + (co1 - co2);
            setV(v, start - co, end - co);
            return;
        }

        // Input text ------------------

        // console.log("c", c, "dot", dot, "start", start, "end", end, "dom", v, "v", v);

        if (c == ".") {
            // No change and Move cursor
            setV(v, dot + 1, dot + 1);
            refInput.current.setSelectionRange(dot + 1, dot + 1);
            return;
        }

        if (c == "-") {
            if (float(v) >= 0) {
                v = format("-" + v);
                setV(v, start + 1, end + 1);
            } else {
                // No change
                setV(v, start, end);
            }
            return;
        }

        if (c == "+") {
            if (float(v) < 0) {
                v = format(v.replace("-", ""));
                setV(v, start - 1, end - 1);
            } else {
                // No change
                setV(v, start, end);
            }
            return;
        }

        if (c == "0") {
            if (start > dot) { // decimal part
                v = replace(v, start, c);
                setV(v, start + 1, end + 1);
                return;
            }
            v = insert(v, start, c);
            setV(v, start + 1, end + 1);
            return;
        }

        if (c >= "1" && c <= "9") {
            if (start > dot) { // decimal part
                v = replace(v, start, c);
                setV(v, start + 1, end + 1);
                return;
            }

            // if real part is 0
            if (parseInt(float(SaveValue.current)) == 0 && start <= dot) { // |0.?? or 0|.??
                v = replace(v, dot - 1, c);
                setV(v, dot, dot);
                return;
            }

            if (start <= dot) {
                const c1 = countComma(v, start);
                v = insert(v, start, c);
                const c2 = countComma(v, start + 1);
                if (c2 > c1) {
                    start++;
                    end++;
                }
                setV(v, start + 1, end + 1);
                return;
            }
        }

        // No change
        setV(v, start, end);
    } // End of long long handleKeyDown

    // Select all text
    const handleFocus = () => {
        refInput.current.setSelectionRange(0, refInput.current.value.length);
    };

    const handleChange = (event) => {
        // console.log("handleChange");
        setValue({ value: SaveValue.current });

        // Call props.onChange
        event.target.rawValue = float(SaveValue.current);
        event.target.value = format(SaveValue.current);
        props.onChange(event);
    };

    // Render
    return e("input", {
        ref: refInput,
        id: props.id,
        className: props.className,
        style: props.style ? props.style : { textAlign: "right", imeMode: "disabled" },
        value: value.value,
        onKeyDown: e => { handleKeyDown(e); },
        onChange: e => { handleChange(e); },
        onFocus: () => { handleFocus(); },
    });
}

export default InputFloat;

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

/**

* Input Float numeric Plain React Hooks function

* props:

* value

* numeralDecimalScale

* onChange

* id

* className

* style

function InputFloat(props) {

const e = React.createElement;

const refInput = React.useRef(null);

const numeralDecimalScale = React.useRef(props.numeralDecimalScale ? props.numeralDecimalScale : 2);

const SaveValue = React.useRef(format(props.value));

const Start = React.useRef(0);

const End = React.useRef(0);

const [value, setValue] = React.useState({ value: format(props.value) });

// Prop value changed

React.useEffect(() => {

if (props == undefined || props.value === undefined) { return; }

// console.log("change props", props, props.value);

if (float(props.value) == float(SaveValue.current)) {

// console.log("not change props.value", props, props.value);

return;

}

const v = format(props.value);

setV(v, 0, 0);

setValue({ value: v });

}, [props.value]);

// Set cursor position after change state value

React.useEffect(() => {

refInput.current.setSelectionRange(Start.current, End.current);

}, [value]);

function setV(v, start, end) {

// console.log("setV", v, start, end);

SaveValue.current = v;

Start.current = start;

End.current = end;

}

/**

* Using:

* agh.sprintf.js

* https://github.com/akinomyoga/agh.sprintf.js

function format(v) {

// console.log("format from", v);

v += "";

const sign = v.indexOf("-") >= 0;

const f = float(v);

v = sprintf("%'0.0" + numeralDecimalScale.current + "f", f);

if (sign && f == 0) {

v = "-" + v;

}

return v;

}

// convert to float

function float(v) {

v += "";

const dot = dotPosition(v);

let f = parseFloat(v.substring(0, dot + numeralDecimalScale.current + 1).replaceAll(",", ""));

if (isNaN(f)) { f = 0; }

return f;

}

function dotPosition(v) {

v += "";

let dot = v.indexOf(".");

if (dot == -1) { dot = v.length; }

return dot;

}

/**

* position より前の位置にある , の数を数える

* Count the number of "," before the position of v

function countComma(v, position) {

const targetStr = ",";

return (v.substring(0, position).match(new RegExp(targetStr, "g")) || []).length;

}

function replace(src, position, s) {

return format(src.substring(0, position) + s + src.substring(position + s.length));

}

function insert(src, position, s) {

return format(src.substring(0, position) + s + src.substring(position));

}

// src の position 位置から n 文字削除

// Delete n characters from position in src

function remove(src, position, n) {

return src.substring(0, position) + src.substring(position + n);

}

function handleKeyDown(e) {

// console.log("handleKeyDown", e);

// console.log("Key pressed: ", e.key);

// console.log("Key pressed: ", e.which);

let v = e.target.value;

let c = e.key;

let start = refInput.current.selectionStart;

let end = refInput.current.selectionEnd;

if (c == "Process" || c == "Control") {

return false;

}

// console.log("c", c, "start", start, "end", end, "dom", v, "v", v);

// Selected

if (start != end) {

if ((c >= "0" || c <= "9") || c == "-") {

const co1 = countComma(v, start);

v = remove(v, start, end - start);

v = insert(v, start, c);

v = format(v);

const co2 = countComma(v, start - 1);

const co = co1 - co2 - 1;

setV(v, start - co, start - co);

return;

}

// No change

setV(v, start, end);

return;

}

const dot = dotPosition(v);

// console.log("c", c, "start", start, "end", end, "dot", dot, "dom", v, "v", v);

if (c == "Delete") {

const del = v.substring(start + 1, start);

// console.log("del", del);

if (del == ".") {

// don't delete float point dot

// No change

setV(v, start, end);

return;

}

if (start > dot) { // decimal part

v = replace(v, start, "0");

setV(v, start + 1, end + 1);

return;

}

if (del == ",") {

const co1 = countComma(v, start + 1);

v = remove(v, start + 1, 1);

v = format(v);

const co2 = countComma(v, start);

const co = 1 - (co1 - co2);

setV(v, start + co, end + co);

return;

}

const co1 = countComma(v, start);

v = remove(v, start, 1);

v = format(v);

const co2 = countComma(v, start - 1);

const co = (co1 - co2);

setV(v, start - co, end - co);

return;

}

if (c == "Backspace") {

if (dot + 1 == start) {

// don't delete float point dot

// No change

setV(v, start - 1, end - 1);

return;

}

if (start > dot) { // decimal part

v = replace(v, start - 1, "0");

setV(v, start - 1, end - 1);

return;

}

// real part

const del = v.substring(start - 1, start);

let cursorBack = 1;

if (del == ",") {

start--;

end--;

cursorBack = 2;

}

const co1 = countComma(v, start);

v = remove(v, start - 1, 1);

v = format(v);

const co2 = countComma(v, start - 1);

const co = cursorBack + (co1 - co2);

setV(v, start - co, end - co);

return;

}

// Input text ------------------

// console.log("c", c, "dot", dot, "start", start, "end", end, "dom", v, "v", v);

if (c == ".") {

// No change and Move cursor

setV(v, dot + 1, dot + 1);

refInput.current.setSelectionRange(dot + 1, dot + 1);

return;

}

if (c == "-") {

if (float(v) >= 0) {

v = format("-" + v);

setV(v, start + 1, end + 1);

} else {

// No change

setV(v, start, end);

}

return;

}

if (c == "+") {

if (float(v) < 0) {

v = format(v.replace("-", ""));

setV(v, start - 1, end - 1);

} else {

// No change

setV(v, start, end);

}

return;

}

if (c == "0") {

if (start > dot) { // decimal part

v = replace(v, start, c);

setV(v, start + 1, end + 1);

return;

}

v = insert(v, start, c);

setV(v, start + 1, end + 1);

return;

}

if (c >= "1" && c <= "9") {

if (start > dot) { // decimal part

v = replace(v, start, c);

setV(v, start + 1, end + 1);

return;

}

// if real part is 0

if (parseInt(float(SaveValue.current)) == 0 && start <= dot) { // |0.?? or 0|.??

v = replace(v, dot - 1, c);

setV(v, dot, dot);

return;

}

if (start <= dot) {

const c1 = countComma(v, start);

v = insert(v, start, c);

const c2 = countComma(v, start + 1);

if (c2 > c1) {

start++;

end++;

}

setV(v, start + 1, end + 1);

return;

}

// No change

setV(v, start, end);

} // End of long long handleKeyDown

// Select all text

const handleFocus = () => {

refInput.current.setSelectionRange(0, refInput.current.value.length);

};

const handleChange = (event) => {

// console.log("handleChange");

setValue({ value: SaveValue.current });

// Call props.onChange

event.target.rawValue = float(SaveValue.current);

event.target.value = format(SaveValue.current);

props.onChange(event);

};

// Render

return e("input", {

ref: refInput,

id: props.id,

className: props.className,

style: props.style ? props.style : { textAlign: "right", imeMode: "disabled" },

value: value.value,

onKeyDown: e => { handleKeyDown(e); },

onChange: e => { handleChange(e); },

onFocus: () => { handleFocus(); },

});

}

export default InputFloat;

ウェブ検索では見つけられなかったので作ってみたが
こんな感じいいのか？ Chrome, Edge, Firefox では動作している

動作試験：
https://memo.silverpigeon.jp/numeric/

2023年3月13日2023年3月13日

波括弧で囲って欲しいです…

ChatGPT に言ってもらったほうが説得力がある…(;_;)

2021年7月31日2021年8月10日

UTF-8 文字列を含む response.statusText を JavaScript で文字列にデコードするメモ / Decode UTF-8 string within response.statusText to string with JavaScript

PHP で statusText に日本語 UTF-8 を入れて javascript へ送り返したところ…読めない
忘れそうなのでメモ

const statusText = decodeURIComponent(escape(response.statusText));

1	const statusText = decodeURIComponent(escape(response.statusText));

element の位置やサイズを小数点以下まで取得したい時

element.getBoundingClientRect()

—