Index: gc_lang/fr/webext/content_scripts/panel_tf.css ================================================================== --- gc_lang/fr/webext/content_scripts/panel_tf.css +++ gc_lang/fr/webext/content_scripts/panel_tf.css @@ -8,58 +8,76 @@ */ #grammalecte_tf_options { display: flex; padding: 10px; color: hsl(0, 0%, 0%); + font-size: 13px; } .grammalecte_tf_column { flex-grow: 1; width: 360px; padding: 0 5px; } -#grammalecte_tf_options legend label { - margin: 0; - padding: 0; - font-size: 20px; - color: hsla(210, 20%, 50%, .8); - font-weight: bold; -} -#grammalecte_tf_options fieldset { +.grammalecte_tf_groupblock { padding: 2px 10px 10px 13px; - margin: 0 0 5px 0; - background-color: hsl(210, 10%, 96%); + margin: 10px 0 15px 0; + background-color: hsl(210, 10%, 92%); + border: 0 1px 1px 1px; border-color: hsl(210, 20%, 80%); border-radius: 3px; } -#grammalecte_tf_options legend .grammalecte_tf_option { - margin: 7px 5px 0 4px; - float: left; -} -#grammalecte_tf_options label { - margin: 0; - padding: 0; - font-size: 13px; -} .grammalecte_tf_underline:hover { background-color: hsl(210, 10%, 86%); border-radius: 2px; } -.grammalecte_tf_blockopt .grammalecte_tf_option { - margin: 4px 5px 0 6px; - float: left; -} -.grammalecte_tf_result { - float: right; - margin: 2px 3px 0 0; - font-size: 13px; +.grammalecte_tf_blockopt { + display: flex; } .grammalecte_tf_indent { padding-left: 20px; } -.grammalecte_tf_inlineblock { +.grammalecte_tf_result { display: inline-block; - margin-right: 10px; + font-size: 13px; +} +.grammalecte_tf_option_on { + flex-grow: 1; + background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAA7DAAAOwwHHb6hkAAADg0lEQVQ4ja2VT0hjRxzHv/PmJS8pxiB216obPPX0Slxpn4pGo8d6Dix6CaWwKT0kpZe+QvHgrScveuyhtKXsrksTCJJa/JsUpNKDRbQEjd1GEJRgNArVmXm/HpoX4q5bKHRgYN4wv8/7/X7z+32HERHcoZTinHMlpcTi4uLQwsLCo62trf5arXYfAAKBwIllWb/EYrGnExMTP+u63rBpQIgIRAQpJSci5HK5h+FweBmAwxgjALdmfc8Jh8PLuVzuYbMtEf0DVEpxIoJt248BSMYYMcacOkRxzquc8yoAVYe6P5O2bT9uZjTotm0nAJBhGDcAKBgMlpPJpJ3P53uLxeK9YrF4L5/P9yaTSTsYDJabz9q2nXA9BREhm82+B0B4vV4BgCKRyLNyuRwgIjiOw9xw3HW5XA4MDQ09B0B1G5HNZi0iApRSsCwr5+YoGo0+EUKAiJgQQpdSakopppRiUkpNCKETkeY4DsbGxp66dpZl5ZRSQDqdHgUg62G+KJVKbUQEIUQj0c1TKaUJIfjm5qZZKpXa29vbD+tQmU6nR7lhGJ9sb28PAUAikfhycnLyp5ubGy/nXDHG0DyklB7OuZqbm/sgFov92NnZ+Xs4HP41n8+/D0AzDOMcpmkWXLfX1tbedb1zHIcppTTXMyGEh4gwOzv7IQDyeDwSgJiamvrC7/fXAJBpmgWEQqEDAMQ5r+7u7r5FRNjZ2Qnt7e31uDdXz1sDZhjGXwBofHz8q42NjQder/cMAIVCoYMGkDF2fnBw8ObJyckbXV1dv3V3d+8fHh52uB6+DOvv7//2+voa+/v79zVNO28Am0NeWVkxR0ZGvne/e3p69o6Pj4Pz8/PxZtjg4OA3lUpFIyIsLy9b7nnTNAuIx+Oz7oZt258uLS29DaCi6zoBoI6Ojhd+v7+m67p0YdVqFVJKg4iQSqU+d+3j8fjsrbJpbW398/T01J/JZHoBVDjnpGma9Hq9180wpZSHiFAqldqCweAfzWXzSmEPDw8/JyJkMpkBAFe6rqt6zr47OzuD4zgepRQXQiAajT55pbDvar2BgYEfLi4u9PX19XcAXI2Ojn59eXkJImq0XiQSeXZn671OHFpaWo6np6c/npmZeVQoFB4cHR21ra6u9qVSqc/uEIePbonDv8mXz+e78vl8Z4yxi9fIV+KWfN0hsH3/QWD7XhZY9n8/AX8DjCrPg5M/SO8AAAAASUVORK5CYII=') no-repeat; + padding: 0 5px 0 25px; + line-height: 20px; + opacity: 1; + cursor: pointer; +} +.grammalecte_tf_option_off { + flex-grow: 1; + background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAA7DAAAOwwHHb6hkAAADHklEQVQ4ja1VMWsbSRh9c7vYWLArSHDSRIqFVAgJhA3eFJKQerdakUKFikAcsahfzqRJozJFOucXxChBhTBqIoFICNiNGwmxIMFGWyWNxZLGuzNfitMYyScfHHcDA8M3897sN9/73jIighycc0VRFB6GIc7Pz/Ptdvv55eXlM9/3HwGApmk/DMO4ME3z7Ojo6KuqqreYWxIiAhEhDEOFiNDr9fZzudxnAIIxRgDW5jImcrnc516vt7+KJaK/CDnnChHBtu2XAELGGDHGxJKEK4pyrSjKNQC+JJWXhbZtv1zluGW3bfsYAG1vb98AIF3XPcuyTobD4b7jOLuO4+wOh8N9y7JOdF2fr561bftYfimICN1u9xBAsLW1FQCgQqHQdl03SkQQQjCZjly7rhstFAptALTEBN1u1yAigHMOwzB68o3K5fIHIQR834+0Wq0Xi8UiIoRgQgi2WCwirVbrhe/7ESEEyuXyB4kzDKPHOQc6nU4JQAiAotGoO5vNHhARKpXKKQCqVqunnHNwzlGtVk8BUKVSOSUizGazB9Fo9PuSNOx0OiXU6/W38hbLsl4TERqNxhsAFIlEfgGgWq32rlarvVuNNRqNN0QEy7JeS3y9Xn+LbDb7RQb6/b5BRBiNRnvJZPIKAKmqGsh9uU4mk1ej0WiPiNDv9w25n81mvyAWi00BkKIo15PJ5LEsgOu6u5lM5tuS6EZV1RsAlMlkvrmuuyvPTSaTx0tJUSwWm/6BDSMMQzUej/9MpVITAGCMgTEGAEilUpN4PP4zDEN1E3Yt5cFgcEhECIIApmm+l2kuhSxkyqZpvg+CAESEwWBwuJbyPxVlZ2fnFwBKp9MX6XT6YjV2b1FWZaPr+vf5fK5Np9MniUTiCgAlEokrz/Meep73cDU2nU6fzOdzTdf1ddncFXapVDojIjiO87RYLH4aj8d7sgDj8XivWCx+chznKRGhVCqd/U3Ym1ovn89/9DxPv6/1PM/T8/n8x42td585aJrmNZvNP++Yw0Gz2TzRNM27Yw6v1szhP9rX8Zp9bTDYg39hsAd3DZb937+A3zNHr6ED451DAAAAAElFTkSuQmCC') no-repeat; + padding: 0 5px 0 25px; + line-height: 20px; + opacity: .3; + cursor: pointer; +} +.grammalecte_tf_option_title_on { + flex-grow: 1; + background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAA7DAAAOwwHHb6hkAAADg0lEQVQ4ja2VT0hjRxzHv/PmJS8pxiB216obPPX0Slxpn4pGo8d6Dix6CaWwKT0kpZe+QvHgrScveuyhtKXsrksTCJJa/JsUpNKDRbQEjd1GEJRgNArVmXm/HpoX4q5bKHRgYN4wv8/7/X7z+32HERHcoZTinHMlpcTi4uLQwsLCo62trf5arXYfAAKBwIllWb/EYrGnExMTP+u63rBpQIgIRAQpJSci5HK5h+FweBmAwxgjALdmfc8Jh8PLuVzuYbMtEf0DVEpxIoJt248BSMYYMcacOkRxzquc8yoAVYe6P5O2bT9uZjTotm0nAJBhGDcAKBgMlpPJpJ3P53uLxeK9YrF4L5/P9yaTSTsYDJabz9q2nXA9BREhm82+B0B4vV4BgCKRyLNyuRwgIjiOw9xw3HW5XA4MDQ09B0B1G5HNZi0iApRSsCwr5+YoGo0+EUKAiJgQQpdSakopppRiUkpNCKETkeY4DsbGxp66dpZl5ZRSQDqdHgUg62G+KJVKbUQEIUQj0c1TKaUJIfjm5qZZKpXa29vbD+tQmU6nR7lhGJ9sb28PAUAikfhycnLyp5ubGy/nXDHG0DyklB7OuZqbm/sgFov92NnZ+Xs4HP41n8+/D0AzDOMcpmkWXLfX1tbedb1zHIcppTTXMyGEh4gwOzv7IQDyeDwSgJiamvrC7/fXAJBpmgWEQqEDAMQ5r+7u7r5FRNjZ2Qnt7e31uDdXz1sDZhjGXwBofHz8q42NjQder/cMAIVCoYMGkDF2fnBw8ObJyckbXV1dv3V3d+8fHh52uB6+DOvv7//2+voa+/v79zVNO28Am0NeWVkxR0ZGvne/e3p69o6Pj4Pz8/PxZtjg4OA3lUpFIyIsLy9b7nnTNAuIx+Oz7oZt258uLS29DaCi6zoBoI6Ojhd+v7+m67p0YdVqFVJKg4iQSqU+d+3j8fjsrbJpbW398/T01J/JZHoBVDjnpGma9Hq9180wpZSHiFAqldqCweAfzWXzSmEPDw8/JyJkMpkBAFe6rqt6zr47OzuD4zgepRQXQiAajT55pbDvar2BgYEfLi4u9PX19XcAXI2Ojn59eXkJImq0XiQSeXZn671OHFpaWo6np6c/npmZeVQoFB4cHR21ra6u9qVSqc/uEIePbonDv8mXz+e78vl8Z4yxi9fIV+KWfN0hsH3/QWD7XhZY9n8/AX8DjCrPg5M/SO8AAAAASUVORK5CYII=') no-repeat; + padding: 0 5px 0 25px; + margin: -12px 0 10px 0; + line-height: 20px; + font-size: 20px; + color: hsla(210, 20%, 50%, .8); + font-weight: bold; + cursor: pointer; +} +.grammalecte_tf_option_title_off { + flex-grow: 1; + background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAA7DAAAOwwHHb6hkAAADHklEQVQ4ja1VMWsbSRh9c7vYWLArSHDSRIqFVAgJhA3eFJKQerdakUKFikAcsahfzqRJozJFOucXxChBhTBqIoFICNiNGwmxIMFGWyWNxZLGuzNfitMYyScfHHcDA8M3897sN9/73jIighycc0VRFB6GIc7Pz/Ptdvv55eXlM9/3HwGApmk/DMO4ME3z7Ojo6KuqqreYWxIiAhEhDEOFiNDr9fZzudxnAIIxRgDW5jImcrnc516vt7+KJaK/CDnnChHBtu2XAELGGDHGxJKEK4pyrSjKNQC+JJWXhbZtv1zluGW3bfsYAG1vb98AIF3XPcuyTobD4b7jOLuO4+wOh8N9y7JOdF2fr561bftYfimICN1u9xBAsLW1FQCgQqHQdl03SkQQQjCZjly7rhstFAptALTEBN1u1yAigHMOwzB68o3K5fIHIQR834+0Wq0Xi8UiIoRgQgi2WCwirVbrhe/7ESEEyuXyB4kzDKPHOQc6nU4JQAiAotGoO5vNHhARKpXKKQCqVqunnHNwzlGtVk8BUKVSOSUizGazB9Fo9PuSNOx0OiXU6/W38hbLsl4TERqNxhsAFIlEfgGgWq32rlarvVuNNRqNN0QEy7JeS3y9Xn+LbDb7RQb6/b5BRBiNRnvJZPIKAKmqGsh9uU4mk1ej0WiPiNDv9w25n81mvyAWi00BkKIo15PJ5LEsgOu6u5lM5tuS6EZV1RsAlMlkvrmuuyvPTSaTx0tJUSwWm/6BDSMMQzUej/9MpVITAGCMgTEGAEilUpN4PP4zDEN1E3Yt5cFgcEhECIIApmm+l2kuhSxkyqZpvg+CAESEwWBwuJbyPxVlZ2fnFwBKp9MX6XT6YjV2b1FWZaPr+vf5fK5Np9MniUTiCgAlEokrz/Meep73cDU2nU6fzOdzTdf1ddncFXapVDojIjiO87RYLH4aj8d7sgDj8XivWCx+chznKRGhVCqd/U3Ym1ovn89/9DxPv6/1PM/T8/n8x42td585aJrmNZvNP++Yw0Gz2TzRNM27Yw6v1szhP9rX8Zp9bTDYg39hsAd3DZb937+A3zNHr6ED451DAAAAAElFTkSuQmCC') no-repeat; + padding: 0 5px 0 25px; + margin: -12px 0 10px 0; + line-height: 20px; + font-size: 20px; + color: hsla(210, 20%, 50%, .8); + font-weight: bold; + cursor: pointer; } /* Actions Index: gc_lang/fr/webext/content_scripts/panel_tf.js ================================================================== --- gc_lang/fr/webext/content_scripts/panel_tf.js +++ gc_lang/fr/webext/content_scripts/panel_tf.js @@ -18,50 +18,50 @@ try { // Options let xOptions = createNode("div", {id: "grammalecte_tf_options"}); let xColumn1 = createNode("div", {className: "grammalecte_tf_column"}); let xSSP = this._createFieldset("group_ssp", true, "Espaces surnuméraires"); - xSSP.appendChild(this._createSimpleOption("o_start_of_paragraph", true, "En début de paragraphe")); - xSSP.appendChild(this._createSimpleOption("o_end_of_paragraph", true, "En fin de paragraphe")); - xSSP.appendChild(this._createSimpleOption("o_between_words", true, "Entre les mots")); - xSSP.appendChild(this._createSimpleOption("o_before_punctuation", true, "Avant les points (.), les virgules (,)")); - xSSP.appendChild(this._createSimpleOption("o_within_parenthesis", true, "À l’intérieur des parenthèses")); - xSSP.appendChild(this._createSimpleOption("o_within_square_brackets", true, "À l’intérieur des crochets")); - xSSP.appendChild(this._createSimpleOption("o_within_quotation_marks", true, "À l’intérieur des guillemets “ et ”")); + xSSP.appendChild(this._createBlockOption("o_start_of_paragraph", true, "En début de paragraphe")); + xSSP.appendChild(this._createBlockOption("o_end_of_paragraph", true, "En fin de paragraphe")); + xSSP.appendChild(this._createBlockOption("o_between_words", true, "Entre les mots")); + xSSP.appendChild(this._createBlockOption("o_before_punctuation", true, "Avant les points (.), les virgules (,)")); + xSSP.appendChild(this._createBlockOption("o_within_parenthesis", true, "À l’intérieur des parenthèses")); + xSSP.appendChild(this._createBlockOption("o_within_square_brackets", true, "À l’intérieur des crochets")); + xSSP.appendChild(this._createBlockOption("o_within_quotation_marks", true, "À l’intérieur des guillemets “ et ”")); let xSpace = this._createFieldset("group_space", true, "Espaces manquants"); - xSpace.appendChild(this._createSimpleOption("o_add_space_after_punctuation", true, "Après , ; : ? ! . …")); - xSpace.appendChild(this._createSimpleOption("o_add_space_around_hyphens", true, "Autour des tirets d’incise")); + xSpace.appendChild(this._createBlockOption("o_add_space_after_punctuation", true, "Après , ; : ? ! . …")); + xSpace.appendChild(this._createBlockOption("o_add_space_around_hyphens", true, "Autour des tirets d’incise")); let xNBSP = this._createFieldset("group_nbsp", true, "Espaces insécables"); - xNBSP.appendChild(this._createSimpleOption("o_nbsp_before_punctuation", true, "Avant : ; ? et !")); - xNBSP.appendChild(this._createSimpleOption("o_nbsp_within_quotation_marks", true, "Avec les guillemets « et »")); - xNBSP.appendChild(this._createSimpleOption("o_nbsp_before_symbol", true, "Avant % ‰ € $ £ ¥ ˚C")); - xNBSP.appendChild(this._createSimpleOption("o_nbsp_within_numbers", true, "À l’intérieur des nombres")); - xNBSP.appendChild(this._createSimpleOption("o_nbsp_before_units", true, "Avant les unités de mesure")); + xNBSP.appendChild(this._createBlockOption("o_nbsp_before_punctuation", true, "Avant : ; ? et !")); + xNBSP.appendChild(this._createBlockOption("o_nbsp_within_quotation_marks", true, "Avec les guillemets « et »")); + xNBSP.appendChild(this._createBlockOption("o_nbsp_before_symbol", true, "Avant % ‰ € $ £ ¥ ˚C")); + xNBSP.appendChild(this._createBlockOption("o_nbsp_within_numbers", true, "À l’intérieur des nombres")); + xNBSP.appendChild(this._createBlockOption("o_nbsp_before_units", true, "Avant les unités de mesure")); let xDelete = this._createFieldset("group_delete", true, "Suppressions"); - xDelete.appendChild(this._createSimpleOption("o_erase_non_breaking_hyphens", true, "Tirets conditionnels")); + xDelete.appendChild(this._createBlockOption("o_erase_non_breaking_hyphens", true, "Tirets conditionnels")); let xColumn2 = createNode("div", {className: "grammalecte_tf_column"}); let xTypo = this._createFieldset("group_typo", true, "Signes typographiques"); - xTypo.appendChild(this._createSimpleOption("o_ts_apostrophe", true, "Apostrophe (’)")); - xTypo.appendChild(this._createSimpleOption("o_ts_ellipsis", true, "Points de suspension (…)")); - xTypo.appendChild(this._createSimpleOption("o_ts_dash_middle", true, "Tirets d’incise :")); - xTypo.appendChild(this._createRadioBoxHyphens("hyphen1", "o_ts_m_dash_middle", "o_ts_n_dash_middle", false)); - xTypo.appendChild(this._createSimpleOption("o_ts_dash_start", true, "Tirets en début de paragraphe :")); - xTypo.appendChild(this._createRadioBoxHyphens("hyphen2", "o_ts_m_dash_start", "o_ts_n_dash_start", true)); - xTypo.appendChild(this._createSimpleOption("o_ts_quotation_marks", true, "Modifier les guillemets droits (\" et ')")); - xTypo.appendChild(this._createSimpleOption("o_ts_units", true, "Points médians des unités (N·m, Ω·m…)")); - xTypo.appendChild(this._createSimpleOption("o_ts_spell", true, "Ligatures (cœur…) et diacritiques (ça, État…)")); + xTypo.appendChild(this._createBlockOption("o_ts_apostrophe", true, "Apostrophe (’)")); + xTypo.appendChild(this._createBlockOption("o_ts_ellipsis", true, "Points de suspension (…)")); + xTypo.appendChild(this._createBlockOption("o_ts_dash_middle", true, "Tirets d’incise :")); + xTypo.appendChild(this._createRadioBoxHyphens("o_ts_m_dash_middle", "o_ts_n_dash_middle", false)); + xTypo.appendChild(this._createBlockOption("o_ts_dash_start", true, "Tirets en début de paragraphe :")); + xTypo.appendChild(this._createRadioBoxHyphens("o_ts_m_dash_start", "o_ts_n_dash_start", true)); + xTypo.appendChild(this._createBlockOption("o_ts_quotation_marks", true, "Modifier les guillemets droits (\" et ')")); + xTypo.appendChild(this._createBlockOption("o_ts_units", true, "Points médians des unités (N·m, Ω·m…)")); + xTypo.appendChild(this._createBlockOption("o_ts_spell", true, "Ligatures (cœur…) et diacritiques (ça, État…)")); xTypo.appendChild(this._createRadioBoxLigatures()); xTypo.appendChild(this._createLigaturesSelection()); let xMisc = this._createFieldset("group_misc", true, "Divers"); xMisc.appendChild(this._createOrdinalOptions()); - xMisc.appendChild(this._createSimpleOption("o_etc", true, "Et cætera, etc.")); - xMisc.appendChild(this._createSimpleOption("o_missing_hyphens", true, "Traits d’union manquants")); - xMisc.appendChild(this._createSimpleOption("o_ma_word", true, "Apostrophes manquantes")); + xMisc.appendChild(this._createBlockOption("o_etc", true, "Et cætera, etc.")); + xMisc.appendChild(this._createBlockOption("o_missing_hyphens", true, "Traits d’union manquants")); + xMisc.appendChild(this._createBlockOption("o_ma_word", true, "Apostrophes manquantes")); xMisc.appendChild(this._createSingleLetterOptions()); let xStruct = this._createFieldset("group_struct", false, "Restructuration [!]"); - xStruct.appendChild(this._createSimpleOption("o_remove_hyphens_at_end_of_paragraphs", false, "Enlever césures en fin de ligne/paragraphe [!]")); - xStruct.appendChild(this._createSimpleOption("o_merge_contiguous_paragraphs", false, "Fusionner les paragraphes contigus [!]")); + xStruct.appendChild(this._createBlockOption("o_remove_hyphens_at_end_of_paragraphs", false, "Enlever césures en fin de ligne/paragraphe [!]")); + xStruct.appendChild(this._createBlockOption("o_merge_contiguous_paragraphs", false, "Fusionner les paragraphes contigus [!]")); xColumn1.appendChild(xSSP); xColumn1.appendChild(xSpace); xColumn1.appendChild(xNBSP); xColumn1.appendChild(xDelete); xColumn2.appendChild(xTypo); @@ -90,92 +90,77 @@ return xTFNode; } // Common options _createFieldset (sId, bDefault, sLabel) { - let xFieldset = createNode("fieldset", {id: sId, className: "groupblock"}); - let xLegend = document.createElement("legend"); - let xGroupOption = createNode("input", {type: "checkbox", id: "o_"+sId, className: "grammalecte_tf_option"}, {default: bDefault}); - xGroupOption.addEventListener("click", (xEvent) => { this.switchGroup(xEvent.target.id); }); - xLegend.appendChild(xGroupOption); - xLegend.appendChild(createNode("label", {htmlFor: "o_"+sId, textContent: sLabel})); - xFieldset.appendChild(xLegend); + let xFieldset = createNode("div", {id: sId, className: "grammalecte_tf_groupblock"}); + let xGroupOption = createNode("div", {id: "o_"+sId, className: "grammalecte_tf_option grammalecte_tf_option_title_off", textContent: sLabel}, {selected: "false", default: bDefault, linked_ids: ""}); + xGroupOption.addEventListener("click", (xEvent) => { this.switchOption(xEvent.target.id); this.switchGroup(xEvent.target.id); }); + xFieldset.appendChild(xGroupOption); return xFieldset; } - _createSimpleOption (sId, bDefault, sLabel) { + _createBlockOption (sId, bDefault, sLabel) { let xLine = createNode("div", {className: "grammalecte_tf_blockopt grammalecte_tf_underline"}); - xLine.appendChild(createNode("input", {type: "checkbox", id: sId, className: "grammalecte_tf_option"}, {default: bDefault})); - xLine.appendChild(createNode("label", {htmlFor: sId, textContent: sLabel, className: "opt_lbl largew"})); + xLine.appendChild(this._createOption(sId, bDefault, sLabel)); xLine.appendChild(createNode("div", {id: "res_"+sId, className: "grammalecte_tf_result", textContent: "·"})); return xLine; } + + _createOption (sId, bDefault, sLabel, sLinkedOptionsId="") { + let xOption = createNode("div", {id: sId, className: "grammalecte_tf_option grammalecte_tf_option_off", textContent: sLabel}, {selected: "false", default: bDefault, linked_ids: sLinkedOptionsId}); + xOption.addEventListener("click", (xEvent) => { this.switchOption(xEvent.target.id); }); + return xOption; + } // Hyphens - _createRadioBoxHyphens (sName, sIdEmDash, sIdEnDash, bDefaultEmDash) { + _createRadioBoxHyphens (sIdEmDash, sIdEnDash, bDefaultEmDash) { let xLine = createNode("div", {className: "grammalecte_tf_blockopt grammalecte_tf_indent"}); - xLine.appendChild(this._createInlineRadioOption(sName, sIdEmDash, "cadratin (—)", bDefaultEmDash)); - xLine.appendChild(this._createInlineRadioOption(sName, sIdEnDash, "demi-cadratin (—)", !bDefaultEmDash)); + xLine.appendChild(this._createOption(sIdEmDash, bDefaultEmDash, "cadratin (—)", sIdEnDash)); + xLine.appendChild(this._createOption(sIdEnDash, !bDefaultEmDash, "demi-cadratin (—)", sIdEmDash)); return xLine; } // Ligatures _createRadioBoxLigatures () { let xLine = createNode("div", {className: "grammalecte_tf_blockopt grammalecte_tf_underline"}); + xLine.appendChild(this._createOption("o_ts_ligature", true, "Ligatures")); + xLine.appendChild(this._createOption("o_ts_ligature_do", false, "faire", "o_ts_ligature_undo")); + xLine.appendChild(this._createOption("o_ts_ligature_undo", true, "défaire", "o_ts_ligature_do")); xLine.appendChild(createNode("div", {id: "res_"+"o_ts_ligature", className: "grammalecte_tf_result", textContent: "·"})); - xLine.appendChild(this._createInlineCheckboxOption("o_ts_ligature", "Ligatures", true)); - xLine.appendChild(this._createInlineRadioOption("liga", "o_ts_ligature_do", "faire", false)); - xLine.appendChild(this._createInlineRadioOption("liga", "o_ts_ligature_undo", "défaire", true)); return xLine; } _createLigaturesSelection () { let xLine = createNode("div", {className: "grammalecte_tf_blockopt grammalecte_tf_indent"}); - xLine.appendChild(this._createInlineCheckboxOption("o_ts_ligature_ff", "ff", true)); - xLine.appendChild(this._createInlineCheckboxOption("o_ts_ligature_fi", "fi", true)); - xLine.appendChild(this._createInlineCheckboxOption("o_ts_ligature_ffi", "ffi", true)); - xLine.appendChild(this._createInlineCheckboxOption("o_ts_ligature_fl", "fl", true)); - xLine.appendChild(this._createInlineCheckboxOption("o_ts_ligature_ffl", "ffl", true)); - xLine.appendChild(this._createInlineCheckboxOption("o_ts_ligature_ft", "ft", true)); - xLine.appendChild(this._createInlineCheckboxOption("o_ts_ligature_st", "st", false)); + xLine.appendChild(this._createOption("o_ts_ligature_ff", true, "ff")); + xLine.appendChild(this._createOption("o_ts_ligature_fi", true, "fi")); + xLine.appendChild(this._createOption("o_ts_ligature_ffi", true, "ffi")); + xLine.appendChild(this._createOption("o_ts_ligature_fl", true, "fl")); + xLine.appendChild(this._createOption("o_ts_ligature_ffl", true, "ffl")); + xLine.appendChild(this._createOption("o_ts_ligature_ft", true, "ft")); + xLine.appendChild(this._createOption("o_ts_ligature_st", false, "st")); return xLine; } // Apostrophes _createSingleLetterOptions () { let xLine = createNode("div", {className: "grammalecte_tf_blockopt grammalecte_tf_indent"}); - xLine.appendChild(this._createInlineCheckboxOption("o_ma_1letter_lowercase", "lettres isolées (j’ n’ m’ t’ s’ c’ d’ l’)", false)); - xLine.appendChild(this._createInlineCheckboxOption("o_ma_1letter_uppercase", "Maj.", false)); + xLine.appendChild(this._createOption("o_ma_1letter_lowercase", false, "lettres isolées (j’ n’ m’ t’ s’ c’ d’ l’)")); + xLine.appendChild(this._createOption("o_ma_1letter_uppercase", false, "Maj.")); return xLine; } // Ordinals _createOrdinalOptions () { let xLine = createNode("div", {className: "grammalecte_tf_blockopt grammalecte_tf_underline"}); + xLine.appendChild(this._createOption("o_ordinals_no_exponant", true, "Ordinaux (15e, XXIe…)")); + xLine.appendChild(this._createOption("o_ordinals_exponant", true, "e → ᵉ")); xLine.appendChild(createNode("div", {id: "res_"+"o_ordinals_no_exponant", className: "grammalecte_tf_result", textContent: "·"})); - xLine.appendChild(this._createInlineCheckboxOption("o_ordinals_no_exponant", "Ordinaux (15e, XXIe…)", true)); - xLine.appendChild(this._createInlineCheckboxOption("o_ordinals_exponant", "e → ᵉ", true)); return xLine; } - - // Inline option block - _createInlineCheckboxOption (sId, sLabel, bDefault) { - let xInlineBlock = createNode("div", {className: "grammalecte_tf_inlineblock"}); - xInlineBlock.appendChild(createNode("input", {type: "checkbox", id: sId, className: "grammalecte_tf_option"}, {default: bDefault})); - xInlineBlock.appendChild(createNode("label", {htmlFor: sId, textContent: sLabel, className: "opt_lbl"})); - return xInlineBlock; - } - - _createInlineRadioOption (sName, sId, sLabel, bDefault) { - let xInlineBlock = createNode("div", {className: "grammalecte_tf_inlineblock"}); - xInlineBlock.appendChild(createNode("input", {type: "radio", id: sId, name: sName, className:"grammalecte_tf_option"}, {default: bDefault})); - xInlineBlock.appendChild(createNode("label", {htmlFor: sId, className: "opt_lbl", textContent: sLabel})); - return xInlineBlock; - } - - /* Actions */ start (xTextArea) { this.xTextArea = xTextArea; @@ -182,24 +167,44 @@ let xPromise = browser.storage.local.get("tf_options"); xPromise.then(this.setOptions.bind(this), this.reset.bind(this)); } switchGroup (sOptName) { - if (document.getElementById(sOptName).checked) { + if (document.getElementById(sOptName).dataset.selected == "true") { document.getElementById(sOptName.slice(2)).style.opacity = 1; } else { document.getElementById(sOptName.slice(2)).style.opacity = 0.3; } this.resetProgressBar(); } + + switchOption (sOptName) { + let xOption = document.getElementById(sOptName); + if (xOption.dataset.linked_ids === "") { + xOption.dataset.selected = (xOption.dataset.selected == "true") ? "false" : "true"; + xOption.className = (xOption.dataset.selected == "true") ? xOption.className.replace("_off", "_on") : xOption.className.replace("_on", "_off"); + } else { + this.setOption(sOptName, true); + for (let sOptName of xOption.dataset.linked_ids.split("|")) { + this.setOption(sOptName, false); + } + } + } + + setOption (sOptName, bValue) { + let xOption = document.getElementById(sOptName); + xOption.dataset.selected = bValue; + xOption.className = (xOption.dataset.selected == "true") ? xOption.className.replace("_off", "_on") : xOption.className.replace("_on", "_off"); + } reset () { this.resetProgressBar(); - for (let xNode of document.getElementsByClassName("grammalecte_tf_option")) { - xNode.checked = (xNode.dataset.default === "true"); - if (xNode.id.startsWith("o_group_")) { - this.switchGroup(xNode.id); + for (let xOption of document.getElementsByClassName("grammalecte_tf_option")) { + xOption.dataset.selected = xOption.dataset.default; + xOption.className = (xOption.dataset.selected == "true") ? xOption.className.replace("_off", "_on") : xOption.className.replace("_on", "_off"); + if (xOption.id.startsWith("o_group_")) { + this.switchGroup(xOption.id); } } } resetProgressBar () { @@ -209,30 +214,38 @@ setOptions (oOptions) { if (oOptions.hasOwnProperty("tf_options")) { oOptions = oOptions.tf_options; } - for (let xNode of document.getElementsByClassName("grammalecte_tf_option")) { - //console.log(xNode.id + " > " + oOptions.hasOwnProperty(xNode.id) + ": " + oOptions[xNode.id] + " [" + xNode.dataset.default + "]"); - xNode.checked = (oOptions.hasOwnProperty(xNode.id)) ? oOptions[xNode.id] : (xNode.dataset.default === "true"); - if (document.getElementById("res_"+xNode.id) !== null) { - document.getElementById("res_"+xNode.id).textContent = ""; - } - if (xNode.id.startsWith("o_group_")) { - this.switchGroup(xNode.id); + for (let xOption of document.getElementsByClassName("grammalecte_tf_option")) { + //console.log(xOption.id + " > " + oOptions.hasOwnProperty(xOption.id) + ": " + oOptions[xOption.id] + " [" + xOption.dataset.default + "]"); + xOption.dataset.selected = (oOptions.hasOwnProperty(xOption.id)) ? oOptions[xOption.id] : xOption.dataset.default; + xOption.className = (xOption.dataset.selected == "true") ? xOption.className.replace("_off", "_on") : xOption.className.replace("_on", "_off"); + if (document.getElementById("res_"+xOption.id) !== null) { + document.getElementById("res_"+xOption.id).textContent = ""; + } + if (xOption.id.startsWith("o_group_")) { + this.switchGroup(xOption.id); } } } saveOptions () { let oOptions = {}; - for (let xNode of document.getElementsByClassName("grammalecte_tf_option")) { - oOptions[xNode.id] = xNode.checked; - //console.log(xNode.id + ": " + xNode.checked); + for (let xOption of document.getElementsByClassName("grammalecte_tf_option")) { + oOptions[xOption.id] = (xOption.dataset.selected == "true"); + //console.log(xOption.id + ": " + xOption.checked); } browser.storage.local.set({"tf_options": oOptions}); } + + isSelected (sOptName) { + if (document.getElementById(sOptName)) { + return (document.getElementById(sOptName).dataset.selected === "true"); + } + return false; + } apply () { try { const t0 = Date.now(); //window.setCursor("wait"); // change pointer @@ -240,238 +253,238 @@ let sText = this.xTextArea.value; document.getElementById('grammalecte_tf_progressbar').max = 7; let n1 = 0, n2 = 0, n3 = 0, n4 = 0, n5 = 0, n6 = 0, n7 = 0; // Restructuration - if (document.getElementById("o_group_struct").checked) { - if (document.getElementById("o_remove_hyphens_at_end_of_paragraphs").checked) { + if (this.isSelected("o_group_struct")) { + if (this.isSelected("o_remove_hyphens_at_end_of_paragraphs")) { [sText, n1] = this.removeHyphenAtEndOfParagraphs(sText); document.getElementById('res_o_remove_hyphens_at_end_of_paragraphs').textContent = n1; } - if (document.getElementById("o_merge_contiguous_paragraphs").checked) { + if (this.isSelected("o_merge_contiguous_paragraphs")) { [sText, n1] = this.mergeContiguousParagraphs(sText); document.getElementById('res_o_merge_contiguous_paragraphs').textContent = n1; } - document.getElementById("o_group_struct").checked = false; + this.setOption("o_group_struct", false); this.switchGroup("o_group_struct"); } document.getElementById('grammalecte_tf_progressbar').value = 1; // espaces surnuméraires - if (document.getElementById("o_group_ssp").checked) { - if (document.getElementById("o_end_of_paragraph").checked) { + if (this.isSelected("o_group_ssp")) { + if (this.isSelected("o_end_of_paragraph")) { [sText, n1] = this.formatText(sText, "end_of_paragraph"); document.getElementById('res_o_end_of_paragraph').textContent = n1; } - if (document.getElementById("o_between_words").checked) { + if (this.isSelected("o_between_words")) { [sText, n1] = this.formatText(sText, "between_words"); document.getElementById('res_o_between_words').textContent = n1; } - if (document.getElementById("o_start_of_paragraph").checked) { + if (this.isSelected("o_start_of_paragraph")) { [sText, n1] = this.formatText(sText, "start_of_paragraph"); document.getElementById('res_o_start_of_paragraph').textContent = n1; } - if (document.getElementById("o_before_punctuation").checked) { + if (this.isSelected("o_before_punctuation")) { [sText, n1] = this.formatText(sText, "before_punctuation"); document.getElementById('res_o_before_punctuation').textContent = n1; } - if (document.getElementById("o_within_parenthesis").checked) { + if (this.isSelected("o_within_parenthesis")) { [sText, n1] = this.formatText(sText, "within_parenthesis"); document.getElementById('res_o_within_parenthesis').textContent = n1; } - if (document.getElementById("o_within_square_brackets").checked) { + if (this.isSelected("o_within_square_brackets")) { [sText, n1] = this.formatText(sText, "within_square_brackets"); document.getElementById('res_o_within_square_brackets').textContent = n1; } - if (document.getElementById("o_within_quotation_marks").checked) { + if (this.isSelected("o_within_quotation_marks")) { [sText, n1] = this.formatText(sText, "within_quotation_marks"); document.getElementById('res_o_within_quotation_marks').textContent = n1; } - document.getElementById("o_group_ssp").checked = false; + this.setOption("o_group_ssp", false); this.switchGroup("o_group_ssp"); } document.getElementById('grammalecte_tf_progressbar').value = 2; // espaces typographiques - if (document.getElementById("o_group_nbsp").checked) { - if (document.getElementById("o_nbsp_before_punctuation").checked) { + if (this.isSelected("o_group_nbsp")) { + if (this.isSelected("o_nbsp_before_punctuation")) { [sText, n1] = this.formatText(sText, "nbsp_before_punctuation"); [sText, n2] = this.formatText(sText, "nbsp_repair"); document.getElementById('res_o_nbsp_before_punctuation').textContent = n1 - n2; } - if (document.getElementById("o_nbsp_within_quotation_marks").checked) { + if (this.isSelected("o_nbsp_within_quotation_marks")) { [sText, n1] = this.formatText(sText, "nbsp_within_quotation_marks"); document.getElementById('res_o_nbsp_within_quotation_marks').textContent = n1; } - if (document.getElementById("o_nbsp_before_symbol").checked) { + if (this.isSelected("o_nbsp_before_symbol")) { [sText, n1] = this.formatText(sText, "nbsp_before_symbol"); document.getElementById('res_o_nbsp_before_symbol').textContent = n1; } - if (document.getElementById("o_nbsp_within_numbers").checked) { + if (this.isSelected("o_nbsp_within_numbers")) { [sText, n1] = this.formatText(sText, "nbsp_within_numbers"); document.getElementById('res_o_nbsp_within_numbers').textContent = n1; } - if (document.getElementById("o_nbsp_before_units").checked) { + if (this.isSelected("o_nbsp_before_units")) { [sText, n1] = this.formatText(sText, "nbsp_before_units"); document.getElementById('res_o_nbsp_before_units').textContent = n1; } - document.getElementById("o_group_nbsp").checked = false; + this.setOption("o_group_nbsp", false); this.switchGroup("o_group_nbsp"); } document.getElementById('grammalecte_tf_progressbar').value = 3; // espaces manquants - if (document.getElementById("o_group_typo").checked) { - if (document.getElementById("o_ts_units").checked) { + if (this.isSelected("o_group_typo")) { + if (this.isSelected("o_ts_units")) { [sText, n1] = this.formatText(sText, "ts_units"); document.getElementById('res_o_ts_units').textContent = n1; } } - if (document.getElementById("o_group_space").checked) { - if (document.getElementById("o_add_space_after_punctuation").checked) { + if (this.isSelected("o_group_space")) { + if (this.isSelected("o_add_space_after_punctuation")) { [sText, n1] = this.formatText(sText, "add_space_after_punctuation"); [sText, n2] = this.formatText(sText, "add_space_repair"); document.getElementById('res_o_add_space_after_punctuation').textContent = n1 - n2; } - if (document.getElementById("o_add_space_around_hyphens").checked) { + if (this.isSelected("o_add_space_around_hyphens")) { [sText, n1] = this.formatText(sText, "add_space_around_hyphens"); document.getElementById('res_o_add_space_around_hyphens').textContent = n1; } - document.getElementById("o_group_space").checked = false; + this.setOption("o_group_space", false); this.switchGroup("o_group_space"); } document.getElementById('grammalecte_tf_progressbar').value = 4; // suppression - if (document.getElementById("o_group_delete").checked) { - if (document.getElementById("o_erase_non_breaking_hyphens").checked) { + if (this.isSelected("o_group_delete")) { + if (this.isSelected("o_erase_non_breaking_hyphens")) { [sText, n1] = this.formatText(sText, "erase_non_breaking_hyphens"); document.getElementById('res_o_erase_non_breaking_hyphens').textContent = n1; } - document.getElementById("o_group_delete").checked = false; + this.setOption("o_group_delete", false); this.switchGroup("o_group_delete"); } document.getElementById('grammalecte_tf_progressbar').value = 5; // signes typographiques - if (document.getElementById("o_group_typo").checked) { - if (document.getElementById("o_ts_apostrophe").checked) { + if (this.isSelected("o_group_typo")) { + if (this.isSelected("o_ts_apostrophe")) { [sText, n1] = this.formatText(sText, "ts_apostrophe"); document.getElementById('res_o_ts_apostrophe').textContent = n1; } - if (document.getElementById("o_ts_ellipsis").checked) { + if (this.isSelected("o_ts_ellipsis")) { [sText, n1] = this.formatText(sText, "ts_ellipsis"); document.getElementById('res_o_ts_ellipsis').textContent = n1; } - if (document.getElementById("o_ts_dash_start").checked) { - if (document.getElementById("o_ts_m_dash_start").checked) { + if (this.isSelected("o_ts_dash_start")) { + if (this.isSelected("o_ts_m_dash_start")) { [sText, n1] = this.formatText(sText, "ts_m_dash_start"); } else { [sText, n1] = this.formatText(sText, "ts_n_dash_start"); } document.getElementById('res_o_ts_dash_start').textContent = n1; } - if (document.getElementById("o_ts_dash_middle").checked) { - if (document.getElementById("o_ts_m_dash_middle").checked) { + if (this.isSelected("o_ts_dash_middle")) { + if (this.isSelected("o_ts_m_dash_middle")) { [sText, n1] = this.formatText(sText, "ts_m_dash_middle"); } else { [sText, n1] = this.formatText(sText, "ts_n_dash_middle"); } document.getElementById('res_o_ts_dash_middle').textContent = n1; } - if (document.getElementById("o_ts_quotation_marks").checked) { + if (this.isSelected("o_ts_quotation_marks")) { [sText, n1] = this.formatText(sText, "ts_quotation_marks"); document.getElementById('res_o_ts_quotation_marks').textContent = n1; } - if (document.getElementById("o_ts_spell").checked) { + if (this.isSelected("o_ts_spell")) { [sText, n1] = this.formatText(sText, "ts_spell"); document.getElementById('res_o_ts_spell').textContent = n1; } - if (document.getElementById("o_ts_ligature").checked) { + if (this.isSelected("o_ts_ligature")) { // ligatures typographiques : fi, fl, ff, ffi, ffl, ft, st - if (document.getElementById("o_ts_ligature_do").checked) { - if (document.getElementById("o_ts_ligature_ffi").checked) { + if (this.isSelected("o_ts_ligature_do")) { + if (this.isSelected("o_ts_ligature_ffi")) { [sText, n1] = this.formatText(sText, "ts_ligature_ffi_do"); } - if (document.getElementById("o_ts_ligature_ffl").checked) { + if (this.isSelected("o_ts_ligature_ffl")) { [sText, n2] = this.formatText(sText, "ts_ligature_ffl_do"); } - if (document.getElementById("o_ts_ligature_fi").checked) { + if (this.isSelected("o_ts_ligature_fi")) { [sText, n3] = this.formatText(sText, "ts_ligature_fi_do"); } - if (document.getElementById("o_ts_ligature_fl").checked) { + if (this.isSelected("o_ts_ligature_fl")) { [sText, n4] = this.formatText(sText, "ts_ligature_fl_do"); } - if (document.getElementById("o_ts_ligature_ff").checked) { + if (this.isSelected("o_ts_ligature_ff")) { [sText, n5] = this.formatText(sText, "ts_ligature_ff_do"); } - if (document.getElementById("o_ts_ligature_ft").checked) { + if (this.isSelected("o_ts_ligature_ft")) { [sText, n6] = this.formatText(sText, "ts_ligature_ft_do"); } - if (document.getElementById("o_ts_ligature_st").checked) { + if (this.isSelected("o_ts_ligature_st")) { [sText, n7] = this.formatText(sText, "ts_ligature_st_do"); } } - if (document.getElementById("o_ts_ligature_undo").checked) { - if (document.getElementById("o_ts_ligature_ffi").checked) { + if (this.isSelected("o_ts_ligature_undo")) { + if (this.isSelected("o_ts_ligature_ffi")) { [sText, n1] = this.formatText(sText, "ts_ligature_ffi_undo"); } - if (document.getElementById("o_ts_ligature_ffl").checked) { + if (this.isSelected("o_ts_ligature_ffl")) { [sText, n2] = this.formatText(sText, "ts_ligature_ffl_undo"); } - if (document.getElementById("o_ts_ligature_fi").checked) { + if (this.isSelected("o_ts_ligature_fi")) { [sText, n3] = this.formatText(sText, "ts_ligature_fi_undo"); } - if (document.getElementById("o_ts_ligature_fl").checked) { + if (this.isSelected("o_ts_ligature_fl")) { [sText, n4] = this.formatText(sText, "ts_ligature_fl_undo"); } - if (document.getElementById("o_ts_ligature_ff").checked) { + if (this.isSelected("o_ts_ligature_ff")) { [sText, n5] = this.formatText(sText, "ts_ligature_ff_undo"); } - if (document.getElementById("o_ts_ligature_ft").checked) { + if (this.isSelected("o_ts_ligature_ft")) { [sText, n6] = this.formatText(sText, "ts_ligature_ft_undo"); } - if (document.getElementById("o_ts_ligature_st").checked) { + if (this.isSelected("o_ts_ligature_st")) { [sText, n7] = this.formatText(sText, "ts_ligature_st_undo"); } } document.getElementById('res_o_ts_ligature').textContent = n1 + n2 + n3 + n4 + n5 + n6 + n7; } - document.getElementById("o_group_typo").checked = false; + this.setOption("o_group_typo", false); this.switchGroup("o_group_typo"); } document.getElementById('grammalecte_tf_progressbar').value = 6; // divers - if (document.getElementById("o_group_misc").checked) { - if (document.getElementById("o_ordinals_no_exponant").checked) { - if (document.getElementById("o_ordinals_exponant").checked) { + if (this.isSelected("o_group_misc")) { + if (this.isSelected("o_ordinals_no_exponant")) { + if (this.isSelected("o_ordinals_exponant")) { [sText, n1] = this.formatText(sText, "ordinals_exponant"); } else { [sText, n1] = this.formatText(sText, "ordinals_no_exponant"); } document.getElementById('res_o_ordinals_no_exponant').textContent = n1; } - if (document.getElementById("o_etc").checked) { + if (this.isSelected("o_etc")) { [sText, n1] = this.formatText(sText, "etc"); document.getElementById('res_o_etc').textContent = n1; } - if (document.getElementById("o_missing_hyphens").checked) { + if (this.isSelected("o_missing_hyphens")) { [sText, n1] = this.formatText(sText, "missing_hyphens"); document.getElementById('res_o_missing_hyphens').textContent = n1; } - if (document.getElementById("o_ma_word").checked) { + if (this.isSelected("o_ma_word")) { [sText, n1] = this.formatText(sText, "ma_word"); - if (document.getElementById("o_ma_1letter_lowercase").checked) { + if (this.isSelected("o_ma_1letter_lowercase")) { [sText, n1] = this.formatText(sText, "ma_1letter_lowercase"); - if (document.getElementById("o_ma_1letter_uppercase").checked) { + if (this.isSelected("o_ma_1letter_uppercase")) { [sText, n1] = this.formatText(sText, "ma_1letter_uppercase"); } } document.getElementById('res_o_ma_word').textContent = n1; } - document.getElementById("o_group_misc").checked = false; + this.setOption("o_group_misc", false); this.switchGroup("o_group_misc"); } document.getElementById('grammalecte_tf_progressbar').value = document.getElementById('grammalecte_tf_progressbar').max; // end of processing ADDED gc_lang/fr/webext/img/selected_off_20.png Index: gc_lang/fr/webext/img/selected_off_20.png ================================================================== --- gc_lang/fr/webext/img/selected_off_20.png +++ gc_lang/fr/webext/img/selected_off_20.png cannot compute difference between binary files ADDED gc_lang/fr/webext/img/selected_on_20.png Index: gc_lang/fr/webext/img/selected_on_20.png ================================================================== --- gc_lang/fr/webext/img/selected_on_20.png +++ gc_lang/fr/webext/img/selected_on_20.png cannot compute difference between binary files