I am a paragraph. And you are going to love me
\r\n */\r\n\r\n };\r\n \r\n hide(){\r\n $(\".\"+this.photoAndDescriptionClass).attr(\"data-smetio-is-hidden\", true);\r\n };\r\n\r\n show(){\r\n $(\".\"+this.photoAndDescriptionClass).attr(\"data-smetio-is-hidden\", false);\r\n };\r\n\r\n render() {\r\n\r\n this.events();\r\n\r\n setTimeout(() => {\r\n $(`.${this.imageClass}`).attr(\"src\", this.photo);\r\n }, 700);\r\n\r\n return this.getPhotosDescription();\r\n \r\n };\r\n \r\n events() {\r\n \r\n $(\"body\").on(\"mousedown\", \".\"+this.photoAndDescriptionClass, ()=>{\r\n \r\n if(this.onClicked) this.onClicked({id: this.id});\r\n \r\n });\t\r\n\r\n $(\"body\").on(\"mouseenter\", \".\"+this.photoAndDescriptionClass, ()=>{\r\n \r\n if(this.onMouseEnter) this.onMouseEnter({id: this.id});\r\n \r\n });\t\r\n\r\n $(\"body\").on(\"mouseleave\", \".\"+this.photoAndDescriptionClass, ()=>{\r\n \r\n if(this.onMouseLeave) this.onMouseLeave({id: this.id});\r\n \r\n });\t \r\n \r\n };\r\n\r\n};\r\n","//import {test_function} from \"./../functions/test_function.js\";\r\n\r\n\r\n\r\nimport { getId } from \"../../universal_methods/getId.js\";\r\nimport { setId } from \"../../universal_methods/setId.js\";\r\nimport { generateId } from \"../../universal_methods/generateId.js\";\r\nimport { isEmpty } from \"../../universal_methods/isEmpty.js\";\r\nimport { getAttributes } from \"../../universal_methods/getAttributes.js\";\r\nimport { toggleDisplay } from \"../../universal_methods/toggleDisplay.js\";\r\n\r\nimport { setTxt } from \"../../universal_methods/setTxt.js\";\r\nimport { SmetioPhotoAndDescription } from \"../../smetioPhotoAndDescription/v1.0.0/smetioPhotoAndDescription.js\";\r\nimport { REVIVE_CHECKBOX_SEPERATOR } from \"@schaniag/private\";\r\n// import { replaceLastOccuranceInString } from \"../../../functions/replace/replaceLastOccuranceInString.js\";\r\n// import { op } from \"@tensorflow/tfjs\";\r\n\r\n\r\n\r\n\r\n\r\n\r\n//import \"./styles/_photoCheckbox.scss\";\r\n\r\n// export class SmetioPhotoCheckbox extends SmetioPhotoAndDescription {\r\n\r\nexport class SmetioPhotoCheckbox {\r\n\r\n constructor(data = {\r\n attributes: {},\r\n changeEvents: {\r\n onChecked: (value) => { },\r\n onUnChecked: (value) => { },\r\n }\r\n }) {\r\n\r\n // super(data);\r\n\r\n\r\n this.getId = getId;\r\n this.setId = setId;\r\n this.generateId = generateId;\r\n this.isEmpty = isEmpty;\r\n this.getAttributes = getAttributes;\r\n this.toggleDisplay = toggleDisplay;\r\n this.setTxt = setTxt;\r\n\r\n\r\n // this.isReadonly = data.attributes.isReadonly || false;\r\n // this.inputIsChecked = data.attributes.checked === true ? true : false;\r\n // this.changeEvents = data.changeEvents;\r\n this.isReadonly = data.attributes ? data.attributes.isReadonly : false;\r\n this.viewStyle = data.attributes ? data.attributes.viewStyle || \"listView\" : \"listView\"; // \"listView\" OR cardView\r\n this.photoAndDescriptionSettings = data.photoAndDescriptionSettings || {};\r\n /* \r\n orientation:\"vertical\", \r\n boxWidth:\"45%\", \r\n boxMargin:\"2.5px\", \r\n boxPadding:\"2.5px\", \r\n photoWidth:\"50px\",\r\n photoVPosition: \"center\",\r\n descriptionVPosition: \"center\",\r\n */\r\n\r\n\r\n this.onChecked = data.events ? data.events.onChecked : null;\r\n this.onUnChecked = data.events ? data.events.onUnChecked : null;\r\n this.onChange = data.events ? data.events.onChange : null;\r\n this.onFocus = data.events ? data.events.onFocus : null;\r\n this.onFocusOut = data.events ? data.events.onFocusOut : null;\r\n\r\n\r\n\r\n this.validation = data.validation || {};\r\n this.options = data.options;\r\n this.optionsClasses = {};\r\n this.valueObject = {};\r\n this.value = data.attributes ? data.attributes.value : \"\";\r\n this.minLength = this.validation.minLength || 2;\r\n this.maxLength = this.validation.maxLength || 3;\r\n this.showSearchBar = data.showSearchBar === false ? false : true;\r\n this.label = data.label;\r\n this.headingSize = data.headingSize || \"h6\";\r\n this.headingBottomMargin = data.headingBottomMargin || 20;\r\n this.instruction = data.instruction;\r\n this.isReadonly = data.attributes ? data.attributes.isReadonly: false;\r\n this.isHidden = data.isHidden;\r\n\r\n\r\n\r\n this.setId();\r\n // this.getId();\r\n\r\n this.photoCheckboxClass = \"smetio-photo-checkbox-\" + this.id;\r\n this.photoCheckboxAttributes = {\r\n \"data-smetio-read-only\": this.isReadonly,\r\n \"data-smetio-is-visible\": this.isHidden === true ? false : true,\r\n class: [\"smetio-photo-checkbox\", this.photoCheckboxClass]\r\n };\r\n\r\n // optionsDiv\r\n this.optionsDivClass = \"smetio-photo-checkbox-options-\" + this.id;\r\n this.optionsDivAttributes = {\r\n class: [\"smetio-photo-checkbox-options\", this.optionsDivClass]\r\n };\r\n\r\n // searchAndSelectAll \r\n this.searchAndSelectAllClass = \"smetio-photo-checkbox-search-and-select-all-\" + this.id;\r\n this.searchAndSelectAllAttributes = {\r\n class: [\"smetio-photo-checkbox-search-and-select-all\", this.searchAndSelectAllClass]\r\n };\r\n\r\n // searchDiv\r\n this.searchDivClass = \"smetio-photo-checkbox-search-\" + this.id;\r\n this.searchDivAttributes = {\r\n class: [\"smetio-photo-checkbox-search\", this.searchDivClass]\r\n };\r\n\r\n // searchInput\r\n this.searchInputClass = \"smetio-photo-checkbox-search-input-\" + this.id;\r\n this.searchInputAttributes = {\r\n type: \"text\",\r\n placeholder: \"Search\",\r\n class: [\"smetio-photo-checkbox-search-input\", this.searchInputClass]\r\n };\r\n\r\n // selectAndDeselectDiv \r\n this.selectAndDeselectDivClass = \"smetio-photo-checkbox-select-and-deselect-\" + this.id;\r\n this.selectAndDeselectDivAttributes = {\r\n class: [\"smetio-photo-checkbox-select-and-deselect\", this.selectAndDeselectDivClass]\r\n };\r\n\r\n // selectAll\r\n this.selectAllClass = \"smetio-photo-checkbox-select-all-\" + this.id;\r\n this.selectAllAttributes = {\r\n class: [\"smetio-photo-checkbox-select-and-deselect-btn\", \"smetio-photo-checkbox-select-all\", this.selectAllClass]\r\n };\r\n\r\n // deSelectAll\r\n this.deSelectAllClass = \"smetio-photo-checkbox-de-select-all-\" + this.id;\r\n this.deSelectAllAttributes = {\r\n class: [\"smetio-photo-checkbox-select-and-deselect-btn\", \"smetio-photo-checkbox-de-select-all\", this.deSelectAllClass]\r\n };\r\n\r\n // errorText\r\n this.errorTextClass = \"smetio-photo-checkbox-error-text-\" + this.id;\r\n this.errorTextAttributes = {\r\n class: [\"smetio-danger-text\", \"smetio-p-text\", \"smetio-margin-bottom-15\", \"smetio-photo-checkbox-error-text\", this.errorTextClass]\r\n };\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n };\r\n changeReadonlyStatus({ newStatus = true }) {\r\n\r\n this.isReadonly = newStatus;\r\n\r\n $(\".\" + this.photoCheckboxClass).attr(\"data-smetio-read-only\", this.isReadonly);\r\n\r\n };\r\n\r\n getValue() {\r\n return this.value;\r\n };\r\n\r\n async extractValue(validate) {\r\n\r\n const replaceLastOccuranceInString = (await import(/* webpackPrefetch: true */ \"../../../functions/replace/replaceLastOccuranceInString.js\")).replaceLastOccuranceInString;\r\n\r\n this.value = \"\";\r\n\r\n for (const key in this.valueObject) {\r\n this.value += this.valueObject[key] + REVIVE_CHECKBOX_SEPERATOR;\r\n };\r\n\r\n this.value = replaceLastOccuranceInString(REVIVE_CHECKBOX_SEPERATOR, \"\", this.value);\r\n\r\n console.log(\"The validate 4 is \", validate);\r\n\r\n if(validate !== false) this.isValid();\r\n return this.value;\r\n\r\n };\r\n\r\n scrollToTop() {\r\n\r\n // $(`.${this.photoCheckboxClass}`).parent().animate({ scrollTop: 0 }, \"fast\");\r\n $(`.${this.photoCheckboxClass}`).parents().animate({ scrollTop: 0 }, \"fast\");\r\n $(`.${this.errorTextClass}`).parents().animate({ scrollTop: 0 }, \"fast\");\r\n };\r\n\r\n showError(error) {\r\n\r\n if(this.isEmpty(error)) return false;\r\n\r\n console.log(\"I am showing error \", error);\r\n\r\n const errorText = this.setTxt({\r\n attributes: this.selectAllAttributes,\r\n txt: error,\r\n type: \"html\"\r\n });\r\n\r\n $(\".\" + this.errorTextClass).html(errorText).show();\r\n\r\n this.scrollToTop();\r\n\r\n return false;\r\n\r\n };\r\n\r\n hideError() {\r\n $(\".\" + this.errorTextClass).hide();\r\n return true;\r\n };\r\n\r\n isValid() {\r\n\r\n console.log(\"Object.keys(this.valueObject).length is \", Object.keys(this.valueObject).length);\r\n console.log(\"this.valueObject is \", this.valueObject);\r\n\r\n if (Object.keys(this.valueObject).length > this.maxLength) return this.showError(\"txt1120\");\r\n if (Object.keys(this.valueObject).length < this.minLength) return this.showError(\"txt1121\");\r\n\r\n return this.hideError();\r\n };\r\n\r\n async select(id) {\r\n\r\n if(this.optionsClasses[id][\"attributes\"][\"selected\"] === true) return true;\r\n\r\n \r\n \r\n\r\n const { smetioPhotoAndDescription, attributes } = this.optionsClasses[id];\r\n\r\n smetioPhotoAndDescription.select(id);\r\n\r\n this.optionsClasses[id][\"attributes\"][\"selected\"] = true;\r\n \r\n this.valueObject[id] = this.optionsClasses[id][\"attributes\"][\"value\"];\r\n if (this.onChecked) this.onChecked({ id, valueObject: this.valueObject, value:this.value });\r\n\r\n // return true;\r\n\r\n if(this.isSmetioPhotoRadioInput === true) this.deSelectAll({validate:false, exclude:id});\r\n\r\n const validate = this.isSmetioPhotoRadioInput === true ? false : true;\r\n\r\n return this.extractValue(validate);\r\n\r\n };\r\n\r\n deSelect(id, validate) {\r\n\r\n if(this.optionsClasses[id][\"attributes\"][\"selected\"] === false) return true;\r\n\r\n const { smetioPhotoAndDescription, attributes } = this.optionsClasses[id];\r\n\r\n smetioPhotoAndDescription.deselect(id);\r\n if (id in this.valueObject) delete this.valueObject[id]; \r\n this.optionsClasses[id][\"attributes\"][\"selected\"] = false;\r\n\r\n if (this.onUnChecked) this.onUnChecked({ id, valueObject: this.valueObject, value:this.value });\r\n\r\n // return true;\r\n console.log(\"The validate 3 is \", validate);\r\n return this.extractValue(validate);\r\n\r\n };\r\n\r\n selectAll() {\r\n for (const key in this.optionsClasses) {\r\n if(this.optionsClasses[key][\"attributes\"][\"selected\"] === true) continue;\r\n this.select(key);\r\n };\r\n // return this.extractValue();\r\n };\r\n\r\n deSelectAll(data={}) {\r\n\r\n const {validate, exclude} = data;\r\n\r\n console.log(\"validate 1 is \", validate);\r\n\r\n for (const key in this.optionsClasses) {\r\n\r\n if(key == exclude) continue;\r\n\r\n if(this.optionsClasses[key][\"attributes\"][\"selected\"] === false) continue;\r\n\r\n console.log(\"The validate 2 is \", validate);\r\n this.deSelect(key, validate);\r\n };\r\n // return this.extractValue();\r\n };\r\n\r\n\r\n toggleSelect(id) {\r\n\r\n console.log(\"@@@@ Toggling select \", id);\r\n\r\n if (!this.optionsClasses[id]) return false;\r\n\r\n const { smetioPhotoAndDescription, attributes } = this.optionsClasses[id];\r\n\r\n const selectToggled = attributes.selected === true ? this.deSelect(id) : this.select(id);\r\n\r\n // return this.extractValue();\r\n\r\n };\r\n\r\n getSettingsForPhotoAndDescription() {\r\n\r\n if (this.photoAndDescriptionSettings) return this.photoAndDescriptionSettings;\r\n\r\n return {\r\n orientation: \"horizontal\",\r\n boxWidth: this.viewStyle == \"listView\" ? \"100%\" : \"45%\",\r\n boxPadding: this.viewStyle == \"listView\" ? \"10px\" : \"5px\",\r\n boxMargin: this.viewStyle == \"listView\" ? \"10px\" : \"5px\",\r\n descriptionVPosition: this.viewStyle == \"listView\" ? \"center\" : \"top\",\r\n photoWidth: this.viewStyle == \"listView\" ? \"100px\" : \"50px\",\r\n photoVPosition: this.viewStyle == \"listView\" ? \"center\" : \"top\",\r\n };\r\n\r\n // orientation:\"vertical\", \r\n // boxWidth:\"45%\", \r\n // boxMargin:\"2.5px\", \r\n // boxPadding:\"2.5px\", \r\n // photoWidth:\"50px\",\r\n // photoVPosition: \"center\",\r\n // descriptionVPosition: \"center\",\r\n\r\n };\r\n\r\n getOptions() {\r\n\r\n /* this.options = [\r\n {\r\n text: \"Nigeria\",\r\n photo: \"http://localhost:3000/img/home_page_front_photo_1.jpeg\", // FOR PHOTO CHECKBOX AND PHOTO RADIO\r\n attributes: {\r\n value: \"ng\",\r\n selected: true // OR FALSE \r\n }\r\n },\r\n {\r\n text: \"Norway\",\r\n photo: \"http://localhost:3000/img/home_page_front_photo_2.jpeg\", // FOR PHOTO CHECKBOX AND PHOTO RADIO\r\n attributes: {\r\n value: \"no\",\r\n selected: false // OR FALSE \r\n }\r\n },\r\n\r\n {\r\n text: \"Finland\",\r\n photo: \"http://localhost:3000/img/home_page_front_photo_3.jpeg\", // FOR PHOTO CHECKBOX AND PHOTO RADIO\r\n attributes: {\r\n value: \"fi\",\r\n selected: true // OR FALSE \r\n }\r\n },\r\n\r\n {\r\n text: \"Poland\",\r\n photo: \"http://localhost:3000/img/home_page_front_photo_4.jpeg\", // FOR PHOTO CHECKBOX AND PHOTO RADIO\r\n attributes: {\r\n value: \"pl\",\r\n selected: false // OR FALSE \r\n }\r\n },\r\n {\r\n text: \"Nigeria\",\r\n photo: \"http://localhost:3000/img/home_page_front_photo_1.jpeg\", // FOR PHOTO CHECKBOX AND PHOTO RADIO\r\n attributes: {\r\n value: \"ng\",\r\n selected: true // OR FALSE \r\n }\r\n },\r\n {\r\n text: \"Norway\",\r\n photo: \"http://localhost:3000/img/home_page_front_photo_2.jpeg\", // FOR PHOTO CHECKBOX AND PHOTO RADIO\r\n attributes: {\r\n value: \"no\",\r\n selected: false // OR FALSE \r\n }\r\n },\r\n\r\n {\r\n text: \"Finland\",\r\n photo: \"http://localhost:3000/img/home_page_front_photo_3.jpeg\", // FOR PHOTO CHECKBOX AND PHOTO RADIO\r\n attributes: {\r\n value: \"fi\",\r\n selected: true // OR FALSE \r\n }\r\n },\r\n\r\n {\r\n text: \"Poland\",\r\n photo: \"http://localhost:3000/img/home_page_front_photo_4.jpeg\", // FOR PHOTO CHECKBOX AND PHOTO RADIO\r\n attributes: {\r\n value: \"pl\",\r\n selected: false // OR FALSE \r\n }\r\n },\r\n ];\r\n */\r\n let output = \"\";\r\n\r\n const settings = this.getSettingsForPhotoAndDescription();\r\n\r\n\r\n for (let i = 0; i < this.options.length; i++) {\r\n const option = this.options[i];\r\n const smetioPhotoAndDescription = new SmetioPhotoAndDescription({\r\n icon:option.icon,\r\n photo: option.photo,\r\n description: option.text,\r\n isSelected: option.attributes.selected,\r\n ...settings,\r\n onClicked: (data = {}) => {\r\n const { id } = data;\r\n if( this.isSmetioPhotoRadioInput !== true) return this.toggleSelect(id);\r\n return this.select(id);\r\n }\r\n });\r\n\r\n const id = smetioPhotoAndDescription.getId();\r\n \r\n\r\n this.optionsClasses[id] = {};\r\n this.optionsClasses[id].smetioPhotoAndDescription = smetioPhotoAndDescription;\r\n this.optionsClasses[id].attributes = option.attributes;\r\n this.optionsClasses[id].attributes.text = option.text;\r\n if(option.attributes.selected == true) this.valueObject[id] = option.attributes.value;\r\n\r\n \r\n // output += smetioPhotoAndDescription.render();\r\n const output = smetioPhotoAndDescription.render();\r\n $(`.${this.optionsDivClass}`).append(output);\r\n\r\n const validate = false;\r\n this.extractValue(validate);\r\n\r\n };\r\n\r\n };\r\n\r\n getSelectAndDeselectBtn(){\r\n\r\n const selectAllText = this.setTxt({\r\n attributes: this.selectAllAttributes,\r\n txt: \"txt265\",\r\n type: \"title\"\r\n });\r\n\r\n const deselectAllText = this.setTxt({\r\n attributes: this.deSelectAllAttributes,\r\n txt: \"txt263\",\r\n type: \"title\"\r\n });\r\n\r\n return `\r\n${instructionText}
` : \"\";\r\n\r\n return `\r\n\r\n\r\n