1

Editing a programmed clip

This article explains how to obtain from an animation programmed in JavaScript the equivalent effect in a clip and how editing the clip parameters is coded.

See the Programmer's manual.

 

Click in the text to start the animation.

  1. <?php $text='Objective.js'; ?>
  2. <?php $textwidth=12; ?>
  3. <?php $color='#22aa77'?>
  4. <?php $font='Slackey'; ?>
  5. <?php $fontsize=40; ?>

Defines the content of the text which is displayed, the number of characters displayed, the color, the font and the size of the font of the text.

  1. <?php head('font', $font); ?>

Adds the tag <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Slackey" /> to the <head> section of the HTML document. head is a function of iZend. Adapt the code to your development environment.

  1. #teletypetest {
  2.     color: <?php echo $color; ?>;
  3.     font-family: "<?php echo $font; ?>", sans-serif;
  4.     font-size: <?php echo $fontsize; ?>px;
  5.     font-weight: bold;
  6.     white-space: pre;
  7.     cursor: pointer;
  8. }

Configures the style of the text.

  1. <div id="teletypetest">&nbsp;</div>

The text will be displayed in this <div>. NOTE: The &nbsp; in the <div> makes sure the font is loaded by the navigator.

  1. function teletype(widget, text, width) {
  2.     let pos = 0, len = text.length;
  3.  
  4.     if (teletypetest.timer)
  5.         clearInterval(teletypetest.timer);
  6.  
  7.     teletypetest.timer = setInterval(() => {
  8.         widget.innerText = text.substring(pos < width ? 0 : pos-width+1, pos+1);
  9.  
  10.         if (++pos >= len+width) {
  11.             clearInterval(teletypetest.timer);
  12.             teletypetest.timer = null;
  13.  
  14.             widget.innerText = text.substring(0, width);
  15.         }
  16.     }, 200);
  17. }

The function teletype programs the display character by character at regular intervals of the string text in the node widget with a maximum of width characters .

  1. const teletypetest = document.getElementById('teletypetest');

Assigns to teletypetest the display <div>of the text.

  1. teletypetest.onclick = () => teletype(teletypetest, '<?php echo $text; ?>', <?php echo $textwidth; ?>);

Calls after a click in the <div> of the text the function teletype with in parameters the display <div> of the text, the text and the maximum number of characters to display.

  1. teletypetest.click();

Starts the animation as soon as the document is loaded.

Click in the text to start the animation.

Objective
  • Model
    • ClipModel
      • TeletypeModel
  1. function TeletypeModel(clipname) {
  2.     ClipModel.call(this, clipname);
  3.  
  4.     this._value = {
  5.         width:          TeletypeModel.defaultWidth,
  6.         height:         TeletypeModel.defaultHeight,
  7.         text:           TeletypeModel.defaultText,
  8.         textFont:       TeletypeModel.defaultTextFont,
  9.         textSize:       TeletypeModel.defaultTextSize,
  10.         textBold:       TeletypeModel.defaultTextBold,
  11.         textColor:      TeletypeModel.defaultTextColor,
  12.         textAlignment:  TeletypeModel.defaultTextAlignment,
  13.         textWidth:      TeletypeModel.defaultTextWidth,
  14.         interval:       TeletypeModel.defaultInterval
  15.     };
  16. }
  17.  
  18. TeletypeModel.prototype = Object.create(ClipModel.prototype);
  19.  
  20. Object.defineProperty(TeletypeModel.prototype, 'constructor', { value: TeletypeModel, enumerable: false, writable: true });
  21.  
  22. TeletypeModel.defaultWidth = 320;
  23. TeletypeModel.defaultHeight = 40;
  24. TeletypeModel.defaultText = ''; // 'Objective.js';
  25. TeletypeModel.defaultTextFont = 'Open Sans';
  26. TeletypeModel.defaultTextSize = 22;
  27. TeletypeModel.defaultTextBold = true;
  28. TeletypeModel.defaultTextColor = '#cccccc';
  29. TeletypeModel.defaultTextAlignment = 'left';
  30. TeletypeModel.defaultTextWidth = 20;
  31. TeletypeModel.defaultInterval = 200;
  32.  
  33. TeletypeModel.minWidth = 120;
  34. TeletypeModel.maxWidth = 960;
  35. TeletypeModel.minHeight = 10;
  36. TeletypeModel.maxHeight = 540;
  37. TeletypeModel.minTextLength = 0;
  38. TeletypeModel.maxTextLength = 200;
  39. TeletypeModel.minTextSize = 10;
  40. TeletypeModel.maxTextSize = 60;
  41. TeletypeModel.minTextWidth = 10;
  42. TeletypeModel.maxTextWidth = 100;
  43. TeletypeModel.minInterval = 100;
  44. TeletypeModel.maxInterval = 500;
  45.  
  46. TeletypeModel.textAlignmentOptions = Validator.textAlignmentOptions;
  47.  
  48. TeletypeModel.prototype.validateValue = function(prop, val) {
  49.     if (prop == 'width')
  50.         return Number.isInteger(val);
  51.  
  52.     if (prop == 'height')
  53.         return Number.isInteger(val);
  54.  
  55.     if (prop == 'text')
  56.         return typeof val === 'string' && val.length >= TeletypeModel.minTextLength;
  57.  
  58.     if (prop == 'textFont')
  59.         return typeof val === 'string';
  60.  
  61.     if (prop == 'textSize')
  62.         return Number.isInteger(val);
  63.  
  64.     if (prop == 'textColor')
  65.         return Validator.validateColor(val);
  66.  
  67.     if (prop == 'textAlignment')
  68.         return Validator.validateTextAlignment(val);
  69.  
  70.     if (prop == 'textWidth')
  71.         return Number.isInteger(val);
  72.  
  73.     if (prop == 'interval')
  74.         return Number.isInteger(val);
  75.  
  76.     return true;
  77. }
  78.  
  79. TeletypeModel.prototype.normalizeValue = function(prop, val) {
  80.     if (prop == 'width') {
  81.         if (val < TeletypeModel.minWidth)
  82.             val = TeletypeModel.minWidth;
  83.         else if (val > TeletypeModel.maxWidth)
  84.             val = TeletypeModel.maxWidth;
  85.     }
  86.     else if (prop == 'height') {
  87.         if (val < TeletypeModel.minHeight)
  88.             val = TeletypeModel.minHeight;
  89.         else if (val > TeletypeModel.maxHeight)
  90.             val = TeletypeModel.maxHeight;
  91.     }
  92.     else if (prop == 'text') {
  93.         if (val.length > TeletypeModel.maxTextLength)
  94.             val = val.substring(0, TeletypeModel.maxTextLength);
  95.     }
  96.     else if (prop == 'textSize') {
  97.         if (val < TeletypeModel.minTextSize)
  98.             val = TeletypeModel.minTextSize;
  99.         else if (val > TeletypeModel.maxTextSize)
  100.             val = TeletypeModel.maxTextSize;
  101.     }
  102.     else if (prop == 'textBold')
  103.         val = val ? true : false;
  104.     else if (prop == 'textColor')
  105.         val = Validator.normalizeColor(val);
  106.     else if (prop == 'textWidth') {
  107.         if (val < TeletypeModel.minTextWidth)
  108.             val = TeletypeModel.minTextWidth;
  109.         else if (val > TeletypeModel.maxTextWidth)
  110.             val = TeletypeModel.maxTextWidth;
  111.     }
  112.     else if (prop == 'interval') {
  113.         if (val < TeletypeModel.minInterval)
  114.             val = TeletypeModel.minInterval;
  115.         else if (val > TeletypeModel.maxInterval)
  116.             val = TeletypeModel.maxInterval;
  117.     }
  118.  
  119.     return val;
  120. }
Objective
  • Responder
    • View
      • Clip
        • ProgramClip
          • TeletypeClip
  1. function TeletypeClip() {
  2.     ProgramClip.call(this);
  3.  
  4.     this._text = '';
  5.     this._textWidth = 20;
  6.  
  7.     this._textWidget = null;
  8. }
  9.  
  10. TeletypeClip.prototype = Object.create(ProgramClip.prototype);
  11.  
  12. Object.defineProperty(TeletypeClip.prototype, 'constructor', { value: TeletypeClip, enumerable: false, writable: true });
  13.  
  14. Object.defineProperty(TeletypeClip.prototype, 'duration', {
  15.     get:    function() {
  16.                 return this._text ? (this._text.length + Math.min(this._text.length, this._textWidth) - 1) * this._interval : 0;
  17.             }
  18. });
  19.  
  20. TeletypeClip.prototype.drawWidget = function() {
  21.     if (this._text) {
  22.         let width = Math.min(this._text.length, this._textWidth);
  23.         let pos = Math.floor(this._currentTime / this._interval);
  24.  
  25.         this._textWidget.innerText = this._text.substring(pos < width ? 0 : pos - width + 1, pos + 1);
  26.     }
  27.  
  28.     return this;
  29. }
  30.  
  31. TeletypeClip.prototype.setWidget = function(w) {
  32.     const span = document.createElement('span');
  33.  
  34.     w.appendChild(span);
  35.  
  36.     ProgramClip.prototype.setWidget.call(this, w);
  37.  
  38.     this._textWidget = span;
  39.  
  40.     return this;
  41. }
  42.  
  43. TeletypeClip.prototype.set = function(options) {
  44.     const {width, height, text, textFont, textSize, textBold, textColor, textAlignment, textWidth, interval} = options;
  45.  
  46.     this.setWidth(width);
  47.     this.setHeight(height);
  48.     this.setText(text);
  49.     this.setTextFont(textFont);
  50.     this.setTextSize(textSize);
  51.     this.setTextBold(textBold);
  52.     this.setTextColor(textColor);
  53.     this.setTextAlignment(textAlignment);
  54.  
  55.     this.setTextWidth(textWidth);
  56.  
  57.     this.setInterval(interval);
  58.  
  59.     return this;
  60. }
  61.  
  62. TeletypeClip.prototype.setValue = function(prop, val) {
  63.     if (prop == 'width')
  64.         this.setWidth(val);
  65.     else if (prop == 'height')
  66.         this.setHeight(val);
  67.     else if (prop == 'text')
  68.         this.setText(val);
  69.     else if (prop == 'textFont')
  70.         this.setTextFont(val);
  71.     else if (prop == 'textSize')
  72.         this.setTextSize(val);
  73.     else if (prop == 'textBold')
  74.         this.setTextBold(val);
  75.     else if (prop == 'textColor')
  76.         this.setTextColor(val);
  77.     else if (prop == 'textAlignment')
  78.         this.setTextAlignment(val);
  79.     else if (prop == 'textWidth')
  80.         this.setTextWidth(val);
  81.     else if (prop == 'interval')
  82.         this.setInterval(val);
  83.  
  84.     return this;
  85. }
  86.  
  87. TeletypeClip.prototype.setWidth = function(px) {
  88.     this.setStyle('width', `${px}px`);
  89.  
  90.     this._width = px;
  91.  
  92.     return this;
  93. }
  94.  
  95. TeletypeClip.prototype.setHeight = function(px) {
  96.     this.setStyle('height', `${px}px`);
  97.  
  98.     this._height = px;
  99.  
  100.     return this;
  101. }
  102.  
  103. TeletypeClip.prototype.setText = function(text) {
  104.     this._text = text;
  105.  
  106.     if (!this._timer)
  107.         this.showText();
  108.  
  109.     return this;
  110. }
  111.  
  112. TeletypeClip.prototype.setTextFont = function(font) {
  113.     this.addFont(font).setStyle('fontFamily', `"${font}", sans-serif`);
  114.  
  115.     return this;
  116. }
  117.  
  118. TeletypeClip.prototype.setTextSize = function(px) {
  119.     this.setStyle('fontSize', `${px}px`);
  120.  
  121.     return this;
  122. }
  123.  
  124. TeletypeClip.prototype.setTextBold = function(bold) {
  125.     this.setStyle('fontWeight', bold ? 'bold' : 'normal');
  126.  
  127.     return this;
  128. }
  129.  
  130. TeletypeClip.prototype.setTextColor = function(color) {
  131.     this.setStyle('color', color);
  132.  
  133.     return this;
  134. }
  135.  
  136. TeletypeClip.prototype.setTextAlignment = function(alignment) {
  137.     this._textWidget.style.textAlign = alignment;
  138.  
  139.     return this;
  140. }
  141.  
  142. TeletypeClip.prototype.setTextWidth = function(w) {
  143.     this._textWidth = w;
  144.  
  145.     if (!this._timer)
  146.         this.showText();
  147.  
  148.     return this;
  149. }
  150.  
  151. TeletypeClip.prototype.showText = function() {
  152.     this._textWidget.innerText = this._text ? this._text.substring(0, this._textWidth) : '';
  153.  
  154.     return this;
  155. }
  1. <?php $debug=false; ?>
  1. <?php $text='Objective.js'; ?>
  2. <?php $textwidth=12; ?>
  3. <?php $color='#22aa77'?>
  4. <?php $font='Slackey'; ?>
  5. <?php $fontsize=40; ?>
  1. <?php head('font', $font); ?>
  1. <?php $id=uniqid('id'); ?>
  1. .teletype {
  2.     display: flex;
  3.     align-items: center;
  4.     user-select: none;
  5. }
  6. .teletype span {
  7.     flex: 1 1 auto;
  8.     white-space: pre;
  9. }
  1. <div id="<?php echo $id; ?>" class="clip">
  2. <div class="teletype"></div>
  3. </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/Clip.js'); ?>
  5. <?php head('javascript', '/objectivejs/Model.js'); ?>
  6. <?php head('javascript', '/objectivejs/Validator.js'); ?>
  7. <?php head('javascript', '/objectivejs/ClipModel.js'); ?>
  8. <?php head('javascript', '/objectivejs/ClipController.js'); ?>
  9. <?php head('javascript', '/objectivejs/ProgramClip.js'); ?>
  10. <?php head('javascript', '/objectivejs/tests/TeletypeModel.js'); ?>
  11. <?php head('javascript', '/objectivejs/tests/TeletypeClip.js'); ?>
  1. function TeleTypeClipController() {
  2.     ClipController.apply(this, arguments);
  3. }
  4.  
  5. TeleTypeClipController.prototype = Object.create(ClipController.prototype);
  6.  
  7. Object.defineProperty(TeleTypeClipController.prototype, 'constructor', { value: TeleTypeClipController, enumerable: false, writable: true });
  8.  
  9. TeleTypeClipController.prototype.clipEnded = function(sender) {
  10.     sender.showText();
  11. }
  1. <?php if (!$debug): ?>
  2. (function() {
  3. <?php endif; ?>

Isolates all the code in JavaScript in a closure function if $debug is false.

  1.     const clip = new TeletypeClip();
  2.  
  3.     const model = new TeletypeModel();
  4.  
  5.     const container = document.querySelector('#<?php echo $id; ?>');
  6.  
  7.     clip.setManagedWidget(container.querySelector('.teletype')).reset();
  8.  
  9.     clip.enablePlayer();
  10.  
  11.     const controller = new TeleTypeClipController(clip, model);
  12.  
  13.     const options = {
  14.         width: 320,
  15.         height: 60,
  16.         text: '<?php echo $text; ?>',
  17.         textWidth: <?php echo $textwidth; ?>,
  18.         textColor: '<?php echo $color; ?>',
  19.         textFont: '<?php echo $font; ?>',
  20.         textSize: <?php echo $fontsize; ?>
  21.     };
  22.  
  23.     model.set(options);
  1. <?php if (empty($debug)): ?>
  2. })();
  3. <?php endif; ?>

Closes the function which isolates the code in JavaScript if $debug is false.

   
   
 
 0    

Type in a slogan, e.g. Objective.js • Programming object oriented interfaces and animations in JavaScript. Press Enter to validate the text. Modify the size of the font. Check the box to show the text in bold. Change the font of the text by entering the name of a font from Google Fonts, e.g. Slackey or Special Elite. Choose the color of the text, e.g. #2A7. Adjust the width and the height of the clip. Change how fast each character is displayed in ms. Decide how many characters are displayed. The bar to the right of the display lets you see if some characters overflow. Try to animate the text from the left, from the right or at the center of the display. The total duration of the clip is computed from the length of the text, the number of characters displayed and the speed at which each character is displayed.

Click on the text to start the animation. Click again to pause it, to continue to play it. NOTE: When the animation is completed, the editor fills the display with the text.

Reload the page. The modifications are saved.

See Architecture of an editor.

  1. <?php $debug=false; ?>
  1. <?php $editor=true; ?>
  2. <?php $player=true; ?>
  1. <?php $clipname='teletype'; ?>
  1. <?php head('javascript', 'jquery.cookie'); ?>
  1. <?php if ($editor): ?>
  2. <?php head('javascript', 'jquery.minicolors'); ?>
  3. <?php head('stylesheet', 'jquery.minicolors', 'screen'); ?>
  4. <?php endif; ?>
  1. <?php $id=uniqid('id'); ?>
