ポップアップで色を選択できるようにするガントチャートをWebアプリとしてつくる(10)

チャートのバーの色は青で固定でしたが、今回はこれを変更できるようにします。まずポップアップで色を選択するためのスライドバーとセレクトボックスを表示させます。

⇒ 動作確認はこちらから
ただし削除されては困るのでパスワードをかけています。そのため削除と編集の操作はできません。

まずHTML部分を示します。

template/edit.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>編集</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    #data { display: none; }   /* 非表示 */
    #chart-name-label {margin-left: 20px; }
    #chart-name {margin-right: 20px; }
    #add-category {margin-right: 20px; }
    #to-reflect, #cange-password {margin-right: 20px; }
    #delete-chart { float: right; }

    /* 追加した部分 */
    #popup-color {
        width : 300px;
        position : fixed;
        top: 10px;
        left: 10px;
        display: none;
        background-color: white;
    }

    #hide-popup-color {
        margin-top: 20px;
        margin-bottom: 20px;
        font-size: 30px;
        cursor: pointer;
    }

    .color-slideBar {
        width : 300px;

    }

    #color-info {
        margin-bottom: 20px;
    }

    #color-box {
        width:100px;
        height:50px;
        background-color:#ddd;
        margin-top: 20px;
    }
    /* 追加ここまで */

</style>
</head>

<body>
    <p id="data">{DATA}</p>

    <label id = "chart-name-label" style="cursor: move;">チャート名：</label>
    <input id = "chart-name" type="text" size="24" value = "{PAGE_TITLE}">

    <button id = "add-category" onclick="AddCategory()">カテゴリ追加</button>
    <button id = "to-reflect" onclick="ToReflect()">反映</button>
    <button id = "cange-password" onclick="CangePassword()">パスワード変更</button>
    <button id = "delete-chart" onclick="DeleteChart()">チャートを削除</button>

    <div id="categorys"></div>

    <div id="popup-calendar">
        <div id="close-btn">?</div>
        <div id="next-prev-button">
            <button id="prev" onclick="Prev()">前月</button>
            <button id="next" onclick="Next()">次月</button>
        </div>
        <h1 id="calendar-header"></h1>
        <div id="calendar"></div>
    </div>

    <!-- 追加した部分 -->
    <div id = "popup-color">
        <div id ="hide-popup-color" onclick="HidePopupColor()">×</div>
        <input type="range" id="red" class="color-slideBar">
        <input type="range" id="green" class="color-slideBar">
        <input type="range" id="blue" class="color-slideBar">
        <div id = "color-info">
            <span id = "red-text">Red = 0</span>　<span id = "green-text">Green = 0</span>　<span id = "blue-text">Blue = 0</span>
        </div>
        <div>
            <select id ="color-select">
                <option hidden>色を選択できます</option>
                <option value="rgb(255, 0, 0)" style="color:rgb(255, 0, 0);">Red</option>
                <option value="rgb(0, 255, 0)" style="color:rgb(0, 255, 0);">lime</option>
                <option value="rgb(0, 0, 255)" style="color:rgb(0, 0, 255);">blue</option>
                <option value="rgb(255, 255, 0)" style="color:rgb(255, 255, 0);">yellow</option>
                <option value="rgb(0, 255, 255)" style="color:rgb(0, 255, 255);">aqua/cyan</option>
                <option value="rgb(255, 0, 255)" style="color:rgb(255, 0, 255);">fuchsia/magenta</option>
                <option value="rgb(128, 0, 0)" style="color:rgb(128, 0, 0);">maroon</option>
                <option value="rgb(0, 128, 0)" style="color:rgb(0, 128, 0);">green</option>
                <option value="rgb(0, 0, 128)" style="color:rgb(0, 0, 128);">navy</option>
                <option value="rgb(128, 128, 0)" style="color:rgb(128, 128, 0);">olive</option>
                <option value="rgb(0, 128, 128)" style="color:rgb(0, 128, 128);">teal</option>
                <option value="rgb(128, 0, 128)" style="color:rgb(128, 0, 128);">purple</option>
                <option value="rgb(255, 165, 0)" style="color:rgb(255, 165, 0);">orange</option>
            </select>
        </div>
        <div id = "color-box"></div>
        <br>
        <button onclick="ConfirmColor()">確定</button>
    </div>
    <!-- 追加ここまで -->

<script>
    // 後述
</script>

</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

<!DOCTYPE html>

<head>

<style>

#data { display: none; } /* 非表示 */

#chart-name-label {margin-left: 20px; }

#chart-name {margin-right: 20px; }

#add-category {margin-right: 20px; }

#to-reflect, #cange-password {margin-right: 20px; }

#delete-chart { float: right; }

/* 追加した部分 */

#popup-color {

width : 300px;

position : fixed;

top: 10px;

left: 10px;

display: none;

background-color: white;

}

#hide-popup-color {

margin-top: 20px;

margin-bottom: 20px;

font-size: 30px;

cursor: pointer;

}

.color-slideBar {

width : 300px;

}

#color-info {

margin-bottom: 20px;

}

#color-box {

width:100px;

height:50px;

background-color:#ddd;

margin-top: 20px;

}

/* 追加ここまで */

</style>

</head>

<body>

<label id = "chart-name-label" style="cursor: move;">チャート名：</label>

<button id = "add-category" onclick="AddCategory()">カテゴリ追加</button>

<button id = "cange-password" onclick="CangePassword()">パスワード変更</button>

<button id = "delete-chart" onclick="DeleteChart()">チャートを削除</button>

</div>

</div>

<span id = "red-text">Red = 0</span>　<span id = "green-text">Green = 0</span>　<span id = "blue-text">Blue = 0</span>

</div>

<div>

<option hidden>色を選択できます</option>

<option value="rgb(255, 255, 0)" style="color:rgb(255, 255, 0);">yellow</option>

<option value="rgb(255, 0, 255)" style="color:rgb(255, 0, 255);">fuchsia/magenta</option>

<option value="rgb(128, 0, 0)" style="color:rgb(128, 0, 0);">maroon</option>

<option value="rgb(0, 128, 0)" style="color:rgb(0, 128, 0);">green</option>

<option value="rgb(128, 128, 0)" style="color:rgb(128, 128, 0);">olive</option>

<option value="rgb(128, 0, 128)" style="color:rgb(128, 0, 128);">purple</option>

<option value="rgb(255, 165, 0)" style="color:rgb(255, 165, 0);">orange</option>

</select>

</div>

<br>

</div>

// 後述

</script>

</body>

</html>

template/edit.htmlのscriptタグ内に以下を追加します。

template/edit.htmlのscriptタグ内

let redElement = document.getElementById('red');
let greenElement = document.getElementById('green');
let blueElement = document.getElementById('blue');
let colorElement = document.getElementById('color-box');

let redTextElement = document.getElementById('red-text');
let greenTextElement = document.getElementById('green-text');
let blueTextElement = document.getElementById('blue-text');

let colorSelectElement = document.getElementById('color-select');

let clickedElement = null;

InitSlideBars(0,0,128);

let redElement = document.getElementById('red');

let greenElement = document.getElementById('green');

let blueElement = document.getElementById('blue');

let colorElement = document.getElementById('color-box');

let redTextElement = document.getElementById('red-text');

let greenTextElement = document.getElementById('green-text');

let blueTextElement = document.getElementById('blue-text');

let colorSelectElement = document.getElementById('color-select');

let clickedElement = null;

InitSlideBars(0,0,128);

InitSlideBars関数はスライドバーを初期化するためのものです。

function InitSlideBars(initR, initG, initB){
    InitSlideBar(redElement);
    InitSlideBar(greenElement);
    InitSlideBar(blueElement);

    redTextElement.style.fontWeight = 'bold';
    greenTextElement.style.fontWeight = 'bold';
    blueTextElement.style.fontWeight = 'bold';

    redTextElement.style.color = 'red';
    greenTextElement.style.color = 'green';
    blueTextElement.style.color = 'blue';
}

function InitSlideBar(element){
    element.setAttribute('min', 0);
    element.setAttribute('max', 255);
    element.setAttribute('step', 1);

    element.addEventListener('change', function(){
        ChangeColorBySlideBar();
    });
}

function InitSlideBars(initR, initG, initB){

InitSlideBar(redElement);

InitSlideBar(greenElement);

InitSlideBar(blueElement);

redTextElement.style.fontWeight = 'bold';

greenTextElement.style.fontWeight = 'bold';

blueTextElement.style.fontWeight = 'bold';

redTextElement.style.color = 'red';

greenTextElement.style.color = 'green';

blueTextElement.style.color = 'blue';

}

function InitSlideBar(element){

element.setAttribute('min', 0);

element.setAttribute('max', 255);

element.setAttribute('step', 1);

element.addEventListener('change', function(){

ChangeColorBySlideBar();

});

}

スライドバーの値が変更されたら表示色を変更するとともにRGB情報を表示している文字列も変更します。

