Case Banner

components.case-stuff.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: ''
});

components.target-stuff.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: ''
});

components.wrapper-component.js

import Ember from 'ember';

export default Ember.Component.extend({
  didInsertElement() {
    this.element.addEventListener('mousewheel', () => {
      console.log(...arguments);
      this.set('scrolled', true)
    }) 
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

helpers.not.js

import Ember from 'ember';

export function not([value]) {
  return !value;
}

export default Ember.Helper.helper(not);

helpers.or.js

import Ember from 'ember';

export function or([a, b]) {
  return a || b;
}

export default Ember.Helper.helper(or);

styles.app.css

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
} 

.case-stuff {
  background: lightgray;
  width: 100vw;
  padding: 10px;
} 

.case-stuff.fixed {
  position: fixed;
  top: 0;
  height: 100px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.case-stuff.fixed.open {
  height: auto;
  overflow: visible;
}

.target-stuff {
  padding: 10px;
}

.target-stuff.fixed {
  margin-top: 100px; 
}

templates.application.hbs

<WrapperComponent as |o|>
	<CaseStuff @scrolled={{o.scrolled}} />
  
  <TargetStuff class={{if o.scrolled "fixed"}}>
  	<h2>Target stuff</h2>
		<LoremIpsum />
  </TargetStuff>
</WrapperComponent>

templates.components.case-stuff.hbs

<div class="case-stuff {{if @scrolled "fixed"}} {{if this.open "open"}}" ...attributes>
  Case stuff
  
  {{#if (or (not @scrolled) this.open)}}
    <div>
       <LoremIpsum />
    </div>
     
    {{#if this.open}}
      <button {{action (mut this.open) false}}>Close</button>
    {{/if}}
  {{else}}
     <button {{action (mut this.open) true}}>Open</button>
  {{/if}}
</div>

templates.components.lorem-ipsum.hbs

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a volutpat enim. Proin ac eros mauris. Curabitur dolor lorem, tincidunt id metus eget, congue molestie nisl. Morbi urna leo, dignissim a feugiat vel, lobortis at nisi. Nulla et volutpat est. Integer eu lectus quis risus porta bibendum sed non mi. Suspendisse sagittis quam a neque facilisis, quis lacinia diam pulvinar. Nulla nec urna ac ante finibus accumsan eget nec diam. Aliquam erat volutpat. Praesent ac leo elit. Suspendisse malesuada at mauris efficitur tempus. Curabitur nec lorem non arcu malesuada finibus. Integer fringilla vestibulum semper. Sed ornare ac est in fermentum. Sed aliquet urna eget mi luctus, sit amet mattis est gravida. Ut urna nulla, porttitor sit amet fermentum sit amet, accumsan quis nisl.</p>

<p>Curabitur sollicitudin, enim sed ultricies convallis, diam ex lacinia diam, ut tempor neque lectus nec urna. Morbi ut neque accumsan, eleifend dui ut, tempus sem. Phasellus et sapien eu diam pretium hendrerit sed ac quam. Cras faucibus diam orci, eu tincidunt enim condimentum eget. Nunc tincidunt ac tellus in accumsan. Phasellus blandit turpis ut nunc tristique, sed volutpat massa interdum. Vivamus hendrerit risus eget massa semper fringilla. In fermentum eros a erat consectetur pretium. Etiam a enim condimentum, bibendum nisl eget, bibendum eros. In tempus orci ac lacus interdum aliquet. Nunc ut mauris et neque luctus imperdiet.</p>

<p>Nunc felis dolor, condimentum porttitor lectus sed, porta pellentesque sem. Maecenas nunc dui, tincidunt eu suscipit nec, bibendum ut neque. Pellentesque ac massa aliquam, porta eros ut, faucibus enim. Nulla ac fringilla ipsum. Pellentesque tincidunt lacinia tristique. Phasellus imperdiet massa ac massa interdum, eget varius ligula auctor. Nunc ac enim nunc. Vivamus quis feugiat felis.</p>

<p>Donec in mollis justo. Aliquam euismod hendrerit lorem sagittis tempor. Phasellus molestie tristique molestie. Pellentesque ut blandit metus. Vestibulum elementum, arcu ac porta tempor, leo ex placerat elit, sit amet sagittis felis nisi quis ante. Nam quis orci odio. Sed dapibus ultrices tempus. Pellentesque a congue felis, ac consectetur lectus.</p>

<p>Etiam a fermentum metus. Donec maximus rhoncus tellus. Praesent sem nunc, fermentum sit amet lectus eu, venenatis cursus diam. Nunc eu molestie sapien. Donec eget aliquet urna. Aenean rhoncus mi sit amet mauris ornare, ac tempus elit pretium. Duis non cursus ipsum, nec finibus diam. Vestibulum cursus justo et magna tempor, non congue dolor consequat. Vivamus lorem eros, facilisis a hendrerit sed, ultricies nec eros. Fusce magna sem, faucibus vel sagittis ac, tincidunt sit amet urna. Nulla facilisi. Aenean et maximus dui.</p>

templates.components.target-stuff.hbs

<div class="target-stuff" ...attributes>
{{yield}}
</div>

templates.components.wrapper-component.hbs

{{yield (hash scrolled=this.scrolled)}}

twiddle.json

{
  "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"
  }
}