Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Bookmarklet #385

Closed
isavcic opened this issue May 11, 2019 · 12 comments
Closed

Bookmarklet #385

isavcic opened this issue May 11, 2019 · 12 comments

Comments

@isavcic
Copy link

isavcic commented May 11, 2019

Hello,

Is there perhaps a bookmarklet available for Buku web?

Thanks
@jarun
Copy link
Owner

jarun commented May 11, 2019

Current projects based on Buku are listed here: https://github.com/jarun/Buku#related-projects

Just check out.

@isavcic
Copy link
Author

isavcic commented May 11, 2019

Thanks, missed that (searched for "bookmarklet")

@isavcic isavcic closed this as completed May 11, 2019
@isavcic
Copy link
Author

isavcic commented May 11, 2019

Ugh, this "web extension" is an overkill. Overthought implementation of such a trivial feature. Thanks anyhow.

@jarun
Copy link
Owner

jarun commented May 11, 2019

Would you like to implement a lighter bookmarklet?

@rachmadaniHaryono
Copy link
Collaborator 

javascript:void function(){var e="http://127.0.0.1:5001/api/bookmarks",t=new XMLHttpRequest;t.open("POST",e),t.setRequestHeader("Content-Type","application/json"),t.send(JSON.stringify({url:document.location.href}))}();

that is for bukuserver on 127.0.0.1:5001. but this will not tell you if the url is already on buku or not or if POST success

will add more document about this later on new pr

@isavcic
Copy link
Author

isavcic commented May 14, 2019 •
edited
Loading

Great, thank you @rachmadaniHaryono ! Since you seem versed in Javascript (which I'm definitely not), is there a way to have the selected text to automatically populate the description of the bookmark? That's a feature del.icio.us had and it was quite nifty.

@rachmadaniHaryono
Copy link
Collaborator

rachmadaniHaryono commented May 14, 2019 •
edited
Loading

not tested but here is the javascript code

var e="http://127.0.0.1:5001/api/bookmarks";
var text = "";
if (window.getSelection) {
    text = window.getSelection().toString();
} else if (document.selection && document.selection.type != "Control") {
    text = document.selection.createRange().text;
}
t=new XMLHttpRequest;
t.open("POST",e);
t.setRequestHeader("Content-Type","application/json");
t.send(JSON.stringify({url:document.location.href, description:text}));

code to getting selected text is taken from here https://stackoverflow.com/a/5379408/1766261

what is needed from this is to handle if bookmark is already there and another description exist

you can edit code above and generate bookmarklet here http://bookmarklets.org/maker/

e: first bookmarklet javascript code

var e="http://127.0.0.1:5001/api/bookmarks";
t=new XMLHttpRequest;
t.open("POST",e);
t.setRequestHeader("Content-Type","application/json");
t.send(JSON.stringify({url:document.location.href}));

@jarun jarun mentioned this issue May 26, 2019
Closed
66 tasks
@rachmadaniHaryono rachmadaniHaryono mentioned this issue May 27, 2019
Closed
@isavcic
Copy link
Author

isavcic commented May 27, 2019

Unfortunately, the direct POST to the API is inflexible and unintuitive. I gave more details in the pull request you've provided. I come from a del.icio.us (later Pinboard) world and the bookmarklets there provided a small window to fill in the data which is not automatically fetched and filled, like the URL, title, and excerpt of the page bookmarked.

@rachmadaniHaryono
Copy link
Collaborator

rachmadaniHaryono commented May 27, 2019 •
edited
Loading

just copy my comment from pr, because imo better to discuss it here

i am interested on that popup

bukuserver do actually have popup to create bookmark on http://127.0.0.1:5001/bookmark/new/?modal=True and edit boomark on http://127.0.0.1:5001/bookmark/edit/?modal=True

i will investigate further if this is possible to be made into bookmarklet

e:

var e="http://127.0.0.1:5001/bookmark/new/?url=%2Fbookmark%2F&modal=True";
newWindow = window.open(e, null, "height=400,width=400,status=yes,toolbar=no,menubar=no,location=no");

that is example to open a new window which open bukuserver create modal url

it is bare html. maybe add insert bootstrap on that window

the workflow:

  • search buku if url exist
  • if exist open window with modal edit url if not modal create url
  • insert bootstrap css
  • if url not exist, get info from bukuserver's network handler
  • if url not exist, user selected text will be used as default value on description box

e2: this is javacript example to open create record popup with bootstrap css

var base="http://127.0.0.1:5001",
  url=base+"/bookmark/new/?modal=True",
  xhr=new XMLHttpRequest;
headHtml='<head>'
headHtml+='<link href="'+base+'/static/admin/bootstrap/bootstrap3/swatch/default/bootstrap.min.css?v=3.3.5" rel="stylesheet">';
headHtml+='<link href="'+base+'/static/admin/bootstrap/bootstrap3/css/bootstrap-theme.min.css?v=3.3.5" rel="stylesheet">';
headHtml+='<link href="'+base+'/static/admin/admin/css/bootstrap3/admin.css?v=1.1.1" rel="stylesheet"></head>';
xhr.open("GET",url);
xhr.send(null);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4){
    var popupHtml = '<html>'+headHtml+'<body>'+xhr.responseText+'</body>';
    newWindow = window.open('', null, "height=600,width=400,status=yes,toolbar=no,menubar=no,location=no");  
    newWindow.document.write(popupHtml);
  }
};

this will not work if you are not on bukuserver page due to corb

Access to XMLHttpRequest at 'http://127.0.0.1:5001/bookmark/new/?modal=True' from origin 'https://www.google.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Cross-Origin Read Blocking (CORB) blocked cross-origin response http://127.0.0.1:5001/bookmark/new/?modal=True with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.

possible other solution: bookmarklet page

@zoredache
Copy link

zoredache commented Jun 5, 2019 •
edited
Loading

Honestly, solving this would be a lot easier if someone started by building a single form on the backed that would handle both the New and Edit and accept title/description/url from the GET request. Having a separate create_view and edit_view route makes creating a bookmarklet needlessly complicated.

@jarun
Copy link
Owner

jarun commented Jun 5, 2019

@zoredache can you start with that? We are ready to help out.

@rachmadaniHaryono
Copy link
Collaborator

Having a separate create_view and edit_view route makes creating a bookmarklet needlessly complicated

i actually agree with this. unfortunately there is no tutorial on how to hack flask-admin specified this feature. i'm very thankful if anyone can make it or tell me how to do this.

in the meantime this issue and the pr will get delayed because i'm out of town till next week. it is ok if anyone want to take this

@github-actions github-actions bot locked and limited conversation to collaborators Jun 15, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

new: doc: bookmarklet rachmadaniHaryono/Buku
4 participants
@zoredache @isavcic @jarun @rachmadaniHaryono