function ChangeColorBySlideBar(){
    let red = redElement.value;
    let green = greenElement.value;
    let blue = blueElement.value;

    let rgbString = `rgb(${red}, ${green}, ${blue})`;
    colorElement.style.backgroundColor = rgbString;
    colorElement.style.color = rgbString;

    redTextElement.innerText = 'Red = ' + red;
    greenTextElement.innerText = 'Green = ' + green;
    blueTextElement.innerText = 'Blue = ' + blue;
}

function ChangeColorBySlideBar(){

let red = redElement.value;

let green = greenElement.value;

let blue = blueElement.value;

let rgbString = `rgb(${red}, ${green}, ${blue})`;

colorElement.style.backgroundColor = rgbString;

colorElement.style.color = rgbString;

redTextElement.innerText = 'Red = ' + red;

greenTextElement.innerText = 'Green = ' + green;

blueTextElement.innerText = 'Blue = ' + blue;

}

セレクトボックスが変更されたときも表示色とRGB情報を表示している文字列を変更します。

colorSelectElement.addEventListener('change', function(event){
    colorElement.style.backgroundColor = event.currentTarget.value;
    colorElement.style.color = event.currentTarget.value;
    SetColorInfo(event.currentTarget.value);
});

colorSelectElement.addEventListener('change', function(event){

colorElement.style.backgroundColor = event.currentTarget.value;

colorElement.style.color = event.currentTarget.value;

SetColorInfo(event.currentTarget.value);

});

クリックしたときにこの関数が呼び出されるようにしておくと、その部分の背景色を変更できるようになります。

function SelectedColorClicked(event){
    clickedElement = event.target;
    let rgbText = clickedElement.style.backgroundColor;
    if(rgbText == '')
        rgbText =  'rgb(0, 0, 255)';

    colorElement.style.backgroundColor = rgbText;
    SetColorInfo(rgbText);
    ShowPopupColor();
}

function SelectedColorClicked(event){

clickedElement = event.target;

let rgbText = clickedElement.style.backgroundColor;

if(rgbText == '')

rgbText = 'rgb(0, 0, 255)';

colorElement.style.backgroundColor = rgbText;

SetColorInfo(rgbText);

ShowPopupColor();

}

Element.style.backgroundColorで取得される文字列はrgb(XX, XX, XX)という形なので、これを分解して赤、緑、青のそれぞれの値を取得し、文字列に変換します。またセレクトボックスで色が変更された場合はスライドバーの値もこれにあわせて変更します。

function SetColorInfo(rgbText){
    rgbText = rgbText.replace(/\s+/g, '');
    rgbText = rgbText.replace('rgb(', '');
    rgbText = rgbText.replace(')', '');

    let rgb = rgbText.split(',');
    redElement.value = rgb[0];
    greenElement.value = rgb[1];
    blueElement.value = rgb[2];

    redTextElement.innerText = 'Red = ' + rgb[0];
    greenTextElement.innerText = 'Green = ' + rgb[1];
    blueTextElement.innerText = 'Blue = ' + rgb[2];
}

function SetColorInfo(rgbText){

rgbText = rgbText.replace(/\s+/g, '');

rgbText = rgbText.replace('rgb(', '');

rgbText = rgbText.replace(')', '');

let rgb = rgbText.split(',');

redElement.value = rgb[0];

greenElement.value = rgb[1];

blueElement.value = rgb[2];

redTextElement.innerText = 'Red = ' + rgb[0];

greenTextElement.innerText = 'Green = ' + rgb[1];

blueTextElement.innerText = 'Blue = ' + rgb[2];

}

ShowPopupColor関数が呼び出されたらポップアップ表示をします。

function ShowPopupColor(){
    document.getElementById('popup-color').style.display = 'block';
}

function ShowPopupColor(){

document.getElementById('popup-color').style.display = 'block';

}

これはポップアップ表示をやめる関数です。

function HidePopupColor(){
    document.getElementById('popup-color').style.display = 'none';
}

function HidePopupColor(){

document.getElementById('popup-color').style.display = 'none';

}

確定ボタンがおされたら色を確定させ、ポップアップ表示をやめます。そしてクリックされた要素の背景色を変更します。

function ConfirmColor(){
    clickedElement.style.backgroundColor = colorElement.style.backgroundColor;
    clickedElement.style.color = colorElement.style.color;
    HidePopupColor();
}

function ConfirmColor(){

clickedElement.style.backgroundColor = colorElement.style.backgroundColor;

clickedElement.style.color = colorElement.style.color;

HidePopupColor();

}

ポップアップで色を選択できるようにするガントチャートをWebアプリとしてつくる(10)

関連記事

鳩でも分かるC#管理人からのお願い

コメントについて

管理人のモチベーションアップのために

コメントをどうぞ