bespokejs / bespoke Goto Github PK

I was trying to see how it looks on the iPad but the demo page (on http://markdalgleish.com/projects/bespoke.js/) doesnt seem to load on iPad (safari and chrome). The "Example Theme" selector seems blank, so its probably not a core issue with bespoke.js but maybe with other libraries included in that page.

I also tested the "Yeoman" presentation and that worked fine on iPad, so the framework as such is working. The one issue I saw on the Yeoman page (on an iPad) is that when you are in landscape mode, the page loads twice -- it loads up fully, refreshes and then it loads it as tiles. On the portrait mode, everything was fine with the Yeoman presentation

Browser Versions:
Chrome: 25.0.1364.124
Safari: 5.1 Mobile

I think bespoke is a great plugin but I need to disable keyboard support as it is not firing the on activate event. If I explicitly call next or prev on the deck it works fine and the event fires but when using both, the key presses do not fire the event. Currently I've edited the source to disable the key presses but I think there should be a boolean property to easily disable key presses without editing the source.

Thanks

Is there any way to make it infinity loop?

Hi there!
I'm really curious on this framework.
I can't make the example page work in IE9 and OP12.
Does this mean that Bespoke itself actually work but the CSS used in the example page isn't supported in these browsers?

I'm also curious if you can & if you can how to use javascript for animation instead of CSS-animation.
I've had a look in the documentation & read about events & that looks interesting but haven't had the chance to try it out...

Best, Niklas

Hi,

Such a cool premise of creating a diy presentations with a 1k core bespoke.js and a simple theme.css.

I followed the installation wizard, but probably used it wrong as it produced a 99mb presentation directory containing a 70k build.js and an empty build.css.

Can you point me to a starting presentation.html, bespoke.js and theme.css that I can use without all this extra plumbing?

Thanks,
Keenan

Hello,

You've choose to use Jade for HTML and Stylus for CSS; why no CoffeeScript for JS?

Regards,
L0une

Hi.
I've tried bespoke.js on a touchscreen pc and on a tablet, but it doesn't work.
Any suggestion?

Thx

Hello,
I've read the this topic #2 where you say the issue is in the site not in the framework.

I’m using your original bespoke.js file and trying to add buttons to make the desk’s cards slide but on iOs5 bespoke.next(); breaks the js at step.bind() (into bespoke.js).

If you could fix it fast it would be great :) there are still many devices using iOs5…
Thanks

Hi @markdalgleish!

I would like to migrate bespoke-run. Do you have a guide, or a list of steps for migrating plugins to the new format easily?

Thanks!

There's no mention of mobile in the README, but mobile Safari and Chrome crash the browser while switching themes.

When a Bespoke.js presentation is viewed in Firefox, and presumably all Gecko-based UAs, links aren't clickable. I have no idea why. Chrome does not have this problem.

I see nothing obvious in the console. Perhaps this is caused by a preventDefault() somewhere? I don't know.

The themes in the demo are fantastic. It would be cool if they were available as npm packages, like e.g. bespoke-theme-cube.

Thanks!

One is unable to chain events on an instance:

var deck = bespoke.horizontal('article');
deck.on('next', myfunc).on('prev', myfunc).on('slide', myfunc);

This code will fail.

Seems like an awesome framework. I was thinking of incorporating this into a project, but your demo page seems to crash mobile safari on orientation change. Any ideas what could be causing this? Thank you.

While it's not the responsibility of bespoke.js core to provide a help view, it would be nice if core could maintain and expose help metadata so that this information can be collected and displayed.

One possible way is simply define a contract (in the README) that any plugin that contributes keybindings should fire and event with metadata for a help plugin.

deck.fire('help', [{type: 'key', value: 'f', action: 'Toggles fullscreen'}]);

Another way would be to expose methods that can be used to register and retrieve help metadata.

The focus is to figure out what foundation is necessary to make it possible to write a help plugin. The main decision is to work out the structure of the metadata. Next, we need to figure out how to get that metadata to the help plugin.