.teletype {
    display: flex;
    align-items: center;
    user-select: none;
}
.teletype span {
    flex: 1 1 auto;
    white-space: pre;
}
  1. #<?php echo $id; ?> .teletype {
  2.     border-right: 4px dotted #ccc;
  3. }
  4. #<?php echo $id; ?>_teletype_text {
  5.     width: 30em;
  6. }
  7. #<?php echo $id; ?>_teletype_textsize {
  8.     width: 3em;
  9. }
  10. #<?php echo $id; ?>_teletype_textbold {
  11.     line-height: 14px;
  12. }
  13. #<?php echo $id; ?>_teletype_textwidth {
  14.     width: 3em;
  15. }
  1. <div id="<?php echo $id; ?>" class="clip">
  2. <?php if ($editor): ?>
  3. <div class="ojs">
  4. <div>
  5. <div class="ojs_undo">
  6. <button type="submit" class="narrow control_undo" disabled><i class="fa fa-undo"></i></button>
  7. <button type="submit" class="narrow control_redo" disabled><i class="fa fa-redo"></i></button>
  8. </div>
  9. <span>
  10. <input class="ojs_width" type="number" min="120" max="960" step="10"/>&nbsp;<i class="fa fa-arrows-alt-h small"></i>
  11. <input class="ojs_height" type="number" min="10" max="540" step="10"/>&nbsp;<i class="fa fa-arrows-alt-v small"></i>
  12. </span>
  13. </div>
  14. <input id="<?php echo $id; ?>_teletype_text" type="text" size="40" spellcheck="false"/>
  15. <div>
  16. <span><input id="<?php echo $id; ?>_teletype_textsize" type="number" min="10" max="60" step="1"/>&nbsp;<i class="fa fa-text-height small"></i></span>
  17. <span><input id="<?php echo $id; ?>_teletype_textbold" type="checkbox" />&nbsp;<i class="fa fa-bold small"></i></span>
  18. <span id="<?php echo $id; ?>_teletype_textcolor"></span>
  19. <span id="<?php echo $id; ?>_teletype_textalignment">
  20. <input type="radio" id="<?php echo $id; ?>_teletype_textalignment_left" name="teletype_textalignment" value="left" checked><label for="<?php echo $id; ?>_teletype_textalignment_left"><i class="fa fa-align-left small"></i></label>
  21. <input type="radio" id="<?php echo $id; ?>_teletype_textalignment_center" name="teletype_textalignment" value="center"><label for="<?php echo $id; ?>_teletype_textalignment_center"><i class="fa fa-align-center small"></i></label>
  22. <input type="radio" id="<?php echo $id; ?>_teletype_textalignment_right" name="teletype_textalignment" value="right"><label for="<?php echo $id; ?>_teletype_textalignment_right"><i class="fa fa-align-right small"></i></label>
  23. </span>
  24. </div>
  25. <div>
  26. <span>
  27. <input id="<?php echo $id; ?>_teletype_textfont" type="text" size="20" spellcheck="false"/>&nbsp;<i class="fa fa-font small"></i>
  28. </span>
  29. </div>
  30. <fieldset class="ojs_animation">
  31. <legend><i class="fa fa-history"></i>&nbsp;<span class="ojs_timing">0</span></legend>
  32. <input class="ojs_interval" type="number" min="100" max="500" step="50"/>&nbsp;<i class="fa fa-tachometer-alt small"></i>
  33. <input id="<?php echo $id; ?>_teletype_textwidth" type="number" min="10" max="100" step="1"/>&nbsp;<i class="fa fa-text-width small"></i>
  34. </fieldset>
  35. </div>
  36. <?php endif; ?>
  37. <div class="teletype"></div>
  38. </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/Clip.js'); ?>
  5. <?php head('javascript', '/objectivejs/Model.js'); ?>
  6. <?php head('javascript', '/objectivejs/Validator.js'); ?>
  7. <?php if ($editor): ?>
  8. <?php head('javascript', '/objectivejs/Editor.js'); ?>
  9. <?php head('javascript', '/objectivejs/ClipEditor.js'); ?>
  10. <?php head('javascript', '/objectivejs/Inspector.js'); ?>
  11. <?php head('javascript', '/objectivejs/BooleanInspector.js'); ?>
  12. <?php head('javascript', '/objectivejs/ColorInspector.js'); ?>
  13. <?php head('javascript', '/objectivejs/NumberInspector.js'); ?>
  14. <?php head('javascript', '/objectivejs/StringInspector.js'); ?>
  15. <?php head('javascript', '/objectivejs/SelectInspector.js'); ?>
  16. <?php head('javascript', '/objectivejs/OptionInspector.js'); ?>
  17. <?php head('javascript', '/objectivejs/Undo.js'); ?>
  18. <?php head('javascript', '/objectivejs/Panel.js'); ?>
  19. <?php head('javascript', '/objectivejs/UndoPanel.js'); ?>
  20. <?php else: ?>
  21. <?php head('javascript', '/objectivejs/ClipController.js'); ?>
  22. <?php endif; ?>
  23. <?php head('javascript', '/objectivejs/ClipModel.js'); ?>
  24. <?php head('javascript', '/objectivejs/ProgramClip.js'); ?>
  25. <?php head('javascript', '/objectivejs/ModelCookieDelegate.js'); ?>
  26. <?php head('javascript', '/objectivejs/tests/TeletypeModel.js'); ?>
  27. <?php head('javascript', '/objectivejs/tests/TeletypeClip.js'); ?>
  1. function TeleTypeClipEditor() {
  2.     ClipEditor.apply(this, arguments);
  3. }
  4.  
  5. TeleTypeClipEditor.prototype = Object.create(ClipEditor.prototype);
  6.  
  7. Object.defineProperty(TeleTypeClipEditor.prototype, 'constructor', { value: TeleTypeClipEditor, enumerable: false, writable: true });
  8.  
  9. TeleTypeClipEditor.prototype.clipEnded = function(sender) {
  10.     sender.showText();
  11. }
  1. <?php if (!$debug): ?>
  2. (function() {
  3. <?php endif; ?>

Isolates all the code in JavaScript in a closure function if $debug is false.

  1.     const clip = new TeletypeClip();
  2.  
  3.     const model = new TeletypeModel('<?php echo $clipname; ?>');
  4.  
  5.     const container = document.querySelector('#<?php echo $id; ?>');
  6.  
  7.     clip.setManagedWidget(container.querySelector('.teletype'));
  8.  
  9.     clip.set(model.get());
  1.     clip.enablePlayer();
  1.     const panel = new UndoPanel();
  2.  
  3.     panel.setManagedWidget(container.querySelector('.ojs_undo')).resetWidget();
  4.  
  5.     const widthInspector = new NumberInspector(model.getValue('width'), {min: TeletypeModel.minWidth, max: TeletypeModel.maxWidth});
  6.  
  7.     widthInspector.setManagedWidget(container.querySelector('.ojs_width')).resetWidget();
  8.  
  9.     const heightInspector = new NumberInspector(model.getValue('height'), {min: TeletypeModel.minHeight, max: TeletypeModel.maxHeight});
  10.  
  11.     heightInspector.setManagedWidget(container.querySelector('.ojs_height')).resetWidget();
  12.  
  13.     const textInspector = new StringInspector(model.getValue('text'), {min: TeletypeModel.minTextLength, max: TeletypeModel.maxTextLength, trim: false, required: false});
  14.  
  15.     textInspector.setManagedWidget(container.querySelector('#<?php echo $id; ?>_teletype_text')).resetWidget();
  16.  
  17.     const textSizeInspector = new NumberInspector(model.getValue('textSize'), {min: TeletypeModel.minTextSize, max: TeletypeModel.maxTextSize});
  18.  
  19.     textSizeInspector.setManagedWidget(container.querySelector('#<?php echo $id; ?>_teletype_textsize')).resetWidget();
  20.  
  21.     const textBoldInspector = new BooleanInspector(model.getValue('textBold'));
  22.  
  23.     textBoldInspector.setManagedWidget(container.querySelector('#<?php echo $id; ?>_teletype_textbold')).resetWidget();
  24.  
  25.     const textColorInspector = new ColorInspector(model.getValue('textColor'));
  26.  
  27.     textColorInspector.createManagedWidget(container.querySelector('#<?php echo $id; ?>_teletype_textcolor'));
  28.  
  29.     const textFontInspector = new StringInspector(model.getValue('textFont'));
  30.  
  31.     textFontInspector.setManagedWidget(container.querySelector('#<?php echo $id; ?>_teletype_textfont')).resetWidget();
  32.  
  33.     const textAlignmentInspector = new OptionInspector(model.getValue('textAlignment'), {tags: TeletypeModel.textAlignmentOptions});
  34.  
  35.     textAlignmentInspector.setManagedWidget(container.querySelector('#<?php echo $id; ?>_teletype_textalignment')).resetWidget();
  36.  
  37.     const textWidthInspector = new NumberInspector(model.getValue('textWidth'));
  38.  
  39.     textWidthInspector.setManagedWidget(container.querySelector('#<?php echo $id; ?>_teletype_textwidth')).resetWidget();
  40.  
  41.     const intervalInspector = new NumberInspector(model.getValue('interval'), {min: TeletypeModel.minInterval, max: TeletypeModel.maxInterval});
  42.  
  43.     intervalInspector.setManagedWidget(container.querySelector('.ojs_interval')).resetWidget();
  44.  
  45.     const timing = new View();
  46.  
  47.     timing.setManagedWidget(container.querySelector('.ojs_timing'));
  48.  
  49.     const inspectors = {
  50.         width:          widthInspector,
  51.         height:         heightInspector,
  52.         text:           textInspector,
  53.         textFont:       textFontInspector,
  54.         textSize:       textSizeInspector,
  55.         textBold:       textBoldInspector,
  56.         textColor:      textColorInspector,
  57.         textAlignment:  textAlignmentInspector,
  58.         textWidth:      textWidthInspector,
  59.         interval:       intervalInspector
  60.     };
  61.  
  62.     const editor = new TeleTypeClipEditor(model, clip, inspectors, panel, timing);
  1.     const controller = new ClipController(clip, model);
  1.     model.setDelegate(new ModelCookieDelegate());
  2.  
  3.     if (model.isSaved())
  4.         model.readIn();
  5.     else
  6.         model.setValue('text', 'Objective.js');
  7.  
  8.     model.enableSync();
  1. <?php if (!$debug): ?>
  2. })();
  3. <?php endif; ?>

Closes the function which isolates the code in JavaScript if $debug is false.

SEE ALSO

Objective, Model, Clip, ProgramClip, Inspector, ModelCookieDelegate, Editor, Architecture of an editor, Editing an animated clip, Editing a video clip, Write data on a server

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].