| OLD | NEW |
| 1 // Copyright 2014 The Chromium Authors. All rights reserved. | 1 // Copyright 2014 The Chromium Authors. All rights reserved. |
| 2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
| 3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
| 4 | 4 |
| 5 /** | 5 /** |
| 6 * ImageEditor is the top level object that holds together and connects | 6 * ImageEditor is the top level object that holds together and connects |
| 7 * everything needed for image editing. | 7 * everything needed for image editing. |
| 8 * | 8 * |
| 9 * @param {!Viewport} viewport The viewport. | 9 * @param {!Viewport} viewport The viewport. |
| 10 * @param {!ImageView} imageView The ImageView containing the images to edit. | 10 * @param {!ImageView} imageView The ImageView containing the images to edit. |
| 11 * @param {!ImageEditor.Prompt} prompt Prompt instance. | 11 * @param {!ImageEditorPrompt} prompt Prompt instance. |
| 12 * @param {!Object} DOMContainers Various DOM containers required for the | 12 * @param {!Object} DOMContainers Various DOM containers required for the |
| 13 * editor. | 13 * editor. |
| 14 * @param {!Array<!ImageEditor.Mode>} modes Available editor modes. | 14 * @param {!Array<!ImageEditor.Mode>} modes Available editor modes. |
| 15 * @param {function(string, ...string)} displayStringFunction String | 15 * @param {function(string, ...string)} displayStringFunction String |
| 16 * formatting function. | 16 * formatting function. |
| 17 * @constructor | 17 * @constructor |
| 18 * @extends {cr.EventTarget} | 18 * @extends {cr.EventTarget} |
| 19 * @struct | 19 * @struct |
| 20 * | 20 * |
| 21 * TODO(yawano): Remove displayStringFunction from arguments. | 21 * TODO(yawano): Remove displayStringFunction from arguments. |
| (...skipping 321 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 343 * @return {!ImageView} ImageView instance. | 343 * @return {!ImageView} ImageView instance. |
| 344 */ | 344 */ |
| 345 ImageEditor.prototype.getImageView = function() { return this.imageView_; }; | 345 ImageEditor.prototype.getImageView = function() { return this.imageView_; }; |
| 346 | 346 |
| 347 /** | 347 /** |
| 348 * @return {!Viewport} Viewport instance. | 348 * @return {!Viewport} Viewport instance. |
| 349 */ | 349 */ |
| 350 ImageEditor.prototype.getViewport = function() { return this.viewport_; }; | 350 ImageEditor.prototype.getViewport = function() { return this.viewport_; }; |
| 351 | 351 |
| 352 /** | 352 /** |
| 353 * @return {!ImageEditor.Prompt} Prompt instance. | 353 * @return {!ImageEditorPrompt} Prompt instance. |
| 354 */ | 354 */ |
| 355 ImageEditor.prototype.getPrompt = function() { return this.prompt_; }; | 355 ImageEditor.prototype.getPrompt = function() { return this.prompt_; }; |
| 356 | 356 |
| 357 /** | 357 /** |
| 358 * Handle the toolbar controls update. | 358 * Handle the toolbar controls update. |
| 359 * @param {Object} options A map of options. | 359 * @param {Object} options A map of options. |
| 360 */ | 360 */ |
| 361 ImageEditor.prototype.onOptionsChange = function(options) { | 361 ImageEditor.prototype.onOptionsChange = function(options) { |
| 362 ImageUtil.trace.resetTimer('update'); | 362 ImageUtil.trace.resetTimer('update'); |
| 363 if (this.currentMode_) { | 363 if (this.currentMode_) { |
| (...skipping 1092 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 1456 this.wrapper_.hidden = !on; | 1456 this.wrapper_.hidden = !on; |
| 1457 | 1457 |
| 1458 // Focus the first input on the toolbar. | 1458 // Focus the first input on the toolbar. |
| 1459 if (on) { | 1459 if (on) { |
| 1460 var input = this.container_.querySelector( | 1460 var input = this.container_.querySelector( |
| 1461 'button, paper-button, input, paper-input, paper-slider'); | 1461 'button, paper-button, input, paper-input, paper-slider'); |
| 1462 if (input) | 1462 if (input) |
| 1463 input.focus(); | 1463 input.focus(); |
| 1464 } | 1464 } |
| 1465 }; | 1465 }; |
| 1466 | |
| 1467 /** A prompt panel for the editor. | |
| 1468 * | |
| 1469 * @param {!HTMLElement} container Container element. | |
| 1470 * @param {function(string, ...string)} displayStringFunction A formatting | |
| 1471 * function. | |
| 1472 * @constructor | |
| 1473 * @struct | |
| 1474 */ | |
| 1475 ImageEditor.Prompt = function(container, displayStringFunction) { | |
| 1476 this.container_ = container; | |
| 1477 this.displayStringFunction_ = displayStringFunction; | |
| 1478 | |
| 1479 /** | |
| 1480 * @type {HTMLDivElement} | |
| 1481 * @private | |
| 1482 */ | |
| 1483 this.wrapper_ = null; | |
| 1484 | |
| 1485 /** | |
| 1486 * @type {HTMLDivElement} | |
| 1487 * @private | |
| 1488 */ | |
| 1489 this.prompt_ = null; | |
| 1490 | |
| 1491 /** | |
| 1492 * @type {number} | |
| 1493 * @private | |
| 1494 */ | |
| 1495 this.timer_ = 0; | |
| 1496 }; | |
| 1497 | |
| 1498 /** | |
| 1499 * Reset the prompt. | |
| 1500 */ | |
| 1501 ImageEditor.Prompt.prototype.reset = function() { | |
| 1502 this.cancelTimer(); | |
| 1503 if (this.wrapper_) { | |
| 1504 this.container_.removeChild(this.wrapper_); | |
| 1505 this.wrapper_ = null; | |
| 1506 this.prompt_ = null; | |
| 1507 } | |
| 1508 }; | |
| 1509 | |
| 1510 /** | |
| 1511 * Cancel the delayed action. | |
| 1512 */ | |
| 1513 ImageEditor.Prompt.prototype.cancelTimer = function() { | |
| 1514 if (this.timer_) { | |
| 1515 clearTimeout(this.timer_); | |
| 1516 this.timer_ = 0; | |
| 1517 } | |
| 1518 }; | |
| 1519 | |
| 1520 /** | |
| 1521 * Schedule the delayed action. | |
| 1522 * @param {function()} callback Callback. | |
| 1523 * @param {number} timeout Timeout. | |
| 1524 */ | |
| 1525 ImageEditor.Prompt.prototype.setTimer = function(callback, timeout) { | |
| 1526 this.cancelTimer(); | |
| 1527 var self = this; | |
| 1528 this.timer_ = setTimeout(function() { | |
| 1529 self.timer_ = 0; | |
| 1530 callback(); | |
| 1531 }, timeout); | |
| 1532 }; | |
| 1533 | |
| 1534 /** | |
| 1535 * Show the prompt. | |
| 1536 * | |
| 1537 * @param {string} text The prompt text. | |
| 1538 * @param {number=} opt_timeout Timeout in ms. | |
| 1539 * @param {...Object} var_args varArgs for the formatting function. | |
| 1540 */ | |
| 1541 ImageEditor.Prompt.prototype.show = function(text, opt_timeout, var_args) { | |
| 1542 var args = [text].concat(Array.prototype.slice.call(arguments, 2)); | |
| 1543 var message = this.displayStringFunction_.apply(null, args); | |
| 1544 this.showStringAt('center', message, opt_timeout); | |
| 1545 }; | |
| 1546 | |
| 1547 /** | |
| 1548 * Show the position at the specific position. | |
| 1549 * | |
| 1550 * @param {string} pos The 'pos' attribute value. | |
| 1551 * @param {string} text The prompt text. | |
| 1552 * @param {number} timeout Timeout in ms. | |
| 1553 * @param {...Object} var_args varArgs for the formatting function. | |
| 1554 */ | |
| 1555 ImageEditor.Prompt.prototype.showAt = function( | |
| 1556 pos, text, timeout, var_args) { | |
| 1557 var args = [text].concat(Array.prototype.slice.call(arguments, 3)); | |
| 1558 var message = this.displayStringFunction_.apply(null, args); | |
| 1559 this.showStringAt(pos, message, timeout); | |
| 1560 }; | |
| 1561 | |
| 1562 /** | |
| 1563 * Show the string in the prompt | |
| 1564 * | |
| 1565 * @param {string} pos The 'pos' attribute value. | |
| 1566 * @param {string} text The prompt text. | |
| 1567 * @param {number=} opt_timeout Timeout in ms. | |
| 1568 */ | |
| 1569 ImageEditor.Prompt.prototype.showStringAt = function(pos, text, opt_timeout) { | |
| 1570 this.reset(); | |
| 1571 if (!text) | |
| 1572 return; | |
| 1573 | |
| 1574 var document = this.container_.ownerDocument; | |
| 1575 this.wrapper_ = assertInstanceof(document.createElement('div'), | |
| 1576 HTMLDivElement); | |
| 1577 this.wrapper_.className = 'prompt-wrapper'; | |
| 1578 this.wrapper_.setAttribute('pos', pos); | |
| 1579 this.container_.appendChild(this.wrapper_); | |
| 1580 | |
| 1581 this.prompt_ = assertInstanceof(document.createElement('div'), | |
| 1582 HTMLDivElement); | |
| 1583 this.prompt_.className = 'prompt'; | |
| 1584 | |
| 1585 // Create an extra wrapper which opacity can be manipulated separately. | |
| 1586 var tool = document.createElement('div'); | |
| 1587 tool.className = 'dimmable'; | |
| 1588 this.wrapper_.appendChild(tool); | |
| 1589 tool.appendChild(this.prompt_); | |
| 1590 | |
| 1591 this.prompt_.textContent = text; | |
| 1592 | |
| 1593 var close = document.createElement('div'); | |
| 1594 close.className = 'close'; | |
| 1595 close.addEventListener('click', this.hide.bind(this)); | |
| 1596 this.prompt_.appendChild(close); | |
| 1597 | |
| 1598 setTimeout( | |
| 1599 this.prompt_.setAttribute.bind(this.prompt_, 'state', 'fadein'), 0); | |
| 1600 | |
| 1601 if (opt_timeout) | |
| 1602 this.setTimer(this.hide.bind(this), opt_timeout); | |
| 1603 }; | |
| 1604 | |
| 1605 /** | |
| 1606 * Hide the prompt. | |
| 1607 */ | |
| 1608 ImageEditor.Prompt.prototype.hide = function() { | |
| 1609 if (!this.prompt_) return; | |
| 1610 this.prompt_.setAttribute('state', 'fadeout'); | |
| 1611 // Allow some time for the animation to play out. | |
| 1612 this.setTimer(this.reset.bind(this), 500); | |
| 1613 }; | |
| OLD | NEW |