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.

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

Dont shrink Content #6

Open
ghost opened this issue Mar 7, 2014 · 7 comments
Open

Dont shrink Content #6

ghost opened this issue Mar 7, 2014 · 7 comments

Comments

@ghost
Copy link

ghost commented Mar 7, 2014

First of all, thanks for quick reply.
This is more request then issue.

I have setup new jsFiddle
http://jsfiddle.net/nLauR/2/embedded/result/

Is this technically possible (in terms of performance and size) to make minimap dont shrink, but just take window height and when necessary to scroll that place.

Like sublime text does this


I dont want to open new issue, so I'll ask it here, are you planning on moving to canvas? Coping will cause many issues (like search and event listeners with bootstrap and multiple IDs.. and many such)

@goldenapples
Copy link
Owner

To your first question, yes, it should be possible and feasible to give the minimap a fixed width and scroll it along with the window like ST2's minimap. The math and UX of it was getting away from me when I first wrote this, so I intentionally avoided it for the first release.

Canvas is the obvious solution to a lot of problems caused by HTML cloning of content, but I couldn't get the performance I wanted using canvas.

See http://codecanyon.net/item/mgminimap-jquery-minimap-plugin/full_screen_preview/5698116 for an example of a plugin that uses html2canvas to draw a page to canvas for use as a minimap - it works, but the image quality is rather low, and the delay in drawing the page element to canvas and rendering feels a bit clumsy. I think the quality and speed could be improved somewhat, but its a low priority at the moment... especially since there are other tools that already do that.

@goldenapples
Copy link
Owner

I opened a new issue (#7) to track investigating canvas alternatives...

@ghost
Copy link
Author

ghost commented Mar 8, 2014

Agreed on quality. The first thing I liked in your plugin was how clear minimap was.
But I still believe better quality can be achieved. I think author of that plugin wanted to preserve minimap resizable, so he didn't try to optimize quality. (just maybe :) )

Also it stated that one (and first) its feature is: HTML5 Canvas based fast rendering I also believe canvas is fast. And its getting faster. If you are going to clone really big website, canvas can be a huge advantage.


On the subject - I just saw that jQuery.clone does not copy its event handlers bu default
http://api.jquery.com/clone/#clone-withDataAndEvents-deepWithDataAndEvents

The problem that rose is that I have many functions delegated on body and window. + Using class and ID based callbacks, so it prevents many of my functions to execute (since they become arrays and etc.)

Well I can handle that and rewrite it. but there will come others I believe. And many much problems can be easily solved with canvas

@ghost
Copy link
Author

ghost commented Mar 8, 2014

One more way described here:
http://www.html5rocks.com/en/tutorials/streaming/screenshare/

Method 2: converting page to blob URL and then maybe putting it inside an iframe.
Advantages:

  1. you preserve the style you are using now.
  2. even if ID are same they wont intersect since they are in different documents.
  3. difference between usual iframe of a page and blob url is that you wont hit server second time.
    Disadvantage:
    well, in page search still displaces two results.

maybe this solution can be also done without blob, just making an iframe from jQuery.clone() object.
as http://django.is/ does this

Anyways just reporting everything I find useful, if this informations are irrelevant and not necessary just say so. I'm just very interested in this running on my website ))

@goldenapples
Copy link
Owner

Yeah, the problem isn't that jQuery.clone is duplicating event handlers - it doesnt. The biggest problem is that it duplicates element ID's, which then breaks any handlers attached to those elements by ID (since there should never be more than one element with a given ID on a page.) There's really no way to avoid that by stripping out ID attributes, either, since elements could be styled by ID.

Canvas is fast, true, but javascript-based DOM rendering into canvas can't ever be as fast as browser-based rendering.

You bring up some good options, though... If the minimap were cloned into an iframe, then the name collision of ids wouldn't be an issue because they would be in two separate documents, and the map would also not appear in in-page search results.

The minimap on django.is is really cool and smooth, and probably the best way to go.

@goldenapples
Copy link
Owner

Actually, looking over the plugin used on that demo page - https://github.com/demux/sublime-scroll - I'm really impressed with how smooth it is and the thoughtfulness of some of the options, like the "fixed elements". Other than in-page search results being duplicated, is there anything missing from that approach?

@ghost
Copy link
Author

ghost commented Mar 11, 2014

Well, only the one I'm after - to put minimap on custom container rather than window.

Yes it smooth and and without canvas it will be small and probably better.
The only thing I think - if content is changed on container, should we reconstruct the whole iframe? maybe you could provide some easy way to append and remove elements inside iframe, so developer can decide himself when they need to change content.
But refresh method will be excellent too.

I went too far but this is general what minimap should handle. Also I was searching how to block iframe from searching but there seems no way for doing this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant