From 32d09de62f75a5902500a78747e47a7402acc2b0 Mon Sep 17 00:00:00 2001 From: Neil Fraser Date: Fri, 14 Oct 2016 05:39:10 -0700 Subject: [PATCH] Make dropdown in Block Factory modal. --- demos/blockfactory/app_controller.js | 42 +++++++++++++++++-- .../blockfactory/block_library_controller.js | 2 +- demos/blockfactory/block_library_view.js | 19 +-------- demos/blockfactory/factory.css | 13 +++++- demos/blockfactory/index.html | 4 +- 5 files changed, 57 insertions(+), 23 deletions(-) diff --git a/demos/blockfactory/app_controller.js b/demos/blockfactory/app_controller.js index 91ae10249..96ad6752d 100644 --- a/demos/blockfactory/app_controller.js +++ b/demos/blockfactory/app_controller.js @@ -485,7 +485,7 @@ AppController.prototype.assignLibraryClickHandlers = function() { // Hide and show the block library dropdown. document.getElementById('button_blockLib').addEventListener('click', function() { - document.getElementById('dropdownDiv_blockLib').classList.toggle("show"); + self.openModal('dropdownDiv_blockLib'); }); }; @@ -534,7 +534,7 @@ AppController.prototype.assignBlockFactoryClickHandlers = function() { self.blockLibraryController.setNoneSelected(); // Close the Block Library Dropdown. - document.getElementById('dropdownDiv_blockLib').classList.remove('show'); + self.closeModal(); }); }; @@ -629,6 +629,37 @@ AppController.prototype.confirmLeavePage = function() { } }; +/** + * Show a modal element, usually a dropdown list. + * @param {string} id ID of element to show. + */ +AppController.prototype.openModal = function(id) { + Blockly.hideChaff(); + this.modalName_ = id; + document.getElementById(id).style.display = 'block'; + document.getElementById('modalShadow').style.display = 'block'; +}; + +/** + * Hide a previously shown modal element. + */ +AppController.prototype.closeModal = function() { + var id = this.modalName_; + if (!id) { + return; + } + document.getElementById(id).style.display = 'none'; + document.getElementById('modalShadow').style.display = 'none'; + this.modalName_ = null; +}; + +/** + * Name of currently open modal. + * @type {string?} + * @private + */ +AppController.prototype.modalName_ = null; + /** * Initialize Blockly and layout. Called on page load. */ @@ -647,6 +678,7 @@ AppController.prototype.init = function() { return; } + var self = this; // Handle Blockly Storage with App Engine. if ('BlocklyStorage' in window) { this.initializeBlocklyStorage(); @@ -656,9 +688,13 @@ AppController.prototype.init = function() { this.assignExporterClickHandlers(); this.assignLibraryClickHandlers(); this.assignBlockFactoryClickHandlers(); + // Hide and show the block library dropdown. + document.getElementById('modalShadow').addEventListener('click', + function() { + self.closeModal(); + }); this.onresize(); - var self = this; window.addEventListener('resize', function() { self.onresize(); }); diff --git a/demos/blockfactory/block_library_controller.js b/demos/blockfactory/block_library_controller.js index 6754e6f41..a7475cb09 100644 --- a/demos/blockfactory/block_library_controller.js +++ b/demos/blockfactory/block_library_controller.js @@ -276,7 +276,7 @@ BlockLibraryController.prototype.addOptionSelectHandler = function(blockType) { // Thus, the buttons show up as a disabled update button and an enabled // delete. self.view.updateButtons(blockType, true, true); - self.view.hide(); + blocklyFactory.closeModal(); }; // Returns a block option select handler. diff --git a/demos/blockfactory/block_library_view.js b/demos/blockfactory/block_library_view.js index 6179841cd..4facbc871 100644 --- a/demos/blockfactory/block_library_view.js +++ b/demos/blockfactory/block_library_view.js @@ -39,8 +39,6 @@ goog.require('goog.dom.classlist'); */ var BlockLibraryView = function() { // Div element to contain the block types to choose from. - // Id of the div that holds the block library view. - this.blockLibraryViewDivID = 'dropdownDiv_blockLib'; this.dropdown = document.getElementById('dropdownDiv_blockLib'); // Map of block type to corresponding 'a' element that is the option in the // dropdown. Used to quickly and easily get a specific option. @@ -53,20 +51,6 @@ var BlockLibraryView = function() { this.deleteButton.disabled = true; }; -/** - * Open the Block Library dropdown. - */ -BlockLibraryView.prototype.show = function() { - this.dropdown.classList.add("show"); -}; - -/** - * Close the Block Library dropdown. - */ -BlockLibraryView.prototype.hide = function() { - this.dropdown.classList.remove("show"); -}; - /** * Creates a node of a given element type and appends to the node with given id. * @param {string} blockType - Type of block. @@ -210,7 +194,8 @@ BlockLibraryView.prototype.getSelectedOption = function() { */ BlockLibraryView.prototype.clearOptions = function() { var blockOpts = this.dropdown.getElementsByClassName('blockLibOpt'); - for (var i = 0, option; option = blockOpts[i]; i++) { + var option; + while ((option = blockOpts[0])) { option.parentNode.removeChild(option); } }; diff --git a/demos/blockfactory/factory.css b/demos/blockfactory/factory.css index 9d3e85d5b..60abbeb96 100644 --- a/demos/blockfactory/factory.css +++ b/demos/blockfactory/factory.css @@ -499,6 +499,17 @@ td.taboff:hover { padding-left: 15px; } +#modalShadow { + display: none; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: rgba(0, 0, 0, 0.05); + z-index: 100; +} + /* Rules for Closure popup color picker */ .goog-palette { outline: none; @@ -554,7 +565,7 @@ td.taboff:hover { min-width: 170px; opacity: 1; position: absolute; - z-index: 1; + z-index: 101; } /* Links inside the dropdown */ diff --git a/demos/blockfactory/index.html b/demos/blockfactory/index.html index e81b7a8f4..ec3d92430 100644 --- a/demos/blockfactory/index.html +++ b/demos/blockfactory/index.html @@ -5,7 +5,7 @@ - Blockly Demo: Blockly Factory + Blockly Demo: Blockly Developer Tools @@ -386,6 +386,8 @@ +
+