10

StringInspector

RangeInspector  |  SelectInspector

Objective
  • Responder
    • View
      • Inspector
        • StringInspector
Objective.js

Type in Hello! and press Enter. The length of the text is limited to 12 characters. Try entering <b>Bold</b>. HTML tags are escaped.

StringInspector.js
  1. function StringInspector(value = '', options = false) {
  2.     options = options || {};
  3.  
  4.     let min = options.min;
  5.     let max = options.max;
  6.  
  7.     let trim = options.trim === undefined || options.trim ? true : false;
  8.  
  9.     let escapeHTML = options.escapeHTML === undefined || options.escapeHTML ? true : false;
  10.  
  11.     let required = options.required ? true : false;
  12.  
  13.     if (typeof value !== 'string')
  14.         throw new TypeError();
  15.  
  16.     if (! (typeof min === 'undefined' || typeof min === 'number'))
  17.         throw new TypeError();
  18.  
  19.     if (! (typeof max === 'undefined' || typeof max === 'number'))
  20.         throw new TypeError();
  21.  
  22.     if (typeof min === 'number' && typeof max === 'number' && min > max)
  23.         throw new RangeError();
  24.  
  25.     if (typeof min === 'number' && value < min)
  26.         throw new RangeError();
  27.  
  28.     if (typeof max === 'number' && value > max)
  29.         throw new RangeError();
  30.  
  31.     if (trim)
  32.         value = value.trim();
  33.  
  34.     if (escapeHTML)
  35.         value = StringInspector._escapeHTML(value);
  36.  
  37.     if (this._min !== undefined && value.length < this._min)
  38.         throw new RangeError();
  39.  
  40.     if (this._max !== undefined && value.length > this._max)
  41.         throw new RangeError();
  42.  
  43.     Inspector.call(this);
  44.  
  45.     this._min = min;
  46.     this._max = max;
  47.  
  48.     this._trim = trim;
  49.  
  50.     this._escapeHTML = escapeHTML;
  51.  
  52.     this._required = required;
  53.  
  54.     this._value = value;
  55. }
  56.  
  57. StringInspector.prototype = Object.create(Inspector.prototype);
  58.  
  59. Object.defineProperty(StringInspector.prototype, 'constructor', { value: StringInspector, enumerable: false, writable: true });
  60.  
  61. StringInspector.prototype.validate = function(val) {
  62.     if (typeof val !== "string")
  63.         return false;
  64.  
  65.     if (this._trim)
  66.         val = val.trim();
  67.  
  68.     if (this._min !== undefined && val.length < this._min)
  69.         return false;
  70.  
  71.     if (this._max !== undefined && val.length > this._max)
  72.         return false;
  73.  
  74.     return true;
  75. };
  76.  
  77. StringInspector.prototype.normalize = function(val) {
  78.     if (this._trim)
  79.         val = val.trim();
  80.  
  81.     if (this._escapeHTML)
  82.         val = StringInspector._escapeHTML(val);
  83.  
  84.     return val;
  85. };
  86.  
  87. StringInspector.prototype.setWidget = function(w) {
  88.     Inspector.prototype.setWidget.call(this, w);
  89.  
  90.     if (this._min !== undefined)
  91.         this._widget.minLength = this._min;
  92.  
  93.     if (this._max !== undefined)
  94.         this._widget.maxLength = this._max;
  95.  
  96.     this._widget.required = this._required === true;
  97.  
  98.     return this;
  99. };
  100.  
  101. StringInspector._escapeHTML = function(s) {
  102.     const map = {
  103.         '&': '&amp;',
  104.         '<': '&lt;',
  105.         '>': '&gt;'
  106.     };
  107.  
  108.     return s.replace(/[&<>]/g, function(c) { return map[c]; });
  109. };
Test
testStringInspector.phtml
  1. <?php $text='Objective.js'; ?>
  2. <?php $font='Roboto'; ?>
  3. <?php $fontSize=32; ?>
  4. <?php $color='#333'; ?>
  5. <?php $bg='#fd1'; ?>
  6. <?php $minlen=2; ?>
  7. <?php $maxlen=12; ?>
  1. <?php head('font', $font); ?>
  1. <?php $id=uniqid('id'); ?>
  1. .test_display {
  2.     width: 240px;
  3.     height: 135px;
  4.     display: flex;
  5.     align-items: center;
  6.     justify-content: center;
  7.     background: <?php echo $bg; ?>;
  8.     color: <?php echo $color; ?>;
  9.     font-family: "<?php echo $font; ?>", sans-serif;
  10.     font-size: <?php echo $fontSize; ?>px;
  11.     margin-bottom: 10px;
  12.     border-radius: 3px;
  13. }
  1. <div id="<?php echo $id; ?>" class="noprint">
  2. <div class="test_display"><?php echo $text; ?></div>
  3. <div class="ojs">
  4. <div>
  5. <input id="text_input" type="text" size="10" maxlength="<?php echo $maxlen; ?>" spellcheck="false"/>
  6. </div>
  7. </div>
  8. </div>
  1. <?php head('javascript', '/objectivejs/Objective.js'); ?>
  2. <?php head('javascript', '/objectivejs/Responder.js'); ?>
  3. <?php head('javascript', '/objectivejs/View.js'); ?>
  4. <?php head('javascript', '/objectivejs/Inspector.js'); ?>
  5. <?php head('javascript', '/objectivejs/StringInspector.js'); ?>
  1. function Tester(display, inspector) {
  2.     Responder.call(this);
  3.  
  4.     this._display = display;
  5.  
  6.     inspector.addNextResponder(this);
  7.  
  8.     this._inspector = inspector;
  9. }
  10.  
  11. Tester.prototype = Object.create(Responder.prototype);
  12.  
  13. Object.defineProperty(Tester.prototype, 'constructor', { value: Tester, enumerable: false, writable: true });
  14.  
  15. Tester.prototype.inspectorValueChanged = function(sender) {
  16.     if (sender === this._inspector)
  17.         this._display.innerHTML = `<span>${sender.get()}</span>`;
  18.  
  19.     return true;
  20. }
  1. const inspector = new StringInspector('<?php echo $text; ?>', { min: <?php echo $minlen; ?>, max: <?php echo $maxlen; ?>, trim: true, required: true, escapeHTML: true });
  2.  
  3. const container = document.querySelector('#<?php echo $id; ?>');
  4.  
  5. const display = container.querySelector('.test_display');
  6.  
  7. inspector.setManagedWidget(container.querySelector('#text_input')).resetWidget();
  8.  
  9. const tester = new Tester(display, inspector);
SEE ALSO

Inspector, BooleanInspector, NumberInspector, SelectInspector, OptionInspector, SelectionInspector, ImageInspector, ColorInspector

Comments

Your comment:
[p] [b] [i] [u] [s] [quote] [pre] [br] [code] [url] [email] strip help 2000

Enter a maximum of 2000 characters.
Improve the presentation of your text with the following formatting tags:
[p]paragraph[/p], [b]bold[/b], [i]italics[/i], [u]underline[/u], [s]strike[/s], [quote]citation[/quote], [pre]as is[/pre], [br]line break,
[url]http://www.izend.org[/url], [url=http://www.izend.org]site[/url], [email]izend@izend.org[/email], [email=izend@izend.org]izend[/email],
[code]command[/code], [code=language]source code in c, java, php, html, javascript, xml, css, sql, bash, dos, make, etc.[/code].