inherit
210338
0
Apr 26, 2024 22:43:02 GMT -8
RichardInTN
472
June 2014
richardintn
|
Post by RichardInTN on Sept 3, 2017 17:50:38 GMT -8
Because as far as I can tell, that's not a code that reads a local location that they can change at will but will stay constant across all openings and refreshes of web-pages without prompting until/unless they intentionally change it (plus I thought you were just answering Kami 's question... not posing a possible solution). I think you misunderstood! Peter can correct me if I'm wrong, but I don't think I am: - The solution that Peter proposed would NOT require having to re-select the image on every page load. While yes, a file picker is necessary, that is simply so that the *browser* can store the data (the base64 data, rather than the image location as I originally thought) via localStorage, which would therefore mean that the data will exist for the user until cleared (either clearing the image or replacing it with a new image). If localStorage stores this data until the user clears it, then the file picker would, logically, not appear on every page / need to constantly be updated because the data is stored indefinitely until the user chooses to clear it. But when you close the browser couldn't the image location be lost (people who's security settings clear cache and/or cookies daily, for example)? Also, what about a new page load? Wouldn't data for the image need to be re-loaded because the new page (not a refresh, but a completely different page, like a new/different subforum or new/different thread, on a new tab or it's own window) wouldn't necessarily have access to that page's information? Or what if you accidentally click out of PB because instead of "open in new tab" you just accidentally clicked on an outside resource link (like clicking over to a news company's website to read a linked article)? I just see too many ways for that to fail.
|
|
Kami
Forum Cat
Posts: 40,042
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,042
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Sept 3, 2017 17:59:04 GMT -8
I think you misunderstood! Peter can correct me if I'm wrong, but I don't think I am: - The solution that Peter proposed would NOT require having to re-select the image on every page load. While yes, a file picker is necessary, that is simply so that the *browser* can store the data (the base64 data, rather than the image location as I originally thought) via localStorage, which would therefore mean that the data will exist for the user until cleared (either clearing the image or replacing it with a new image). If localStorage stores this data until the user clears it, then the file picker would, logically, not appear on every page / need to constantly be updated because the data is stored indefinitely until the user chooses to clear it. But when you close the browser couldn't the image location be lost (people who's security settings clear cache and/or cookies daily, for example)? Also, what about a new page load? Wouldn't data for the image need to be re-loaded because the new page (not a refresh, but a completely different page, like a new/different subforum or new/different thread, on a new tab or it's own window) wouldn't necessarily have access to that page's information? Or what if you accidentally click out of PB because instead of "open in new tab" you just accidentally clicked on an outside resource link (like clicking over to a news company's website to read a linked article)? I just see too many ways for that to fail. Again to clarify: you are not storing the image location but the base64 data, as Peter stated.
There's no way to protect localStorage from being cleared by user choice. If the user does not want to upload the image to a public host, there would be no other way for the forum to access and then store the data from their local machine. Like... how could it? In order for the forum -- an externally hosted forum -- to access the data, it would need to be uploaded either directly to the forum (which regular members don't have access to save for attachments, which wouldn't work in this case since attachments are anchored to the post they are attached to) or to a third party public host. If you want the image to be stored on the local machine with no upload then you really back yourself into a corner because as far as I am aware, it is impossible to display a locally stored (ie on your machine) image on a webpage without hosting it OR without making it browser-dependent (eg: through the use of a script that affects your browser).
And for the third portion of your statement, I don't understand why you think that the image would need to be "reloaded for the new page" when I have repeatedly stated it wouldn't. The javascript would (hopefully obviously) need to be written in such a manner that it makes sure to check the domain of the site it's on to apply the image to all associated pages on that domain, which would then mean the image is unaffected by changing pages either on or offsite.
EDIT: In retrospect this might sound a little rude, so I do apologise if that's how it's coming across because that's not my intention. I'm just confused as to how I can convey this in any other way that I hadn't stated already, or that Peter hadn't stated already.
|
|
inherit
210338
0
Apr 26, 2024 22:43:02 GMT -8
RichardInTN
472
June 2014
richardintn
|
Post by RichardInTN on Sept 3, 2017 18:22:08 GMT -8
You aren't a rude person (at least not in my experience, anyway), so I didn't take any of that as being presented rudely... let's get that out of the way first.
I freely admit that I'm having trouble grasping what's being said because it contradicts all my experience with web browsers.
In my experience nothing is "carried over" to new tabs/windows that's not provided by the source server (like once you are logged in, the SERVER knows that you are logged in, so it now acts like you are logged in. That's NOT stored locally, in perpetuity). Maybe that's because I never used any web pages that were designed to avoid doing that... I don't know.
|
|
Kami
Forum Cat
Posts: 40,042
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,042
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Sept 3, 2017 18:29:38 GMT -8
You aren't a rude person (at least not in my experience, anyway), so I didn't take any of that as being presented rudely... let's get that out of the way first. I freely admit that I'm having trouble grasping what's being said because it contradicts all my experience with web browsers. In my experience nothing is "carried over" to new tabs/windows that's not provided by the source server (like once you are logged in, the SERVER knows that you are logged in, so it now acts like you are logged in. That's NOT stored locally, in perpetuity). Maybe that's because I never used any web pages that were designed to avoid doing that... I don't know. I think perhaps localStorage is unfamiliar to you in general? So that's why I'm trying to explain it. Despite your misgivings and experience otherwise with similar features, localStorage is a browser feature that indefinitely stores data across all browser sessions until cleared by the user. Think of this as a postulate: this is the base definition of what localStorage is and does, and it is separate from your experiences with other browser storage features that do not do this.
Because localStorage functions in this manner, any script that references data stored in localStorage will continue to function without needing a manual re-input of data unless, again, that data is cleared (intentionally or unintentionally) by the user in question.
Perhaps an easier way to think of this is a permanent cookie. Like cookies, you can clear the data, but unlike cookies they have no expiration, affect whatever it's meant to affect and ONLY what it's meant to affect, AND can store a larger amount of data.
|
|
inherit
210338
0
Apr 26, 2024 22:43:02 GMT -8
RichardInTN
472
June 2014
richardintn
|
Post by RichardInTN on Sept 3, 2017 18:33:51 GMT -8
So as to help keep myself from being too obtuse, I put that code in the Global Header of my Test Kitchen and the results were somewhat less than spectacular. I got two buttons: "Choose File" and "Clear Image" and a continuous stream of the code-data itself. "Choose File" has a space beside it that says "No file chose" and when clicked it opens up a picker window (which lets me pick an image), and the title of the image populates the space beside the button, but the background doesn't change to the image. Upon page refresh, the area beside the "Choose File" is once again saying "No file chosen", and there's still no change in background. If I have selected a file, the "Clear Image" button does nothing to remove the existing image address. Was I supposed to wrap it in Script or Style tags?
|
|
Kami
Forum Cat
Posts: 40,042
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,042
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Sept 3, 2017 18:36:36 GMT -8
all javascript should be wrapped in script tags (style tags are for CSS, cascading STYLE sheets), but I do believe that Peter's code is incomplete as it was a sample. This board is for coding help, as mentioned in the header: So Peter's giving you something to get started under the assumption that you just needed help writing the code. If you're looking for a full code to be written for you, then I recommend either making a request in the plugin board or the Headers/Footers board (:
|
|
inherit
210338
0
Apr 26, 2024 22:43:02 GMT -8
RichardInTN
472
June 2014
richardintn
|
Post by RichardInTN on Sept 3, 2017 18:40:27 GMT -8
As I was expecting for this to go in a header or footer, I didn't think it "fit" in "Themes" or "Plugins" or "Templates". My apologies for putting this in the wrong place. ETA: If Craig, Brian, or someone would be willing, I'd love for this thread to be moved to the appropriate area... thanks!
|
|
Kami
Forum Cat
Posts: 40,042
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,042
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Sept 3, 2017 18:42:08 GMT -8
As I was expecting for this to go in a header or footer, I didn't think it "fit" in "Themes" or "Plugins" or "Templates". My apologies for putting this in the wrong place. Request Header/Footer Code. (I don't actually know why this board isn't mentioned in the header lol) Keep in mind though that plugins and "header footer codes" are essentially the same thing. They're generally both Javascript (possibly with some HTML / CSS elements). The difference is that a plugin has a user friendly interface, while H/F codes are raw with no UI. Also don't worry about putting this in the wrong place. Honestly, I didn't get the idea that you were requesting something but rather asking a question of is it possible / how to do it, so I think there were misunderstandings all around. For whatever it's worth, if you look at the earlier posts in this board it was more about general coding questions -- for example I asked about resources to learn Perl, which doesn't fit to any of the aforementioned categories. This would also be the place where, if I were writing my own JS (that may or may not be used on a PB forum) I could go to ask for help from other coders.
|
|
inherit
210338
0
Apr 26, 2024 22:43:02 GMT -8
RichardInTN
472
June 2014
richardintn
|
Post by RichardInTN on Sept 3, 2017 18:45:15 GMT -8
|
|
Kami
Forum Cat
Posts: 40,042
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,042
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Sept 3, 2017 18:47:01 GMT -8
Ahaha I think a lot of people do! I'm not sure why. (Also as an aside: H/F will be converted to plugins anyway come v6, since they're, as I mentioned, mostly redundant!)
|
|
inherit
2671
0
May 14, 2013 14:40:03 GMT -8
Peter
🐺
10,615
February 2002
peter3
|
Post by Peter on Sept 4, 2017 1:32:24 GMT -8
RichardInTN , Kami has pretty much said everything I would, so I will try not to repeat it Something I want to make sure you are 100% clear on is why the choose file dialog is required. Due to security reasons, there is no way for us to know the actual local path of a file. There is also no way to pass in a local path to a file. This is the reason for needing the user to select a file first. The code I wrote was meant to be an example to get you started. It's actually pretty much complete, it just needs the file / clear buttons appended to the correct location (maybe Edit Profile), and maybe just some basic file type checking to prevent the user selecting non image files by mistake. Only reason I suggest for having the file type checking, is if they selected a big file by mistake, it could cause the browser to hang and localStorage to be filled. Here are some links to what the code uses... developer.mozilla.org/en/docs/Web/API/Window/localStoragedeveloper.mozilla.org/en/docs/Web/API/FileReader
|
|
inherit
2671
0
May 14, 2013 14:40:03 GMT -8
Peter
🐺
10,615
February 2002
peter3
|
Post by Peter on Sept 4, 2017 4:47:27 GMT -8
Had some time to improve on the original code so it's more complete to use now. CSS: .bg-file-label #bg-browse-file {
position: fixed; top: -2000px;
}
.bg-file-label {
display: inline-block !important; font-weight: normal !important; padding: 2px 6px;
}
.bg-file-wrapper {
margin-top: 10px; margin-bottom: 30px;
} JavaScript: (class {
static init(){ this.route = pb.data("route");
this.update_bg();
$(this.ready.bind(this)); }
static ready(){ if(this.route.name.match(/^edit_user_\w+/i)){ let $personal_form = $(".form_user_edit_personal");
if($personal_form.length == 1){ let html = "<div><label>Background</label><span class='description'>Pick a local image to display as the forum backgroud. <br />This is private, no other member can see this background apart from you.</span><div class='bg-file-wrapper'><label class='bg-file-label button'><input type='file' id='bg-browse-file' /><span>Select Background</span></label> <button id='bg-clear-bg'>Clear Background</button></div></div>";
$(html).insertBefore($personal_form.children().last());
$("#bg-browse-file").on("change", this.file_change.bind(this)); $("#bg-clear-bg").on("click", this.clear_bg.bind(this)); } } }
static file_change(event){ let reader = new FileReader();
reader.onload = e => { let data = e.target.result;
if(data){ localStorage.setItem("user-bg", data); this.update_bg(); } };
if(event.target.files.length == 1){ if(event.target.files[0].type.match(/^image\/(jpe?g|png|bmp)$/i)){ reader.readAsDataURL(event.target.files[0]); } } }
static clear_bg(){ localStorage.setItem("user-bg", "");
this.update_bg(); }
static update_bg(){ let data = localStorage.getItem("user-bg") || "";
$("body").css("background-image", "url(" + data + ")"); }
}).init(); Source (threw in a plugin file as well): github.com/PopThosePringles/ProBoards-Background-File-Picker
|
|
inherit
210338
0
Apr 26, 2024 22:43:02 GMT -8
RichardInTN
472
June 2014
richardintn
|
Post by RichardInTN on Sept 4, 2017 17:03:49 GMT -8
I appreciate all the work, Peter. Thanks (even if I did ask in the wrong place... LOL). One request (since you made it into a plugin, and thanks for doing that, by the way!): Would it be possible to set the image to "fit to width" and then lock it into place so it doesn't scroll with the page?
|
|
inherit
210338
0
Apr 26, 2024 22:43:02 GMT -8
RichardInTN
472
June 2014
richardintn
|
Post by RichardInTN on Sept 4, 2017 19:22:51 GMT -8
Peter and Kami, I just thought of another possible reason for the confusion... you are both using the term "localStorage" (meaning in the browser) and I was using the phrase "local storage" (meaning their personal data storage device... hard drive or memory card... where they are, but NOT the browser itself). Ain't computing grand where a space (or lack of one) makes a world of difference? It's not just in coding itself... it's in the descriptions of coding too! LOL
|
|
inherit
2671
0
May 14, 2013 14:40:03 GMT -8
Peter
🐺
10,615
February 2002
peter3
|
Post by Peter on Sept 5, 2017 3:09:02 GMT -8
I appreciate all the work, Peter . Thanks (even if I did ask in the wrong place... LOL). One request (since you made it into a plugin, and thanks for doing that, by the way!): Would it be possible to set the image to "fit to width" and then lock it into place so it doesn't scroll with the page? Sure, just add additional rules after this line... $("body").css("background-image", "url(" + data + ")");
|
|