When using the bower versions of bespoke plugins, the order of plugins becomes important. If you specify bespoke-scale before bespoke-classes scaling won't work. e.g.

bespoke.from('article', [
    bespoke.plugins.bullets('li, .bullet'),
    bespoke.plugins.backdrop(),
    bespoke.plugins.scale(),
    bespoke.plugins.hash(),
    bespoke.plugins.progress(),
    bespoke.plugins.classes(),
    bespoke.plugins.state(),
    bespoke.plugins.keys(),
    bespoke.plugins.touch()
]);

won't work but this will:

bespoke.from('article', [
    bespoke.plugins.classes(),
    bespoke.plugins.bullets('li, .bullet'),
    bespoke.plugins.backdrop(),
    bespoke.plugins.scale(),
    bespoke.plugins.hash(),
    bespoke.plugins.progress(),
    bespoke.plugins.state(),
    bespoke.plugins.keys(),
    bespoke.plugins.touch()
]);

Hey,

I have a little problem with the viewport on Safari (desktop and iPad). They both zoom very far into the slide. You can see this in your demo on the 1., 2. 3. slides.

Is there a way to fix this? It's probably not a bespoke.js issue, but I can't find a solution. The usual way

meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"

doesn't seem to work either.

Regards,
Oliver

Hi i create a Modul thats used bespoke on many Instances,

here the link https://gist.github.com/brewing/5697280

Whenever I click only once before he makes next and vice versa maybe you'll see what I have in my script wrong I do not come behind. What I also desperately trying to fill the bespoke.decks but this is not me successful i cant use var on and two because i dont no how many decks i have thats dynamic

Hello,
We have just add bespoke.js to twittstrap resources list
http://twittstrap.com/resources/details/bespoke-js
Under : components
Regards

I know this is trivial to derive, but it would be fantastic if the deck had a "currentIndex" property or something like it. Can't be that much more code.

/* Coverflow Theme */
@mixin transformItem($translateX, $rotateY, $scale,$zIndex,$opacitiy) {
-webkit-transform: translateX($translateX) rotateY($rotateY) scale($scale);
-moz-transform: translateX($translateX) rotateY($rotateY) scale($scale);
-ms-transform: translateX($translateX) rotateY($rotateY) scale($scale);
-o-transform: translateX($translateX) rotateY($rotateY) scale($scale);
transform: translateX($translateX) rotateY($rotateY) scale($scale);
-sand-transform: translateX($translateX) rotateY($rotateY) scale($scale);
z-index: $zIndex;
opacity: $opacitiy;
}
.coverflow {
height: 320px;
position: relative;
article{
-webkit-perspective: 600px;
-moz-perspective: 600px;
-ms-perspective: 600px;
-o-perspective: 600px;
perspective: 600px;
position: absolute;
top: 0px;
right: 0;
left: 43%;
bottom: 0;
}
section{
background: transparent;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
background: transparent;
width: 72px;
height: 280px;
position: absolute;
padding-top: 0;
opacity: 0;
a{
color: rgb(42, 206, 185);
}
&.bespoke-active {
opacity: 1;
z-index: 1;
}
&.bespoke-slide {
-webkit-transition: -webkit-transform .7s ease, opacity .7s ease, background-color .7s ease;
-moz-transition: -moz-transform .7s ease, opacity .7s ease, background-color .7s ease;
-ms-transition: -ms-transform .7s ease, opacity .7s ease, background-color .7s ease;
-o-transition: -o-transform .7s ease, opacity .7s ease, background-color .7s ease;
transition: transform .7s ease, opacity .7s ease, background-color .7s ease;
}
&.bespoke-before {
@include transformItem(-140px,-5deg,0.5,6,0.0);
}
&.bespoke-before-3 {
@include transformItem(-128px,5deg,0.6,7,0.4);
}
&.bespoke-before-2 {
@include transformItem(-92px,5deg,0.7,9,0.5);
}
&.bespoke-before-1 {
@include transformItem(-56px,5deg,0.8,9,0.6);
}
&.bespoke-after {
@include transformItem(36px,-5deg,0.8,6,0.0);
}
&.bespoke-after-1 {
@include transformItem(56px,-5deg,0.8,9,0.6);
}
&.bespoke-after-2 {
@include transformItem(92px,-5deg,0.7,8,0.5);
}
&.bespoke-after-3 {
@include transformItem(128px,-5deg,0.6,7,0.4);
}
}
}

To make life for plugin authors simpler, it would be nice if deck.slide(-1) went to the last slide to avoid having to constantly type:

deck.slide(deck.slides.length - 1);

If this isn't acceptable, a reasonable compromise might be to add a deck.end() method to advance to the last slide.

Add an off method as a complement to the on method. I've come across situations in my plugins when I want to listen for deck events only at certain times. It would be nice if I could unregister an event handler. jQuery has an off method for this very purpose. I think Bespoke.js needs the same.

If I understand the code correctly, it seems that if you invoke the function that is returned from the on method, it unregisters the event.

deck.on('activate', activate)();

However, this is a very bizarre API, IMO. I'd much rather have an explicit off method to call.

Currently, any direct child of the parent element becomes a slide. This is not always the desired behavior. Certain plugins or situations may want to allow child elements to be inserted for auxiliary purposes, or to allow slides to be excluded (an abbreviated presentation). For these reasons, it would be nice if the from method allowed both the parent and the child selectors to be specified.

I propose that we allow the argument to be an array. The second item in the array is assumed to be the child selector or collection of nodes.

bespoke.from(['article', 'article > section'], [(plugins)]);

I'd also be open to using a Hash if the Array argument seems to cryptic:

bespoke.from({ container: 'article', slides: 'article > section' }, [(plugins)]);

or

bespoke.from({ parent: 'article', slides: 'article > section' }, [(plugins)]);

If we want to shorten it slightly, we could automatically prepend the container/parent selector the the slides selector so it can be written as:

bespoke.from({ parent: 'article', slides: '> section' }, [(plugins)]);

This would also ensure that they are descendant elements.

Hi,
When I install "npm install -g generator-bespoke"
I have a lot of warning and the debug wrote this:

node --debug which yo bespoke
debugger listening on port 5858
Error bespoke

You don't seem to have a generator with the name bespoke installed.
You can see available generators with npm search yeoman-generator and then install them with npm install [name].
To see the 7 registered generators run yo with the --help option.

https://github.com/markdalgleish/bespoke.js/blob/v1.0.0/lib/bespoke.js#L28

This is best illustrated while using the bespoke-keys module. If you have 3 slides, and you deck.next() to the 2nd slide, it takes 3 more deck.next() calls to trigger activate to get to the 3rd slide (on L28 in bespoke.js).

I can't quite tell if this is because of a bad return within fire since these are joined with &&. :(

I used generator-bespoke to generate a presentation, accepting all the defaults. The presentation looks great under Chrome and Firefox, but under IE11, the slides are not centered.

Maybe it's got to do with bespoke-scale? It looks like the top and left margins on the

Hi, thanks for making Bespoke.js. I found an issue with Bespoke that you can see here: http://jeremyckahn.github.io/bespoke-bug/public/

When I test this on desktop Chrome, the overflowing content can be scrolled as expected. On iOS, the content cannot be scrolled. This is because Bespoke is catching the touchmove event and preventing the default behavior. This logic breaks all overflowing, scrollable content.

In my project (not the sample linked), I was able to work around this issue by calling stopPropagation on the touchmove event for scrollable content. However, it would be great is Bespoke could handle this itself.

I might take a stab at a solution if I have time, but I at least want to report the bug and get it on your radar.

The reason I mention this, is because at the moment it's assumed that all the children of the node are slides, but that might not be the case. For example, ember inserts script tags around bound values, and this interferes with bespoke.

Adding the class name as an option would be nice.

Hello,
I've put your bespoke.js + the js you've used on your demo page on my page but I have this error with IE9-

