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

Implement an embed mode for use within an iframe #84

Merged
merged 1 commit into from Aug 31, 2015

Conversation

Projects
None yet
2 participants
@ribbons
Copy link
Contributor

commented Aug 31, 2015

This is somewhere between an RFC and a ready-to-merge PR, so I won't be offended if you don't like the idea or feel it should be implemented in a better or more generally useful way...

Some background: I've been investigating adding embedded instances of jsbeeb to my (long neglected) online conversion of the 8BS Magazine as part of an overhaul, so that the programmes contained on the disks can be run without the user having to download the disc image and fire-up an emulator.


This PR adds a new URL parameter of embed, which adjusts the entries in the top menu to make the application easier to embed in third-party pages using an iframe.

Specifically, the 'Discs', 'Cassettes', 'Share' and 'Contact' drop-downs are hidden: disc and cassette selection as it would be expected that an embedded instance would be pre-loaded with a disk or tape and share and contact as they are rather confusing if the app is embedded in a third-party site. The 'About' entry is also changed to 'About jsbeeb', again for clarity.

This PR also sets the href of the navbar header to http://bbc.godbolt.org/ so that interested users can easily click through to the main jsbeeb page if they are using an embedded instance.

Implement an embed mode for use within an iframe
Add a new URL parameter of 'embed', which adjusts the entries in the top
menu to make the application easier to embed in third-party pages using
an iframe.

Specifically, the 'Discs', 'Cassettes', 'Share' and 'Contact' drop-downs
are hidden: disc and cassette selection as it would be expected that an
embedded instance would be pre-loaded with a disk or tape and share and
contact as they are rather confusing if the app is embedded in a third-
party site.  The 'About' entry is also changed to 'About jsbeeb', again
for clarity.

Also set the href of the navbar header to point to
http://bbc.godbolt.org/ so that interested users can easily click through
to the main jsbeeb page.
@mattgodbolt

This comment has been minimized.

Copy link
Owner

commented Aug 31, 2015

Oh perfect! I was actually brushing up a presentation for use on Wednesday and was thinking it'd be cool to have an embed to actually put the emulator in the presentation! Thanks so much!

@mattgodbolt

This comment has been minimized.

Copy link

commented on bcbce93 Aug 31, 2015

Looks great to me: thanks!

mattgodbolt added a commit that referenced this pull request Aug 31, 2015

Merge pull request #84 from ribbons/embed-mode
Implement an embed mode for use within an iframe

@mattgodbolt mattgodbolt merged commit cbf0841 into mattgodbolt:master Aug 31, 2015

1 check was pending

continuous-integration/travis-ci/pr The Travis CI build is in progress
Details

@ribbons ribbons deleted the ribbons:embed-mode branch Aug 31, 2015

@mattgodbolt

This comment has been minimized.

Copy link
Owner

commented Aug 31, 2015

I may yet extend it to hide everything apart from the Cub monitor (optionally), this is great though; thanks so much!

@ribbons

This comment has been minimized.

Copy link
Contributor Author

commented Aug 31, 2015

Great - glad you like it :-). I didn't want to hide all of the nav bar in case it felt like I was ripping off your work but that sounds cool to me.

@mattgodbolt

This comment has been minimized.

Copy link
Owner

commented Aug 31, 2015

Thanks for thinking of that :) As long as we can put some kind of thing at
the top right to access the bar (hamburger icon thing?) then I'm not
precious :) Just glad it's gonna be useful! Let me know as and when the 8BS
stuff's ready :)

On Mon, Aug 31, 2015 at 8:17 AM, Matt Robinson notifications@github.com
wrote:

Great - glad you like it :-). I didn't want to hide all of the nav bar in
case it felt like I was ripping off your work but that sounds cool to me.


Reply to this email directly or view it on GitHub
#84 (comment).

Matt

@ribbons

This comment has been minimized.

Copy link
Contributor Author

commented Aug 31, 2015

No problem - yeah, that sounds nice and tidy. Will keep you posted - think it is going to be a little while as am having to re-do some chunks of functionality to make them more generic and maintainable (less spaghetti code...).

@ribbons

This comment has been minimized.

Copy link
Contributor Author

commented Sep 26, 2015

Just got the site to a good-enough state locally to push my work in progress live - currently I'm just giving the option from each disc index to emulate it in jsbeeb (e.g. http://8bs.nerdoftheherd.com/8BS56-2/emulate/), but will eventually add emulation pages for individual basic and machine code items.

@mattgodbolt

This comment has been minimized.

Copy link
Owner

commented Sep 28, 2015

Very cool (I had to fiddle the URL to be
http://8bs.nerdoftheherd.com/8BS56-2/emulate/ ) -- do let me know if you
think any other changes would be useful. Maybe hiding the LEDs?

On Sat, Sep 26, 2015 at 12:53 PM, Matt Robinson notifications@github.com
wrote:

Just got the site to a good-enough state locally to push my work in
progress live - currently I'm just giving the option from each disc index
to emulate it in jsbeeb (e.g.
http://8bs.nerdoftheherd.com.lan/8BS56-2/emulate/), but will eventually
add emulation pages for individual basic and machine code items.


Reply to this email directly or view it on GitHub
#84 (comment).

Matt

@ribbons

This comment has been minimized.

Copy link
Contributor Author

commented Oct 2, 2015

I had to fiddle the URL to be http://8bs.nerdoftheherd.com/8BS56-2/emulate/

Oops! I seem to be making a habit of sending people URLs to my (only locally accessible) test systems...

do let me know if you think any other changes would be useful. Maybe hiding the LEDs?

Thanks, will do. Not sure about the LEDs really - they are informative, but they don't sit quite right when overlapping the monitor. Perhaps some CSS rules to hide the labels when the browser viewport is less than the height of the CUB Monitor + the height of the LED panel?

mattgodbolt added a commit that referenced this pull request Oct 3, 2015

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.