Project

General

Profile

« Previous | Next » 

Revision 4b59dced

Added by koszko about 2 years ago

add styling to settings install(import) dialog

View differences:

html/import_frame.js
9 9 
 * IMPORTS_START
10 10 
 * IMPORT get_remote_storage
11 11 
 * IMPORT by_id
12 
 * IMPORT get_template
12 
 * IMPORT clone_template
13 13 
 * IMPORT nice_name
14 14 
 * IMPORT make_once
15 15 
 * IMPORTS_END
......
17 17 

  		




  18
  18
  
    
let storage;


  		




  19
  19
  
    

  		




  20
  
  
    
const import_li_template = get_template("import_li");


  		




  21
  
  
    
import_li_template.removeAttribute("id");


  		




  22
  
  
    

  		




  23
  
  
    
function import_li_id(prefix, item)


  		




  24
  
  
    
{


  		




  25
  
  
    
    return `ili_${prefix}_${item}`;


  		




  26
  
  
    
}


  		




  27
  
  
    

  		




  28
  
  
    
let import_ul = by_id("import_ul");


  		




  
  20
  
    
let import_list = by_id("import_list");


  		




  29
  21
  
    
let import_chbxs_colliding = undefined;


  		




  
  22
  
    
let entry_objects = undefined;


  		




  30
  23
  
    
let settings_import_map = undefined;


  		




  31
  24
  
    

  		




  32
  
  
    
function add_import_li(prefix, name)


  		




  
  25
  
    
function add_import_entry(prefix, name)


  		




  33
  26
  
    
{


  		




  34
  
  
    
    let li = import_li_template.cloneNode(true);


  		




  35
  
  
    
    let name_span = li.firstElementChild;


  		




  36
  
  
    
    let chbx = name_span.nextElementSibling;


  		




  37
  
  
    
    let warning_span = chbx.nextElementSibling;


  		




  
  27
  
    
    const cloned_template = clone_template("import_entry");


  		




  
  28
  
    
    Object.assign(cloned_template, {prefix, name});


  		




  38
  29
  
    

  		




  39
  
  
    
    li.setAttribute("data-prefix", prefix);


  		




  40
  
  
    
    li.setAttribute("data-name", name);


  		




  41
  
  
    
    li.id = import_li_id(prefix, name);


  		




  42
  
  
    
    name_span.textContent = nice_name(prefix, name);


  		




  
  30
  
    
    cloned_template.name_span.textContent = nice_name(prefix, name);


  		




  43
  31
  
    

  		




  44
  32
  
    
    if (storage.get(prefix, name) !== undefined) {


  		




  45
  
  
    
	import_chbxs_colliding.push(chbx);


  		




  46
  
  
    
	warning_span.textContent = "(will overwrite existing setting!)";


  		




  
  33
  
    
	import_chbxs_colliding.push(cloned_template.chbx);


  		




  
  34
  
    
	cloned_template.warning.textContent = "!";


  		




  47
  35
  
    
    }


  		




  48
  36
  
    

  		




  49
  
  
    
    import_ul.appendChild(li);


  		




  
  37
  
    
    import_list.appendChild(cloned_template.entry);


  		




  
  38
  
    

  		




  
  39
  
    
    return cloned_template;


  		




  50
  40
  
    
}


  		




  51
  41
  
    

  		




  52
  42
  
    
function check_all_imports()


  		




  53
  43
  
    
{


  		




  54
  
  
    
    for (let li of import_ul.children)


  		




  55
  
  
    
	li.firstElementChild.nextElementSibling.checked = true;


  		




  
  44
  
    
    for (const entry_object of entry_objects)


  		




  
  45
  
    
	entry_object.chbx.checked = true;


  		




  56
  46
  
    
}


  		




  57
  47
  
    

  		




  58
  48
  
    
function uncheck_all_imports()


  		




  59
  49
  
    
{


  		




  60
  
  
    
    for (let li of import_ul.children)


  		




  61
  
  
    
	li.firstElementChild.nextElementSibling.checked = false;


  		




  
  50
  
    
    for (const entry_object of entry_objects)


  		




  
  51
  
    
	entry_object.chbx.checked = false;


  		




  62
  52
  
    
}


  		




  63
  53
  
    

  		




  64
  54
  
    
function uncheck_colliding_imports()


  		




  ......




  69
  59
  
    

  		




  70
  60
  
    
function commit_import()


  		




  71
  61
  
    
{


  		




  72
  
  
    
    for (let li of import_ul.children) {


  		




  73
  
  
    
	let chbx = li.firstElementChild.nextElementSibling;


  		




  74
  
  
    

  		




  75
  
  
    
	if (!chbx.checked)


  		




  
  62
  
    
    for (const entry_object of entry_objects) {


  		




  
  63
  
    
	if (!entry_object.chbx.checked)


  		




  76
  64
  
    
	    continue;


  		




  77
  65
  
    

  		




  78
  
  
    
	let prefix = li.getAttribute("data-prefix");


  		




  79
  
  
    
	let name = li.getAttribute("data-name");


  		




  80
  
  
    
	let key = prefix + name;


  		




  81
  
  
    
	let value = settings_import_map.get(key);


  		




  82
  
  
    
	storage.set(prefix, name, value);


  		




  
  66
  
    
	const key = entry_object.prefix + entry_object.name;


  		




  
  67
  
    
	const value = settings_import_map.get(key);


  		




  
  68
  
    
	storage.set(entry_object.prefix, entry_object.name, value);


  		




  83
  69
  
    
    }


  		




  84
  70
  
    

  		




  85
  71
  
    
    deactivate();


  		




  ......




  106
  92
  
    
}


  		




  107
  93
  
    

  		




  108
  94
  
    
const import_selection_radio = by_id("import_selection_radio");


  		




  
  95
  
    
const existing_settings_note = by_id("existing_settings_note");


  		




  109
  96
  
    

  		




  110
  97
  
    
function show_selection(settings)


  		




  111
  98
  
    
{


  		




  112
  99
  
    
    import_selection_radio.checked = true;


  		




  113
  100
  
    

  		




  114
  
  
    
    let old_children = import_ul.children;


  		




  
  101
  
    
    let old_children = import_list.children;


  		




  115
  102
  
    
    while (old_children[0] !== undefined)


  		




  116
  
  
    
	import_ul.removeChild(old_children[0]);


  		




  
  103
  
    
	import_list.removeChild(old_children[0]);


  		




  117
  104
  
    

  		




  118
  105
  
    
    import_chbxs_colliding = [];


  		




  
  106
  
    
    entry_objects = [];


  		




  119
  107
  
    
    settings_import_map = new Map();


  		




  120
  108
  
    

  		




  121
  109
  
    
    for (let setting of settings) {


  		




  122
  110
  
    
	let [key, value] = Object.entries(setting)[0];


  		




  123
  111
  
    
	let prefix = key[0];


  		




  124
  112
  
    
	let name = key.substring(1);


  		




  125
  
  
    
	add_import_li(prefix, name);


  		




  
  113
  
    
	entry_objects.push(add_import_entry(prefix, name));


  		




  126
  114
  
    
	settings_import_map.set(key, value);


  		




  127
  115
  
    
    }


  		




  
  116
  
    

  		




  
  117
  
    
    const op = import_chbxs_colliding.length > 0 ? "remove" : "add";


  		




  
  118
  
    
    existing_settings_note.classList[op]("hide");


  		




  128
  119
  
    
}


  		




  129
  120
  
    

  		




  130
  121
  
    
function deactivate()


  		




  131
  122
  
    
{


  		




  132
  123
  
    
    /* Let GC free some memory */


  		




  133
  124
  
    
    import_chbxs_colliding = undefined;


  		




  
  125
  
    
    entry_objects = undefined;


  		




  134
  126
  
    
    settings_import_map = undefined;


  		




  135
  127
  
    

  		




  136
  128
  
    
    if (exports.onclose)


  		




  137
  129
  
    
	exports.onclose();


  		




  138
  130
  
    
}


  		




  139
  131
  
    

  		




  140
  
  
    
const exports = {show_loading, show_error, show_selection, deactivate};


  		




  
  132
  
    
const wrapper = by_id("import_table_wrapper");


  		




  
  133
  
    
const style_table = (...cls) => cls.forEach(c => wrapper.classList.add(c));


  		




  
  134
  
    

  		




  
  135
  
    
const exports =


  		




  
  136
  
    
      {show_loading, show_error, show_selection, deactivate, style_table};


  		




  141
  137
  
    

  		




  142
  138
  
    
async function init()


  		




  143
  139
  
    
{


  		












Also available in:  Unified diff