{"id":18890030,"url":"https://github.com/shipshapecode/ember-3d-folding-panel","last_synced_at":"2025-04-14T23:31:04.406Z","repository":{"id":57222940,"uuid":"67753873","full_name":"shipshapecode/ember-3d-folding-panel","owner":"shipshapecode","description":"An Ember addon for 3d folding panels","archived":false,"fork":false,"pushed_at":"2019-03-06T14:37:12.000Z","size":5092,"stargazers_count":5,"open_issues_count":4,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-02T23:04:35.984Z","etag":null,"topics":["3d-folding-panels","ember-addon"],"latest_commit_sha":null,"homepage":"https://shipshapecode.github.io/ember-3d-folding-panel/","language":"JavaScript","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/shipshapecode.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-09-09T01:24:54.000Z","updated_at":"2019-03-06T14:37:14.000Z","dependencies_parsed_at":"2022-08-25T12:22:20.240Z","dependency_job_id":null,"html_url":"https://github.com/shipshapecode/ember-3d-folding-panel","commit_stats":null,"previous_names":[],"tags_count":25,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shipshapecode%2Fember-3d-folding-panel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shipshapecode%2Fember-3d-folding-panel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shipshapecode%2Fember-3d-folding-panel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shipshapecode%2Fember-3d-folding-panel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shipshapecode","download_url":"https://codeload.github.com/shipshapecode/ember-3d-folding-panel/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248262434,"owners_count":21074308,"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":["3d-folding-panels","ember-addon"],"created_at":"2024-11-08T07:52:10.338Z","updated_at":"2025-04-14T23:31:03.530Z","avatar_url":"https://github.com/shipshapecode.png","language":"JavaScript","readme":"ember-3d-folding-panel\n==============================================================================\n\n\u003ca href=\"https://shipshape.io/\"\u003e\u003cimg src=\"http://i.imgur.com/KVqNjgO.png\" width=\"100\" height=\"100\"/\u003e\u003c/a\u003e\n\n**[ember-3d-folding-panel is built and maintained by Ship Shape. Contact us for Ember.js consulting, development, and training for your project](https://shipshape.io/ember-consulting/)**.\n\n[![npm version](https://badge.fury.io/js/ember-3d-folding-panel.svg)](http://badge.fury.io/js/ember-3d-folding-panel)\n[![npm](https://img.shields.io/npm/dm/ember-3d-folding-panel.svg)]()\n[![Ember Observer Score](http://emberobserver.com/badges/ember-3d-folding-panel.svg)](http://emberobserver.com/addons/ember-3d-folding-panel)\n[![Build Status](https://travis-ci.org/shipshapecode/ember-3d-folding-panel.svg?branch=master)](https://travis-ci.org/shipshapecode/ember-3d-folding-panel)\n[![Code Climate](https://codeclimate.com/github/shipshapecode/ember-3d-folding-panel/badges/gpa.svg)](https://codeclimate.com/github/shipshapecode/ember-3d-folding-panel)\n[![Test Coverage](https://codeclimate.com/github/shipshapecode/ember-3d-folding-panel/badges/coverage.svg)](https://codeclimate.com/github/shipshapecode/ember-3d-folding-panel/coverage)\n\nEmber-3d-folding-panel is based on [3D Folding Panel](https://codyhouse.co/gem/3d-folding-panel/) by CodyHouse. It aims to make it easily configurable for use with your Ember apps.\n\nCompatibility\n------------------------------------------------------------------------------\n\n* Ember.js v2.18 or above\n* Ember CLI v2.13 or above\n\n\nInstallation\n------------------------------------------------------------------------------\n`ember install ember-3d-folding-panel`\n\nUsage\n------------------------------------------------------------------------------\n```hbs\n{{folding-panel}}\n{{#ember-3d-folding-panel}}\n  {{#each model as |item|}}\n    {{#item-square item=item}}\n      \u003cimg class=\"client-image\" src=\"{{item.imageURL}}\"\u003e\n    {{/item-square}}\n  {{/each}}\n{{/ember-3d-folding-panel}}\n```\n\n`items` are defined as an array of objects, these should contain `heading` and `subheading`.\n You can also display extra info inside of the `item-square`.\n \n The route from the dummy app, which contains an array of items, looks like this:\n ```js\n export default Route.extend({\n  model() {\n    return [\n      {\n        heading: 'Client 1',\n        subheading: 'Lorem ipsum dolor sit amet, consectetur.',\n        panelHeading: 'Client 1',\n        panelSubheading: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, laboriosam?',\n        imageURL: 'img/logo1.png',\n        panelInfo\n      },\n      {\n        heading: 'Client 2',\n        subheading: 'Lorem ipsum dolor sit amet, consectetur.',\n        panelHeading: 'Client 2',\n        panelSubheading: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, laboriosam?',\n        imageURL: 'img/logo2.png',\n        panelInfo\n      },\n      ...\n    ];\n  }\n});\n```\n \n \n## Styles\n\nEmber-3d-folding-panel uses Sass for styles. The default styles for the panels are stored in an overridable Sass map. This is accomplished by supplying a `$ember-3d-folding-panel` map with any or all of the keys found in the defaults map below.\n\n```scss\n// This is the default map, not what you should use. \n// i.e. you want to define $ember-3d-folding-panel, not $ember-3d-folding-panel-defaults\n$ember-3d-folding-panel-defaults: (\n  'accent-color': #544173, // Mulled Wine\n  'color-1': #363558, // Martinique\n  'color-2': #544173, // Mulled Wine\n  'color-3': #dadcdc, // Iron\n  'color-4': #65d29b, // Emerald\n  'color-6': #ffffff, // White\n  'dark-color': #363558, // Martinique\n  'fold-animation': .5s,\n  'fold-color': #dadcdc,\n  'fold-content-animation': .2s*(3+1)/2, // replace 3 with number of elements that you want to animate\n  'light-color': #ffffff, // White\n  'overlay-color': #1c1726, // Bastille\n);\n```\n\nUnder the hood, the addon will merge the default settings and any settings supplied in an `$ember-3d-folding-panel` map and use those to style the panels. Very little, other than this map, should be required to get the panels looking the way you want them to.\n\n### Example styles usages\n\nIf you wanted to supply some different colors for the panels, but keep the same animations, your styles.scss might look something like this:\n```sass\n$ember-3d-folding-panel: (\n  'color-1': #ffffff,\n  'color-2': #000000,\n  'color-3': #ffffff,\n  'color-4': #000000\n);\n\n// After you define your overrides, make sure to import the styles from the addon!\n@import 'ember-3d-folding-panel';\n```\n\nContributing\n------------------------------------------------------------------------------\n\nSee the [Contributing](CONTRIBUTING.md) guide for details.\n\n\nLicense\n------------------------------------------------------------------------------\n\nThis project is licensed under the [MIT License](LICENSE.md).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshipshapecode%2Fember-3d-folding-panel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshipshapecode%2Fember-3d-folding-panel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshipshapecode%2Fember-3d-folding-panel/lists"}