Permalink
Browse files

๐Ÿ”” add staticOpen option

  • Loading branch information...
1 parent 6f972e8 commit 5a86c6d3b20615973ad2bc83531db1a233554cd1 @desandro desandro committed Nov 5, 2016
Showing with 66 additions and 9 deletions.
  1. +13 โˆ’0 huebee.css
  2. +26 โˆ’9 huebee.js
  3. +4 โˆ’0 sandbox/basic.html
  4. +7 โˆ’0 test/index.html
  5. +16 โˆ’0 test/unit/static-open.js
View
@@ -14,6 +14,11 @@ http://huebee.metafizzy.co
transform: translateY(10px);
}
+.huebee.is-static-open {
+ position: relative;
+ z-index: auto;
+}
+
.huebee__container {
position: absolute;
left: 0;
@@ -24,6 +29,14 @@ http://huebee.metafizzy.co
box-shadow: 0 5px 10px hsla(0, 0%, 0%, 0.3);
}
+.huebee.is-static-open .huebee__container {
+ position: relative;
+ display: inline-block;
+ left: auto;
+ top: auto;
+ box-shadow: none;
+}
+
.huebee__canvas {
display: block;
cursor: pointer;
View
@@ -93,15 +93,19 @@ proto.create = function() {
this.onElemTransitionend = this.elemTransitionend.bind( this );
// open events
this.isInputAnchor = this.anchor.nodeName == 'INPUT';
- this.anchor.addEventListener( 'click', this.openIt );
- this.anchor.addEventListener( 'focus', this.openIt );
+ if ( !this.options.staticOpen ) {
+ this.anchor.addEventListener( 'click', this.openIt );
+ this.anchor.addEventListener( 'focus', this.openIt );
+ }
// change event
if ( this.isInputAnchor ) {
this.anchor.addEventListener( 'input', this.inputInput.bind( this ) );
}
// create element
var element = this.element = document.createElement('div');
- element.className = 'huebee is-hidden ';
+ element.className = 'huebee ';
+ element.className += this.options.staticOpen ? 'is-static-open ' :
+ 'is-hidden ';
element.className += this.options.className || '';
// create container
var container = this.container = document.createElement('div');
@@ -117,9 +121,11 @@ proto.create = function() {
element.appendChild( container );
// set relative position on parent
- var parentStyle = getComputedStyle( this.anchor.parentNode );
- if ( parentStyle.position != 'relative' && parentStyle.position != 'absolute' ) {
- this.anchor.parentNode.style.position = 'relative';
+ if ( !this.options.staticOpen ) {
+ var parentStyle = getComputedStyle( this.anchor.parentNode );
+ if ( parentStyle.position != 'relative' && parentStyle.position != 'absolute' ) {
+ this.anchor.parentNode.style.position = 'relative';
+ }
}
// satY
@@ -131,6 +137,9 @@ proto.create = function() {
// colors
this.updateColors();
this.setAnchorColor();
+ if ( this.options.staticOpen ) {
+ this.open();
+ }
};
proto.getSetElems = function( option ) {
@@ -156,6 +165,9 @@ proto.createCanvas = function() {
var svgURI = 'http://www.w3.org/2000/svg';
proto.createCloseButton = function() {
+ if ( this.options.staticOpen ) {
+ return;
+ }
var svg = document.createElementNS( svgURI, 'svg');
svg.setAttribute( 'class', 'huebee__close-button' );
svg.setAttribute( 'viewBox', '0 0 24 24' );
@@ -289,11 +301,13 @@ proto.open = function() {
}
var anchor = this.anchor;
var elem = this.element;
- elem.style.left = anchor.offsetLeft + 'px';
- elem.style.top = anchor.offsetTop + anchor.offsetHeight + 'px';
+ if ( !this.options.staticOpen ) {
+ elem.style.left = anchor.offsetLeft + 'px';
+ elem.style.top = anchor.offsetTop + anchor.offsetHeight + 'px';
+ }
this.bindOpenEvents( true );
elem.removeEventListener( 'transitionend', this.onElemTransitionend );
- // add canvas to DOM
+ // add huebee to DOM
anchor.parentNode.insertBefore( elem, anchor.nextSibling );
// measurements
var duration = getComputedStyle( elem ).transitionDuration;
@@ -310,6 +324,9 @@ proto.open = function() {
};
proto.bindOpenEvents = function( isAdd ) {
+ if ( this.options.staticOpen ) {
+ return;
+ }
var method = ( isAdd ? 'add' : 'remove' ) + 'EventListener';
docElem[ method]( 'mousedown', this.outsideCloseIt );
docElem[ method]( 'touchstart', this.outsideCloseIt );
View
@@ -66,6 +66,10 @@
<p data-huebee='{ "setBGColor": true }'>Color me</p>
</div>
+<p>
+ <input data-huebee='{ "staticOpen": true, "setBGColor": true }' value="#F08" />
+</p>
+
<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
<script src="../bower_components/unipointer/unipointer.js"></script>
<script src="../huebee.js"></script>
View
@@ -37,6 +37,7 @@
<script src="unit/set-multiples.js"></script>
<script src="unit/custom-colors.js"></script>
<script src="unit/css.js"></script>
+ <script src="unit/static-open.js"></script>
<script src="unit/html-init.js"></script>
</head>
@@ -74,6 +75,12 @@
<div class="css">css</div>
+ <h2>staticOpen</h2>
+
+ <p>
+ <input class="static-open-input" value="#F08" />
+ </p>
+
<h2>html init</h2>
<input class="html-init-input" data-huebee='{ "saturations": 2, "shades": 3, "setBGColor": true }' />
@@ -0,0 +1,16 @@
+QUnit.test( 'staticOpen', function( assert ) {
+ var input = document.querySelector('.static-open-input');
+ var hueb = new Huebee( input, {
+ staticOpen: true,
+ className: 'static-open-tester',
+ });
+
+ assert.ok( document.body.contains( hueb.element ), 'huebee in document' );
+ input.blur();
+ assert.ok( hueb.isOpen, 'huebee still open after input blur' );
+ hueb.close();
+ assert.notOk( document.body.contains( hueb.element ), 'huebee removed after close()' );
+ hueb.open();
+ assert.ok( document.body.contains( hueb.element ), 'huebee back in document after open()' );
+
+});

0 comments on commit 5a86c6d

Please sign in to comment.