⏬ 👈🏼 🙇🏽 कार्यों के रंग को बदलने के लिए जावास्क्रिप्ट गैंट में ColorPicker कैसे एम्बेड करें 🌹 👩‍💻 ♍️

नमस्ते, मेरा नाम जेन्या है, और मैं जावास्क्रिप्ट ब्रह्मांड के निवासियों में से एक हूं, जो फ्रंटएंड विकास में आपके साथ दिलचस्प अनुभव साझा करना चाहता है, अर्थात् गैन्ट चार्ट को कैसे अनुकूलित किया जाए।

, . , :

. .

, . — . , , JavaScript .

, . :

JavaScript DHTMLX Gantt. , , — .

— :

GPL v2 ;
700$ 3000$ .

— .

, GPL GPLv2 , (TLDRlegal). , — / front-end/ , . , , . - , .

DHTMLX JavaScript . , , .

DHTMLX Gantt :

(lightbox)
(inline editors),

, . DHTMLX Gantt, — color picker, . .

HTML5 JavaScript, .

. JS CSS , , ( ):

<!DOCTYPE html>
<html>
<head>
   <script src="codebase/dhtmlxgantt.js"></script>
   <link href="codebase/dhtmlxgantt.css" rel="stylesheet">
</head>
<body>
    <div id="gantt_here" style='width:100vw; height:100vh;'></div>
    <script>
      window.addEventListener("DOMContentLoaded",() => {
       gantt.init("gantt_here");
      });
   </script>
</body>
</html>

HTML js , , , . 1 ( ) 2 ( ). , , ( ):

gantt.parse({
    data: [
      {
        id: 1, text: "  ", start_date: "01-05-2020", duration: 18, open: true
      },
      {
        id: 2, text: "  ", start_date: "02-05-2020", duration: 4, parent: 1
      },
      {
        id: 3, text: "  ", start_date: "07-05-2020", duration: 5, parent: 1
      }
    ],
    links: [
      {id: 1, source: 1, target: 2, type: "1"},
      {id: 2, source: 2, target: 3, type: "0"}
    ]
  });
});

Inline Editors

: , , .

, editor:

gantt.config.columns = [
      {name: "text", tree: true, width: '*', resize: true, editor: textEditor},
      {name: "start_date", align: "center", resize: true, editor: dateEditor},
      {name: "duration", align: "center", editor: durationEditor},
      {name: "add", width: 44}
];

type, , map_to, , . , , :

const textEditor = {type: "text", map_to: "text"};
const dateEditor = {type: "date", map_to: "start_date", min: new Date(2020, 0, 1), 
    max: new Date(2021, 0, 1)};
const durationEditor = {type: "number", map_to: "duration", min:0, max: 100};

, .

, : (select) (color picker). , -colorpicker.

, HTML5 input color, .

. :

gantt.config.editor_types.custom_editor = {
  show: (id, column, config, placeholder) => {
    // called when input is displayed, put html markup of the editor into placeholder

    // and initialize your editor if needed:
        placeholder.innerHTML `<div><input type='text' name='${column.name}'></div>`;
  },

  hide: () => {
    // called when input is hidden 
    // destroy any complex editors or detach event listeners from here
  },

  set_value: (value, id, column, node) => {
    // set input value
  },

  get_value: (id, column, node) => {
    // return input value
  }, 

  is_changed: (value, id, column, node) => {
    // called before save/close. Return true if new value differs from the original one
    // returning true will trigger saving changes, returning false will skip saving 
  },

  is_valid: (value, id, column, node) => {
    // validate, changes will be discarded if the method returns false
    return true/false;
  },

  save: (id, column, node) => {
     // only for inputs with map_to:auto. complex save behavior goes here
  },

  focus: (node) => {                                                 
  }
}

, :

show, color:

