diff --git a/assets/css/pages/settings/sections/accountImage.css b/assets/css/pages/settings/sections/accountImage.css index 7b5bad02..6f798a16 100644 --- a/assets/css/pages/settings/sections/accountImage.css +++ b/assets/css/pages/settings/sections/accountImage.css @@ -4,7 +4,7 @@ * @author Pierre HUBERT */ -.box-account-image-settings { +.box-account-image-settings .box-body { text-align: center; } @@ -14,4 +14,8 @@ margin: auto; margin-top: 10px; margin-bottom: 10px; +} + +.box-account-image-settings .account-image-visibility-form { + text-align: justify; } \ No newline at end of file diff --git a/assets/js/common/utils.js b/assets/js/common/utils.js index 365f1690..e9ebd757 100644 --- a/assets/js/common/utils.js +++ b/assets/js/common/utils.js @@ -191,8 +191,9 @@ function checkMail(emailAddress){ * @param {Object} infos Informations about the formgroup element to create * * @info {HTMLElement} target The target of the field * * @info {String} label The label of the field + * * @info {string} name The name of the field * * @info {String} placeholder The placeholder of the field - * * @info {Boolean} checked Defines if the fields has to be checked or not (checkbox only) + * * @info {Boolean} checked Defines if the fields has to be checked or not (checkbox/radio only) * * @info {Boolean} multiple Defines if the fields can accept more than one response * * @info {String} type The type of the field * * @info {string} value The default value of the input @@ -245,6 +246,41 @@ function createFormGroup(infos){ radioClass: 'iradio_flat-blue' }); } + + //In case of radio input + else if(infos.type == "radio"){ + + //Create radio + var input = createElem("input", labelElem) ; + input.type = "radio"; + input.disabled = disabled; + + if(infos.name) + input.name = infos.name; + + if(infos.value) + input.value = infos.value; + + //Check if input has to be checked by default + if(infos.checked){ + if(infos.checked === true){ + input.checked = "true"; + } + } + + //Add label value + var labelValue = createElem("span", labelElem); + labelValue.innerHTML = " "+infos.label; + + //Enable iCheck + $(input).iCheck({ + checkboxClass: 'icheckbox_flat-blue', + radioClass: 'iradio_flat-blue' + }); + + } + + //Select2 else if(infos.type == "select2"){ //In case of select2 element //Check for label diff --git a/assets/js/components/settings/interface.js b/assets/js/components/settings/interface.js index 4a0dab76..48d1e699 100644 --- a/assets/js/components/settings/interface.js +++ b/assets/js/components/settings/interface.js @@ -117,5 +117,19 @@ ComunicWeb.components.settings.interface = { var apiURI = "settings/delete_account_image"; var params = {}; ComunicWeb.common.api.makeAPIrequest(apiURI, params, true, callback); + }, + + /** + * Update the visibility of the account image + * + * @param {string} visibility The new visibility level for the account image + * @param {function} callback + */ + updateAccountImageVisibility: function(visibility, callback){ + var apiURI = "settings/set_account_image_visibility"; + var params = { + visibility: visibility + }; + ComunicWeb.common.api.makeAPIrequest(apiURI, params, true, callback); } } \ No newline at end of file diff --git a/assets/js/pages/settings/sections/accountImage.js b/assets/js/pages/settings/sections/accountImage.js index dddb4dfc..9a259333 100644 --- a/assets/js/pages/settings/sections/accountImage.js +++ b/assets/js/pages/settings/sections/accountImage.js @@ -152,6 +152,7 @@ ComunicWeb.pages.settings.sections.accountImage = { innerHTML: "Delete image" }); + //Make delete button lives deleteImage.addEventListener("click", function(e){ ComunicWeb.common.messages.confirm("Do you really want to delete your account image ? The operation can not be reverted !", function(res){ @@ -181,5 +182,80 @@ ComunicWeb.pages.settings.sections.accountImage = { }); }); + + //Add the form to update visibility level + add_space(accountImageForm); + add_space(accountImageForm); + + var visibilityForm = createElem2({ + appendTo: accountImageForm, + type: "form", + class: "account-image-visibility-form" + }); + + //Title + createElem2({ + appendTo: visibilityForm, + type: "h4", + innerHTML: "Account image visibility" + }); + + //Add the options + //Open + createFormGroup({ + target: visibilityForm, + label: "Everyone", + name: "account-image-visibility", + type: "radio", + value: "open", + checked: info.visibility == "open" + }); + + //Public + createFormGroup({ + target: visibilityForm, + label: "All Comunic users", + name: "account-image-visibility", + type: "radio", + value: "public", + checked: info.visibility == "public" + }); + + //Friends + createFormGroup({ + target: visibilityForm, + label: "My friends only", + name: "account-image-visibility", + type: "radio", + value: "friends", + checked: info.visibility == "friends" + }); + + //Add update button + var updateButton = createElem2({ + appendTo: visibilityForm, + type: "div", + class: "btn btn-primary", + innerHTML: "Update visibility" + }); + + updateButton.addEventListener("click", function(e){ + + //Get the new visibility level + var newVisibility = visibilityForm.elements["account-image-visibility"].value; + + //Make a request over the server + ComunicWeb.components.settings.interface.updateAccountImageVisibility(newVisibility, function(callback){ + + //Check for errors + if(callback.error){ + notify("Could update the visibility of your account image!", "danger"); + } + else + notify("The visibility of your account image have been successfully updated!", "success"); + + }); + + }); } } \ No newline at end of file