27

Éditer un clip programmé

Cet article explique comment à partir d'une animation programmée en JavaScript obtenir l'effet équivalent dans un clip et coder l'édition des paramètres du clip.

Voir le Manuel du programmeur.

 

Cliquez dans le texte pour démarrer l'animation.

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

Définit le contenu du texte affiché, le nombre de caractères affichés, la couleur, la police et la taille de la police du texte.

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

Ajoute la balise <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Slackey" /> à la section <head> du document HTML. head est une fonction d'iZend. Adaptez le code à votre environnement de développement.

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

Configure le style du texte.

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

Le texte sera affiché dans cette <div>. NOTE  : Le &nbsp; dans la <div> fait en sorte que la police soit chargée par le navigateur.

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

La fonction teletype programme l'affichage caractère par caractère à intervalles réguliers de la chaîne text dans le nœud widget avec un maximum de width caractères.

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

Assigne à teletypetest la <div> d'affichage du texte.

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

Appelle sur un clic dans la <div> du texte la fonction teletype avec en paramètres la <div> d'affichage du texte, le texte et le nombre maximum de caractères à afficher.

  1. teletypetest.click();

Démarre l'animation dès le chargement du document.

Clip

Cliquez dans le texte pour démarrer l'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; ?>

Mettre $debug à true permet d'accéder dans la console du navigateur à tous les composants de l'interface. Si $debug vaut false, tout le code en JavaScript est protégé par une fonction de fermeture.

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

Définit le contenu du texte, sa largeur et sa couleur, la police de caractères du texte et sa taille.

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

Ajoute la balise <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Slackey" /> à la section <head> du document HTML. RAPPEL : head est une fonction d'iZend. Adaptez le code à votre environnement de développement.

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

Définit l'identifiant de la <div> qui encadre le HTML de l'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. }

Configure le CSS du texte animé.

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

Crée la <div> qui affiche le texte animé.

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

Inclut le code de toutes les classes nécessaires.

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

Crée la classe TeleTypeClipController. Une instance de TeleTypeClipController est une instance de ClipController qui en plus de configurer un clip dès qu'un modèle a été modifié, affiche tout le texte dans le clip quand le clip a terminé son animation.

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

Isole tout le code en JavaScript dans une fonction de fermeture si $debug vaut 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);

Crée le clip, le modèle du clip et son interface. Active les contrôles au clavier et à la souris du clip. Crée un simple contrôleur qui configure le clip quand le modèle a été changé. Configure le modèle du clip.

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

Ferme la fonction qui isole le code en JavaScript si $debug vaut false.

Éditeur
   
   
 
 0    

Tapez un slogan, e.g. Objective.js • La programmation orientée objet des interfaces et des animations en JavaScript. Appuyez sur Entrée pour valider le texte. Modifiez la taille de la police. Cochez la case pour mettre le texte en gras. Changez la police du texte en entrant le nom d'une police de Google Fonts, e.g. Slackey ou Special Elite. Choisissez la couleur du texte, e.g. #2A7. Ajustez la largeur et la hauteur du clip. Changez la vitesse d'affichage de chaque caractère en ms. Décidez combien de caractères sont affichés. La barre à droite de l'affichage permet de voir si des caractères dépassent. Essayez d'animer le texte à partir de la gauche, de la droite ou au centre de l'affichage. La durée totale du clip est calculée à partir de la longueur du texte, le nombre de caractères affichés et de la vitesse d'affichage de chaque caractère.

Cliquez dans le texte pour démarrer l'animation. Cliquez de nouveau pour la mettre en pause, la relancer. NOTE : Quand l'animation est terminée, l'éditeur remplit l'affichage avec le texte.

Rechargez la page. Les modifications sont enregistrées.

Voir Architecture d'un éditeur.

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

Mettre $debug à true permet d'accéder dans la console du navigateur à tous les composants de l'interface. Si $debug vaut false, tout le code en JavaScript est protégé par une fonction de fermeture.

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

Mettre $editor à true affiche l'éditeur du clip. Mettre $player à true active les contrôles du clip. Essayez de mettre chaque option à false.

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

Définit le nom du modèle qui définit le nom du cookie qui enregistre les données du modèle.

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

Ajoute la balise <script src="/js/js.cookie.js"/> à la section <head> du document HTML. RAPPEL : head est une fonction d'iZend. Adaptez le code à votre environnement de développement.

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

Si l'éditeur est affiché, ajoute les balises <script src="/js/jquery.minicolors.js"/> et <link rel="stylesheet" href="/css/jquery.minicolors.css" media="screen"/> à la section <head> du document HTML pour charger le code et la feuille de style de MiniColors en jQuery.

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

Définit l'identifiant de la <div> qui encadre le HTML de l'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. }

Configure le CSS du texte animé.

  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>

Crée les widgets de l'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'); ?>

Inclut le code de toutes les classes nécessaires. Si l'éditeur n'est pas affiché, un simple contrôleur configure le clip quand le modèle a été changé.

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

Crée la classe TeleTypeClipController. Une instance de TeleTypeClipController est une instance de ClipController qui en plus de configurer un clip dès qu'un modèle a été modifié, affiche tout le texte dans le clip quand le clip a terminé son animation.

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

Isole tout le code en JavaScript dans une fonction de fermeture si $debug vaut 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());

Crée le clip et le modèle de données à éditer. Récupère la <div> qui encadre le HTML du programme. Configure l'interface du clip. Initialise le clip avec les données du modèle.

  1.     clip.enablePlayer();

Active les contrôles au clavier et à la souris du clip si $player vaut 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);

Si $editor vaut true, crée le panneau avec les boutons pour défaire et refaire une modification, crée les inspecteurs de tous les paramètres du clip, crée la vue qui affiche la durée du clip, crée l'éditeur.

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

Si l'éditeur n'est pas affiché, crée un contrôleur.

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

Associe le modèle à un délégué en charge de la sauvegarde de ses données dans un cookie. Configure le modèle avec les données déjà enregistrées ou l'initialise avec le contenu d'un texte par défaut. Active la sauvegarde des données du modèle dès modification.

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

Ferme la fonction qui isole le code en JavaScript si $debug vaut false.

Un clip peut toujours être converti en une vidéo :

teletype.webm
teletype.mp4

Cliquez dans la vidéo pour la démarrer. Cliquez de nouveau pour la mettre en pause.

VOIR AUSSI

Objective, Model, Clip, ProgramClip, Inspector, ModelCookieDelegate, Editor, Architecture d'un éditeur, Éditer un clip animé, Éditer un clip vidéo, Écrire des données sur un serveur

Commentaires

Votre commentaire :
[p] [b] [i] [u] [s] [quote] [pre] [br] [code] [url] [email] strip aide 2000

Entrez un maximum de 2000 caractères.
Améliorez la présentation de votre texte avec les balises de formatage suivantes :
[p]paragraphe[/p], [b]gras[/b], [i]italique[/i], [u]souligné[/u], [s]barré[/s], [quote]citation[/quote], [pre]tel quel[/pre], [br]à la ligne,
[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]commande[/code], [code=langage]code source en c, java, php, html, javascript, xml, css, sql, bash, dos, make, etc.[/code].