BVB Source Codes

dat.gui Show CenteredDiv.js Source code

Return Download dat.gui: download CenteredDiv.js Source code - Download dat.gui Source code - Type:.js
  1. /**
  2.  * dat-gui JavaScript Controller Library
  3.  * http://code.google.com/p/dat-gui
  4.  *
  5.  * Copyright 2011 Data Arts Team, Google Creative Lab
  6.  *
  7.  * Licensed under the Apache License, Version 2.0 (the "License");
  8.  * you may not use this file except in compliance with the License.
  9.  * You may obtain a copy of the License at
  10.  *
  11.  * http://www.apache.org/licenses/LICENSE-2.0
  12.  */
  13.  
  14. import dom from '../dom/dom';
  15. import common from '../utils/common';
  16.  
  17. class CenteredDiv {
  18.   constructor() {
  19.     this.backgroundElement = document.createElement('div');
  20.     common.extend(this.backgroundElement.style, {
  21.       backgroundColor: 'rgba(0,0,0,0.8)',
  22.       top: 0,
  23.       left: 0,
  24.       display: 'none',
  25.       zIndex: '1000',
  26.       opacity: 0,
  27.       WebkitTransition: 'opacity 0.2s linear',
  28.       transition: 'opacity 0.2s linear'
  29.     });
  30.  
  31.     dom.makeFullscreen(this.backgroundElement);
  32.     this.backgroundElement.style.position = 'fixed';
  33.  
  34.     this.domElement = document.createElement('div');
  35.     common.extend(this.domElement.style, {
  36.       position: 'fixed',
  37.       display: 'none',
  38.       zIndex: '1001',
  39.       opacity: 0,
  40.       WebkitTransition: '-webkit-transform 0.2s ease-out, opacity 0.2s linear',
  41.       transition: 'transform 0.2s ease-out, opacity 0.2s linear'
  42.     });
  43.  
  44.  
  45.     document.body.appendChild(this.backgroundElement);
  46.     document.body.appendChild(this.domElement);
  47.  
  48.     const _this = this;
  49.     dom.bind(this.backgroundElement, 'click', function() {
  50.       _this.hide();
  51.     });
  52.   }
  53.  
  54.   show() {
  55.     const _this = this;
  56.  
  57.     this.backgroundElement.style.display = 'block';
  58.  
  59.     this.domElement.style.display = 'block';
  60.     this.domElement.style.opacity = 0;
  61. //    this.domElement.style.top = '52%';
  62.     this.domElement.style.webkitTransform = 'scale(1.1)';
  63.  
  64.     this.layout();
  65.  
  66.     common.defer(function() {
  67.       _this.backgroundElement.style.opacity = 1;
  68.       _this.domElement.style.opacity = 1;
  69.       _this.domElement.style.webkitTransform = 'scale(1)';
  70.     });
  71.   }
  72.  
  73.   /**
  74.    * Hide centered div
  75.    */
  76.   hide() {
  77.     const _this = this;
  78.  
  79.     const hide = function() {
  80.       _this.domElement.style.display = 'none';
  81.       _this.backgroundElement.style.display = 'none';
  82.  
  83.       dom.unbind(_this.domElement, 'webkitTransitionEnd', hide);
  84.       dom.unbind(_this.domElement, 'transitionend', hide);
  85.       dom.unbind(_this.domElement, 'oTransitionEnd', hide);
  86.     };
  87.  
  88.     dom.bind(this.domElement, 'webkitTransitionEnd', hide);
  89.     dom.bind(this.domElement, 'transitionend', hide);
  90.     dom.bind(this.domElement, 'oTransitionEnd', hide);
  91.  
  92.     this.backgroundElement.style.opacity = 0;
  93. //    this.domElement.style.top = '48%';
  94.     this.domElement.style.opacity = 0;
  95.     this.domElement.style.webkitTransform = 'scale(1.1)';
  96.   }
  97.  
  98.   layout() {
  99.     this.domElement.style.left = window.innerWidth / 2 - dom.getWidth(this.domElement) / 2 + 'px';
  100.     this.domElement.style.top = window.innerHeight / 2 - dom.getHeight(this.domElement) / 2 + 'px';
  101.   }
  102. }
  103.  
  104. export default CenteredDiv;
  105.  
downloadCenteredDiv.js Source code - Download dat.gui Source code
Related Source Codes/Software:
tmate - Instant Terminal Sharing ht... 2017-04-16
WNXHuntForCity - City find By Objective - C 2017-04-16
st2 - StackStorm (aka IFTTT for Ops) is event-driven aut... 2017-04-16
css-in-js - React: CSS in JS techniques comparison. 2017-04-16
android-viewflow - A horizontal view scroller library for Android 2017-04-16
capybara-webkit - A Capybara driver for headless WebKit to test Java... 2017-04-16
fullstackpython.com - Full Stack Python source with Pelican, Bootstrap a... 2017-04-16
naxsi - NAXSI is an open-source, high performance, low rul... 2017-04-16
ToGL - Direct3D to OpenGL abstraction layer 2017-04-16
LiveScript - LiveScript is a language which compiles to JavaScr... 2017-04-16
MaterialSearchView - Express it in the library to implement SearchView ... 2017-04-23
ptpython - A better Python REPL 2017-04-23
Laravel-4-Bootstrap-Starter-Site - Laravel 4 Starter Site is a basic blog application... 2017-04-23
official-images - Primary source of truth for the Docker "Official I... 2017-04-23
awesome-chrome-devtools - Awesome tooling and resources in the Chrome DevToo... 2017-04-23
EventStore - The open-source, functional database with Complex ... 2017-04-23
screencat - 2017-04-23
viz.js - A hack to put Graphviz on the web. ... 2017-04-23
JKeyboardPanelSwitch - For resolve the layout conflict when keybord & amp... 2017-04-23
mama2 - Mother plan - all firewood high flame 2017-04-23

 Back to top