Unable to get property 'add' of undefined or null reference
on the line:
el.classList.add(moduleName + '-' + cls);

any idea?

The bespoke-after and bespoke-after will be shown up when use coverflow theme on safari. We can see the text and image on background layer (z-index < 10).

Does dynamic adding of slides fit into this project, is there any plan to add it?

This may be intended behavior, although I can't imagine why. If I want to wire up a deck to display which slide is current, I want to do something like this (assume jQuery):

var deck = bespoke.horizontal.from('article');
deck.on('next', onNav);
deck.on('prev', onNav);

function onNav(e) { 
     $('.indexcounter').text(e.index);
}

But instead it shows which one WAS active instead of which one is GOING TO BE active. This severely limits the usefulness of the events.

I saw the gulp vs. grunt presentation and was very impressed with the way it looked and behaved. So I wanted to know what was used to create the presentation. Unfortunately, none of the slides tell you what was used. I even viewed the source. Still nothing. I had to do a lot of digging to finally find out it was bespoke.

My suggestion is therefore to put a watermark on presentations somehow. It would be good publicity for the project.

Hello,
To reproduce it, use yo bespoke and keep the default values for everything but Would you like to generate PDFs?.
Resulting in:

> install-nw

/fooproject/node_modules/install-nw/cmd.js:121
  version = [v.major, v.minor, v.patch].join('.');
              ^

TypeError: Cannot read property 'major' of null
    at down (/fooproject/node_modules/install-nw/cmd.js:121:15)
    at init (/fooproject/node_modules/install-nw/cmd.js:72:11)
    at Object.<anonymous> (/fooproject/node_modules/install-nw/cmd.js:41:10)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.runMain (module.js:604:10)
    at run (bootstrap_node.js:394:7)
npm WARN presentation-hello-world@0.0.0 No repository field.
npm WARN presentation-hello-world@0.0.0 No license field.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! nw-shot@4.2.0 postinstall: `install-nw`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the nw-shot@4.2.0 postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

I fix that with this trick (adding "nw" : "0.12.3" to the root of my package.json and doing an npm install). Still, launching gulp pdf results in:

[19:07:38] RangeError: Invalid array length
    at module.exports (/fooproject/node_modules/bespoke-to-pdf/index.js:43:18)
    at module.exports (/fooproject/node_modules/bespoke-pdf/index.js:13:10)
    at Gulp.<anonymous> (/fooproject/gulpfile.js:64:10)
    at module.exports (/fooproject/node_modules/orchestrator/lib/runTask.js:34:7)
    at Gulp.Orchestrator._runTask (/fooproject/node_modules/orchestrator/index.js:273:3)
    at Gulp.Orchestrator._runStep (/fooproject/node_modules/orchestrator/index.js:214:10)
    at /fooproject/node_modules/orchestrator/index.js:279:18
    at finish (/fooproject/node_modules/orchestrator/lib/runTask.js:21:8)
    at module.exports (/fooproject/node_modules/orchestrator/lib/runTask.js:60:3)
    at Gulp.Orchestrator._runTask (/fooproject/node_modules/orchestrator/index.js:273:3)fooproject

[email protected]
[email protected]

When wiring up events, the action triggering the event would be awesome to have in the event object:

{
    slide: [some slide]
    , index: [number]
    , type: [keypress(left|right|spacebar)|slide|prev|next|whatever]
}

As it is, it's very hard to wire up things like history state when you can't discern between a popstate and a keypress. Maybe the option to pass in an additional param to the slide() method?

 deck.slide(index, myEventParams);

I know you're trying to keep byte size down, but I feel like the utility introduced by this would make this library exponentially more powerful. If nothing else, the ability to add custom values to the event object would be a huge improvement.

不想用nodejs, 不能使用吗？看不懂文档。

Sorry if I am missing something here, but after creating a deck, how do I destroy it?

If not already possible, can you add that as a method or advise how I would go about it? Would removing all the bespoke type classes from the specific area of the DOM suffice?

Hi,

I just discover bespoke through a presentation from @sokra (here). And I like it.

But before go deep into I would ask you why you created bespoke instead of using other equivalents.

Note: no evil question here I'm just curious

ping @hsablonniere

Hello.
I tried to create plugin that modify sections before bespoke start hook event.
But currently cannot that.

Out of necessity, I implement this function as outside plugin. But that so dirty. 😭
like this

beforeBespke('article', function(from){
  bespoke.from(from, {
    keys: true,
    touch: true,
  });
})
var beforeBespke = function(from, callback){
  // emulate bespoke from
  var parent = selectorOrElement.nodeType === 1 ? selectorOrElement : document.querySelector(selectorOrElement)
  var slides = [].filter.call(parent.children, function(el) { return el.nodeName !== 'SCRIPT'; })
  var deck = {
    slides : slides
  }

  //  :
  // do something modification to slide.
  // (This is a point want to plugin)
  //  :

  callback(from)
}

Please tell me if you have more good idea

Hello! :)

I am looking to use bespoke.js as part of a Google Chrome Extension I am building, in which the user uses bespoke.js to open new tabs as new slides, rather than new tabs in the browser.

$("#1").on("click", "a", function(event) {
event.preventDefault(); 
var the_url = $(this).attr("href");
console.log(the_url);
$("#1").after("<section></section>");
var the_section = $("#1").next("section");
$.get(the_url, function(data) {
the_section.html(data);
function init() {
        deck = bespoke.from('article');
    }
    init();
});
});

This works, and I see the new slide, but the problem is, I can't tab to it. As in, it is there, but I can't use the arrow keys to navigate to it, it is just a static slide.

I'm using the demo.js and bespoke.min from your homepage.

Please assist with this and advise if possible.

Images of my problem here:

Here I have the first two slides in my DOM when the page loads, section id = 1 and another empty section. I can tab across these two as I should with ease:

But when I click a link to generate a new slide from $("#1") - I get this, I can see the new slide, but I can't tab to it, I can only tab to the empty section that was already there:

I can't get to The Kingdom of Dragak's slide. I can see it, but can't use the arrow keys to get to it. I just get stuck with this:

How do I fix that, if possible?

Thank you for your time and for this awesome presentation library.

How to write same things in angular2??
help ??

Having trouble with the an event not firing...

var deck;
deck = bespoke.from('#presentation');
deck.on('activate', function(event) {
alert('fire');
});

this never seems to be fire, however presentation loads correctly.

Do not attempt to activate the first slide (slide 0) after calling the plugins if a slide is already activated. This allows a plugin, such as bespoke-hash, to activate the first slide.

Additionally, when the first slide is activated, the deactivate event should not be called since there is no slide to deactivate.

Hello! I tried to use bespoke for presentation angularjs for my colleagues. But when i try to insert my html code bespoke removes html-tags =(
my code:

        pre.language-html 
          code.
            <head> sf</head>

with language-javascript it's the same result.

Sorry for my bad english...
Thanks!

I recently started working on a project which includes this plugin, it looks realy cool by the way, but there seems to be one small problem. When running in IE8 javascript gives an error (Object doesn't support property or method 'bind' ) this beacause of the .bind() on the 'off' and 'on' events, maybe something to look at?

Would it be possible to add Markdown support so that it will be easier to write slides?

Hey,
Can you plz share a example for ie Browsers ?
i implement es5-shim.min.js and classList but the coverflow doesnt run

I would like to print my presentation's https://github.com/pmalek/knngraphs/tree/gh-pages-src slides into pdf but when I try to print it in Google Chrome into pdf then I get like 2.5 slides on the page.

I have tried adjusting the styles but nothing changes. I have changed default styles/main.styl generated by bespoke generator to following:

slide_width = 1180px
slide_height = 700px

but the default values give the same results. I have also tried changing:

.bespoke-slide
  ...
  @media print
    height: 743px // seems to correspond with an A4, landscape page height

but nothing changes either.

Additionally : how can I change the orientation so that printed slides are also landscape as the presentation in the browser?