Last active
April 14, 2020 20:16
-
-
Save ASH-Michael/29da2e8e7af3e9ebf25169d4cefa298c to your computer and use it in GitHub Desktop.
Dynamic Profile
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import Ember from 'ember'; | |
| export default Ember.Component.extend({ | |
| classNames: ['profile-widget'], | |
| classNameBindings: ['isInset:content-inset:content-full'], | |
| isInset: true, | |
| hasArgs: false, | |
| didReceiveAttrs() { | |
| this._super(...arguments); | |
| const model = this.model; | |
| this.isObject = typeof model === 'object' && !(model instanceof Array); | |
| if (this.isObject) { | |
| this._setModelProperties(); | |
| } | |
| }, | |
| _setModelProperties() { | |
| for (let property in this.model) { | |
| // check for model property attributes passed in to component | |
| if (this[property]) { | |
| this.hasArgs = true; | |
| } | |
| // if model property attributes have been passed in, then use those | |
| if (this.model.hasOwnProperty(property) && this.hasArgs) { | |
| this.model[property] = this[property]; | |
| } | |
| } | |
| } | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import Ember from 'ember'; | |
| export default Ember.Component.extend({ | |
| classNames: ['dynamic-profile'], | |
| init() { | |
| this._super(...arguments); | |
| this.sectionLinks = []; | |
| }, | |
| didReceiveAttrs() { | |
| this._super(...arguments); | |
| for (let property in this.model) { | |
| console.log(property); | |
| } | |
| } | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import Ember from 'ember'; | |
| import BaseWidget from 'app/components/base-widget'; | |
| export default BaseWidget.extend({ | |
| classNames: ['profile-contact'] | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import Ember from 'ember'; | |
| import BaseWidget from 'app/components/base-widget'; | |
| export default BaseWidget.extend({ | |
| classNames: ['profile-cta'] | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import Ember from 'ember'; | |
| import BaseWidget from 'app/components/base-widget'; | |
| export default BaseWidget.extend({ | |
| classNames: ['profile-photos'] | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import Ember from 'ember'; | |
| import BaseWidget from 'app/components/base-widget'; | |
| export default BaseWidget.extend({ | |
| classNames: ['profile-status'] | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import Ember from 'ember'; | |
| import BaseWidget from 'app/components/base-widget'; | |
| export default BaseWidget.extend({ | |
| classNames: ['profile-title'] | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import Ember from 'ember'; | |
| export default Ember.Component.extend({ | |
| classNames: ['status-message'], | |
| classNameBindings: ['type'], | |
| type: null | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import Ember from 'ember'; | |
| export default Ember.Controller.extend({ | |
| appName: 'Dynamic Profile POC' | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import EmberRouter from '@ember/routing/router'; | |
| import config from './config/environment'; | |
| const Router = EmberRouter.extend({ | |
| location: 'none', | |
| rootURL: config.rootURL | |
| }); | |
| Router.map(function() { | |
| this.route('index', { path: '/' }); | |
| this.route('pattern-2'); | |
| }); | |
| export default Router; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import Ember from 'ember'; | |
| import { set } from '@ember/object'; | |
| export default Ember.Route.extend({ | |
| profileData: null, | |
| model() { | |
| return { | |
| id: 123, | |
| banner: { | |
| url: 'https://fakeimg.pl/350x120/?text=[ banner image ]', | |
| alt: 'banner image' | |
| }, | |
| title: 'My Profile', | |
| contact: { | |
| address: "123 Some Street", | |
| phone: "(555) 123-4567", | |
| email: "somebody@some-site.com", | |
| website: "www.some-site.com" | |
| }, | |
| photos: { | |
| thumbs: [ | |
| 'https://fakeimg.pl/375x375/?text=[ thumb 1 ]', | |
| 'https://fakeimg.pl/375x375/?text=[ thumb 2 ]' | |
| ], | |
| originals: [ | |
| 'https://fakeimg.pl/600x6005/?text=[ img 1 ]', | |
| 'https://fakeimg.pl/600x600/?text=[ img 2 ]' | |
| ] | |
| }, | |
| social: [ | |
| { | |
| url: '' | |
| } | |
| ], | |
| legal: '' | |
| } | |
| }, | |
| afterModel(model) { | |
| set(this, 'profileData', [ | |
| { | |
| component: 'banner', | |
| inset: false, | |
| content: model.banner | |
| }, | |
| { | |
| component: 'menu', | |
| content: { | |
| links: 'Photos Social' | |
| } | |
| }, | |
| { | |
| component: 'title', | |
| }, | |
| { | |
| component: 'contact', | |
| }, | |
| { | |
| component: 'cta' | |
| }, | |
| { | |
| component: 'photos', | |
| inset: false | |
| }, | |
| { | |
| component: 'social' | |
| } | |
| ]); | |
| }, | |
| setupController(controller, model) { | |
| // Call _super for default behavior | |
| this._super(controller, model); | |
| // Implement your custom setup after | |
| this.controllerFor('index') | |
| .set('profileData', this.profileData); | |
| } | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import Ember from 'ember'; | |
| export default Ember.Route.extend({ | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| margin: 12px 16px; | |
| font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; | |
| font-size: 12pt; | |
| } | |
| p { | |
| margin: 0 0 1rem; | |
| } | |
| h1 { | |
| margin: 0 0 0.5rem; | |
| } | |
| img { | |
| display: block; | |
| } | |
| button { | |
| width: 100%; | |
| border: none; | |
| border-radius: 0.25rem; | |
| padding: 1rem 0; | |
| color: white; | |
| font-size: 1rem; | |
| background: dodgerblue; | |
| } | |
| /* | |
| dynamic-profile | |
| */ | |
| .dynamic-profile { | |
| width: 21.875em; | |
| border: 1px solid #979797; | |
| } | |
| /* | |
| profile-widget | |
| */ | |
| .profile-widget.content-inset { | |
| padding: 1rem 1rem; | |
| } | |
| .profile-widget.content-full { | |
| padding: 0; | |
| } | |
| .profile-widget:last-child:not(.content-full) { | |
| padding-bottom: 1rem; | |
| } | |
| /* | |
| profile-contact | |
| */ | |
| .profile-contact p { | |
| margin: 0; | |
| } | |
| .profile-contact span { | |
| display: block; | |
| } | |
| /* | |
| profile-menu | |
| */ | |
| .profile-menu ul { | |
| margin: 0; | |
| padding: 0; | |
| display: flex; | |
| border-bottom: 1px solid #979797; | |
| } | |
| .profile-menu li { | |
| padding: 0 1rem 1rem 0; | |
| list-style: none; | |
| } | |
| /* | |
| profile-photos | |
| */ | |
| .profile-photos { | |
| display: flex; | |
| justify-content: space-between; | |
| } | |
| .profile-photos .thumb-container { | |
| flex-basis: 49%; | |
| } | |
| .profile-photos img { | |
| max-width: 100%; | |
| display: block; | |
| flex-shrink: 0; | |
| } | |
| /* | |
| profile-social | |
| */ | |
| .profile-social ul { | |
| padding: 0; | |
| display: flex; | |
| justify-content: space-around; | |
| } | |
| .profile-social li { | |
| list-style: none; | |
| } | |
| .profile-social a { | |
| padding: 1rem; | |
| border-radius: 100%; | |
| display: inline-flex; | |
| background: dodgerblue; | |
| } | |
| .profile-social svg { | |
| width: 1.75rem; | |
| height: 1.75rem; | |
| } | |
| /* | |
| 3rd party status-message component | |
| */ | |
| .status-message { | |
| padding: 1rem; | |
| color: #383d41; | |
| background: #E2E3E5; | |
| } | |
| .status-message.info { | |
| color: #31708f; | |
| background: #d9edf7; | |
| } | |
| .status-message.success { | |
| color: #3C763D; | |
| background: #e2efda; | |
| } | |
| .status-message.warning { | |
| color: #8A6D3B; | |
| background: #fcf8e3; | |
| } | |
| .status-message.error { | |
| color: #A94442; | |
| background: #f2DEDE; | |
| } | |
| .status-message p:last-of-type { | |
| margin: 0; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "version": "0.15.1", | |
| "EmberENV": { | |
| "FEATURES": {} | |
| }, | |
| "options": { | |
| "use_pods": false, | |
| "enable-testing": false | |
| }, | |
| "dependencies": { | |
| "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js", | |
| "ember": "3.4.3", | |
| "ember-template-compiler": "3.4.3", | |
| "ember-testing": "3.4.3" | |
| }, | |
| "addons": { | |
| "ember-data": "3.4.2" | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment