21

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.

teletype.phtml
  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.

Clip

Click in the text to start the animation.

Objective
  • Model
    • ClipModel
      • TeletypeModel
TeletypeModel.js
  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
TeletypeClip.js
  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. };
testTeletypeClip.phtml
  1. <?php $debug=false; ?>

Setting $debug to true gives access in the console of the navigator to all the components of the interface. If $debug is false, all the code in JavaScript is protected by a closure function.

  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, its width and its color, the character font of the text and its size.

  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. REMINDER: head is a function of iZend. Adapt the code to your development environment.

  1. <?php $id=uniqid('id'); ?>

Defines the identifier of the <div> which surrounds the HTML of the interface.

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

Configures the CSS of the animated text.

  1. <div id="<?php echo $id; ?>" class="clip">
  2. <div class="teletype"></div>
  3. </div>

Creates the <div> which displays the animated text.

  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'); ?>

Includes the code of all the necessary classes.

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

Creates the class TeleTypeClipController. An instance of TeleTypeClipController is an instance of ClipController which in addition to configuring a clip as soon as a model has been changed, displays the entire text in the clip when the clip has finished its animation.

  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);

Creates the clip, the model of the clip and its interface. Enables the keyboard and the mouse controls of the clip. Creates a simple controller which configures the clip when the model has been set. Configures the model of the clip.

  1. <?php if (empty($debug)): ?>
  2. })();
  3. <?php endif; ?>

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

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

testTeletypeEditor.phtml
  1. <?php $debug=false; ?>

Setting $debug to true gives access in the console of the navigator to all the components of the interface. If $debug is false, all the code in JavaScript is protected by a closure function.

  1. <?php $editor=true; ?>
  2. <?php $player=true; ?>

Setting $editor to true displays the editor of the clip. Setting $player to true activates the controls of the clip. Try setting each option to false.

  1. <?php $clipname='teletype'; ?>

Defines the name of the model which defines the name of the cookie which records the data of the model.

  1. <?php head('javascript', 'js.cookie.js'); ?>

Adds the tag <script src="/js/js.cookie.js"></script> to the <head> section of the document in HTML. REMINDER: The function head is provided by iZend. Adapt the code to your development environment.

  1. <?php if ($editor): ?>
  2. <?php head('javascript', 'jquery.minicolors'); ?>
  3. <?php head('stylesheet', 'jquery.minicolors', 'screen'); ?>
  4. <?php endif; ?>

If the editor is displayed, adds the tags <script src="/js/jquery.minicolors.js"/> and <link rel="stylesheet" href="/css/jquery.minicolors.css" media="screen"/> to the <head> section of the HTML document to load the code and the style sheet of MiniColors in jQuery.

  1. <?php $id=uniqid('id'); ?>

Defines the identifier of the <div> which surrounds the HTML of the interface.

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

Configures the CSS of the animated text.

  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="ojs_button narrow control_undo" disabled><i class="fas fa-undo"></i></button>
  7. <button type="submit" class="ojs_button narrow control_redo" disabled><i class="fas fa-redo"></i></button>
  8. </div>
  9. <span>
  10. <input class="ojs_width" type="number" min="120" max="960" step="10"/>&nbsp;<i class="fas fa-arrows-alt-h small"></i>
  11. <input class="ojs_height" type="number" min="10" max="540" step="10"/>&nbsp;<i class="fas 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="fas fa-text-height small"></i></span>
  17. <span><input id="<?php echo $id; ?>_teletype_textbold" type="checkbox" />&nbsp;<i class="fas 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="fas 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="fas 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="fas 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="fas fa-font small"></i>
  28. </span>
  29. </div>
  30. <fieldset class="ojs_animation">
  31. <legend><i class="fas 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="fas fa-tachometer-alt small"></i>
  33. <input id="<?php echo $id; ?>_teletype_textwidth" type="number" min="10" max="100" step="1"/>&nbsp;<i class="fas fa-text-width small"></i>
  34. </fieldset>
  35. </div>
  36. <?php endif; ?>
  37. <div class="teletype"></div>
  38. </div>

Creates the widgets of the interface.

  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'); ?>

Includes the code of all the necessary classes. If the editor isn't displayed, a simple controller configures the clip when the model has been set.

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

Creates the class TeleTypeClipController. An instance of TeleTypeClipController is an instance of ClipController which in addition to configuring a clip as soon as a model has been changed, displays the entire text in the clip when the clip has finished its animation.

  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());

Creates the clip and the data model to be edited. Retrieves the <div> which surrounds the HTML of the program. Configures the interface of the clip. Initializes the clip with the data of the model.

  1.     clip.enablePlayer();

Enables the keyboard and the mouse controls of the clip if $player is true.

  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);

If $editor is true, creates the panel with the buttons to undo and redo a modification, creates the inspectors for all the parameters of the clip, creates the view which displays the duration of the clip, creates the editor.

  1.     const controller = new ClipController(clip, model);

Enables the keyboard and the mouse controls of the clip if $player is true.

  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();

Associates the model to a delegate in charge of saving its data in a cookie. Configures the model with the data already saved or initializes it with the content of a text by default. Enables saving the data of the model whenever it is changed.

  1. <?php if (!$debug): ?>
  2. })();
  3. <?php endif; ?>

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

A clip can always be converted into a video.

teletype.webm
teletype.mp4

Click in the video to start it. Click again to pause it.

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