gantt.config.editor_types.color = {
  show: (id, column, config, placeholder) => {
    placeholder.innerHTML = `<div><input type='color' name='${column.name}'></div>`;
  },

hide , , , :
```
hide: () => {},
```

— set_value get_value:

set_value: (value, id, column, node) => {
  const input = node.querySelector("input");
  input.value = value   
},
get_value: (id, column, node) => {
  const input = node.querySelector("input");
  return input.value;
},

, task. , , .

is_changed. , , :

is_changed: (value, id, column, node) => {
  const input = node.querySelector("input");
  return input.value !== value;
},

, , true, . true , false .

is_valid , false, , :

is_valid: (value, id, column, node) => {
  const input = node.querySelector("input");
  return !!input.value;
},

save , , , .

focus :

focus: node => {
  const input = node.querySelector("input");
  input.focus();
},

.
. type , ( type: “color”).

  const textEditor = {type: "text", map_to: "text"};
  const dateEditor = {type: "date", map_to: "start_date", min: new Date(2020, 0, 1), 
      max: new Date(2021, 0, 1)};
  const durationEditor = {type: "number", map_to: "duration", min:0, max: 100};
  const colorEditor = {type: "color", map_to: "color"};
  gantt.config.columns = [
      {name: "text", tree: true, width: '*', resize: true, editor: textEditor},
      {name: "start_date", align: "center", resize: true, editor: dateEditor},
      {name: "duration", align: "center", editor: durationEditor},
      {name: "color", align: "center", editor: colorEditor},
      {name: "add", width: 44}
  ];

color, . , , — , color:"#FF0000":

{
    id: 2, text: "  ", start_date: "02-05-2020", duration: 4, parent: 1, color:"#FF0000"
},

, , “color” . :

gantt.config.columns = [
      {name: "text", tree: true, width: '*', resize: true, editor: textEditor},
      {name: "start_date", align: "center", resize: true, editor: dateEditor},
      {name: "duration", align: "center", editor: durationEditor},
      {name: "color", align: "center", label:"Color", editor: colorEditor, template:
       (task) => {
          return `<div class='task-color-cell' style='background:${task.color}'></div>`
        }
       },
      {name: "add", width: 44}
];

, div . css , :

 .task-color-cell{
    margin:10%;
    width:20px;
    height:20px;
    border:1px solid #cecece;
    display:inline-block;
    border-radius:20px;
}

: https://plnkr.co/edit/yGWtLzoELPrhJV2K?preview

Color Picker

DHTMLX Gantt , , jquery Spectrum.

<!DOCTYPE html>
<html>
  <head>
     <script src="https://docs.dhtmlx.com/gantt/codebase/dhtmlxgantt.js"></script>   
     <link rel="stylesheet"href="https://docs.dhtmlx.com/gantt/codebase/dhtmlxgantt.css">
     <script
    src="http://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>
     <script src="http://bgrins.imtqy.com/spectrum/spectrum.js"></script>
     <link rel="stylesheet" href="http://bgrins.imtqy.com/spectrum/spectrum.css">
     <script src="script.js"></script>
     <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div id="gantt_here"></div>
  </body>
</html>

. let editor, . , , input .
show. , .

: editor.spectrum("show") show, . , show placeholder- . -, color picker , placeholder .

document.addEventListener("DOMContentLoaded", function(event) {
  let editor;
  gantt.config.editor_types.color = {
    show: (id, column, config, placeholder) => {
          placeholder.innerHTML = `<div><input type='color' name='${column.name}'></div>`;

          editor = $(placeholder).find("input").spectrum({
            change:() => {
              gantt.ext.inlineEditors.save();
            }
          });
          setTimeout(() => {
            editor.spectrum("show");
          })
    }

अगला, मैंने "छिपाने" की विधि को परिभाषित किया - जब संपादक बंद हो जाता है, तो विध्वंसक को बुलाया जाएगा:

hide: () => {
    if(editor){
      editor.spectrum("destroy");
      editor = null;
    }

शेष विधियां मूल कार्यान्वयन से बहुत अलग नहीं हैं। आपको नियंत्रण से मूल्यों को प्राप्त करने के तरीके को बदलने की जरूरत है:

 set_value: (value, id, column, node) => {
    editor.spectrum("set", value);
  },
  get_value: (id, column, node) => {
    return editor.spectrum("get").toHexString();
  },
  is_changed: function (value, id, column, node) {
    const newValue = this.get_value(id, column, node);
    return newValue !== value;
  },
  is_valid: function (value, id, column, node) {
    const newValue = this.get_value(id, column, node);
    return !!newValue;
  },
  focus:(node) => {
    editor.spectrum("show");
  }

उसके बाद, सब कुछ उम्मीद के मुताबिक काम करना चाहिए!

और यह बिल्ट-इन कलर पिकर के साथ मेरे उदाहरण का लिंक है ।

मुझे उम्मीद है कि यह लेख आपको गैंट चार्ट में कार्यों के रंग को समायोजित करने में मदद करता है।

कार्यों के रंग को बदलने के लिए जावास्क्रिप्ट गैंट में ColorPicker कैसे एम्बेड करें

Inline Editors

Color Picker

More articles: