{"id":19195070,"url":"https://github.com/ksachdeva/angular2-swing","last_synced_at":"2025-09-04T19:21:55.845Z","repository":{"id":57179740,"uuid":"52452054","full_name":"ksachdeva/angular2-swing","owner":"ksachdeva","description":"angular 2 component for the swing library (https://github.com/gajus/swing)","archived":false,"fork":false,"pushed_at":"2023-07-29T10:25:41.000Z","size":45,"stargazers_count":61,"open_issues_count":16,"forks_count":29,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-06-29T19:51:36.753Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ksachdeva.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-02-24T15:21:02.000Z","updated_at":"2025-06-22T10:50:35.000Z","dependencies_parsed_at":"2024-06-18T22:59:19.372Z","dependency_job_id":"09403e34-e4ec-4169-a061-6c040b18f3b7","html_url":"https://github.com/ksachdeva/angular2-swing","commit_stats":{"total_commits":57,"total_committers":12,"mean_commits":4.75,"dds":0.631578947368421,"last_synced_commit":"f9d011d72360e4f195b97ce72b01ca1fd443a300"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/ksachdeva/angular2-swing","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ksachdeva%2Fangular2-swing","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ksachdeva%2Fangular2-swing/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ksachdeva%2Fangular2-swing/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ksachdeva%2Fangular2-swing/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ksachdeva","download_url":"https://codeload.github.com/ksachdeva/angular2-swing/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ksachdeva%2Fangular2-swing/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263996041,"owners_count":23541399,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-09T12:08:16.172Z","updated_at":"2025-07-07T01:04:39.945Z","avatar_url":"https://github.com/ksachdeva.png","language":"TypeScript","readme":"# angular2-swing\n\n# Build package\n\n`npm run build`\n\ndont forget `typings install`\n\n# Install\nnpm install angular2-swing --save\n\n# Usage\n```JavaScript\nimport {Component, ViewChild, ViewChildren, QueryList} from '@angular/core';\n\nimport {\n  Direction,\n  StackConfig,\n  Stack,\n  Card,\n  ThrowEvent,\n  DragEvent,\n  SwingStackComponent,\n  SwingCardComponent} from 'angular2-swing';\n\n@Component({\n  selector: 'app',\n  template: `\n    \u003cdiv id=\"viewport\"\u003e\n      \u003cul class=\"stack\" swing-stack  [stackConfig]=\"stackConfig\"  #myswing1 (throwout)=\"onThrowOut($event)\"\u003e\n        \u003cli swing-card #mycards1 [ngClass]=\"c.name\" *ngFor=\"let c of cards\"\u003e{{ c.symbol }}\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/div\u003e\n    \u003cdiv id=\"source\"\u003e\n        \u003cp\u003eDrag the playing cards out of the stack and let go. Dragging them\n          beyond the desk will throw them out of the stack. If you drag too\n          little and let go, the cards will spring back into place. You can\n          throw cards back into the stack after you have thrown them out.\u003c/p\u003e\n        \u003cp\u003eOpen the \u003ca href=\"https://developer.chrome.com/devtools/docs/console\"\u003e\n          Console\u003c/a\u003e to view the associated events.\u003cp\u003e\n        \u003cp\u003eDemonstration of \u003ca href=\"https://github.com/ksachdeva/angular2-swing\"\u003e\n          https://github.com/ksachdeva/angular2-swing\u003c/a\u003e implementation.\u003c/p\u003e\n    \u003c/div\u003e\n\n  `\n})\nexport class AppComponent {\n\n  @ViewChild('myswing1') swingStack: SwingStackComponent;\n  @ViewChildren('mycards1') swingCards: QueryList\u003cSwingCardComponent\u003e;\n\n  cards: Array\u003cany\u003e;\n  stackConfig: StackConfig;\n\n  constructor() {\n\n    this.stackConfig = {\n      // Default setting only allows UP, LEFT and RIGHT so you can override this as below\n      allowedDirections: [Direction.UP, Direction.DOWN, Direction.LEFT, Direction.RIGHT],\n      // Now need to send offsetX and offsetY with element instead of just offset\n      throwOutConfidence: (offsetX, offsetY, element) =\u003e {\n        return Math.min(Math.max(Math.abs(offsetX) / (element.offsetWidth / 1.7), Math.abs(offsetY) / (element.offsetHeight / 2)), 1);\n      },\n      throwOutDistance: (d) =\u003e {\n        return 800;\n      }\n    }\n\n    this.cards = [\n      { name: 'clubs', symbol: '♣' },\n      { name: 'diamonds', symbol: '♦' },\n      { name: 'spades', symbol: '♠' }\n    ];\n  }\n\n  ngAfterViewInit() {\n    // ViewChild \u0026 ViewChildren are only available\n    // in this function\n\n    console.log(this.swingStack); // this is the stack\n    console.log(this.swingCards); // this is a list of cards\n\n    // we can get the underlying stack\n    // which has methods - createCard, destroyCard, getCard etc\n    console.log(this.swingStack.stack);\n\n    // and the cards\n    // every card has methods - destroy, throwIn, throwOut etc\n    this.swingCards.forEach((c) =\u003e console.log(c.getCard()));\n\n    // this is how you can manually hook up to the\n    // events instead of providing the event method in the template\n    this.swingStack.throwoutleft.subscribe(\n      (event: ThrowEvent) =\u003e console.log('Manual hook: ', event));\n\n    this.swingStack.dragstart.subscribe((event: DragEvent) =\u003e console.log(event));\n\n    this.swingStack.dragmove.subscribe((event: DragEvent) =\u003e console.log(event));\n  }\n\n  // This method is called by hooking up the event\n  // on the HTML element - see the template above\n  onThrowOut(event: ThrowEvent) {\n    console.log('Hook from the template', event.throwDirection);\n  }\n}\n\n```\n\nSee [angular2-swing-example](https://github.com/ksachdeva/angular2-swing-example) repository for the full example\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fksachdeva%2Fangular2-swing","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fksachdeva%2Fangular2-swing","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fksachdeva%2Fangular2-swing/lists"}