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

Publish source code for project homepage? #62

Closed
ddemaree opened this issue Oct 10, 2017 · 5 comments
Closed

Publish source code for project homepage? #62

ddemaree opened this issue Oct 10, 2017 · 5 comments
Assignees
Labels
documentation writing, maintaining, revising existing documentation examples specific to the examples directory

Comments

@ddemaree
Copy link

It looks like the index.html and other assets in the gh-pages branch are minified/built files, generated from some other source. In the absence of an official set of examples, it'd be great to be able to view source for the home page as a live example of how Draggable works.

@beefchimi beefchimi self-assigned this Oct 11, 2017
@beefchimi beefchimi added the documentation writing, maintaining, revising existing documentation label Oct 11, 2017
@beefchimi
Copy link
Contributor

I am hoping to get some examples in by the time we do our first stable release. Apologies for the delay! Code is pretty straight forward - here is an example of the Collidable section:

import {Droppable, Collidable} from 'draggable';
import SoundFx from '../../SoundFx';

export default function CollidableSection() {
  const containers = document.querySelectorAll('.CubesFrame--idCollidable');

  const droppable = new Droppable(containers, {
    draggable: '.draggable-source',
    droppable: '.Cube--typeDroppable',
    appendTo: '.CubesFrame--idCollidable',
    collidables: '.CubesFrame--idCollidable .CollisionWall',
    classes: {
      body: 'draggable-container--is-dragging',
    },
    plugins: [Collidable],
  });

  // --- Drag states --- //
  let canPlayOverSound = false;

  droppable.on('drag:start', () => {
    SoundFx.Single.play('cubeUp');
  });

  droppable.on('drag:over', () => {
    if (!canPlayOverSound) {
      return;
    }

    SoundFx.Single.play('cubeOver');
  });

  droppable.on('drag:out', () => {
    canPlayOverSound = true;
  });

  droppable.on('drag:stop', () => {
    SoundFx.Single.play('cubeDown');
    canPlayOverSound = false;
  });

  droppable.on('collidable:in', ({collidingElement}) => {
    SoundFx.Single.play('cubeCollide');
    collidingElement.classList.add('isColliding');
  });

  droppable.on('collidable:out', ({collidingElement}) => {
    collidingElement.classList.remove('isColliding');
  });

  return droppable;
}

@fredbenenson
Copy link

Just seconding this – would love an un-minified version of the gh-pages javascript! Thanks for a great library.

@beefchimi
Copy link
Contributor

Getting very close to finishing our Examples site - which will be open sourced in this repo. Just need @tsov to finish up some things on Draggable so we can do a full release.

Apologies for the delay everyone!

@fredbenenson
Copy link

Sweet! Go @tsov :) I decided to switch to jQuery.draggable() for the time being since it just worked out of the box – but I'd much prefer to use Draggable since it's clear you guys put some great thought and work into it – particularly the touch support. Regardless thanks for your hard work!

@beefchimi beefchimi added the examples specific to the examples directory label Jan 16, 2018
@beefchimi
Copy link
Contributor

Closed by #118

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
documentation writing, maintaining, revising existing documentation examples specific to the examples directory
Projects
None yet
Development

No branches or pull requests

3 participants