47

Editing an animated clip

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

See the Programmer's manual.

 
emblem.phtml
  1. <?php $text='Paris • London • '; ?>
  2. <?php $color='#ccbb66'?>
  3. <?php $font='Slackey'; ?>
  4. <?php $fontsize=36; ?>
  5. <?php $size=240; ?>

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

  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. #emblemtest {
  2.     position: relative;
  3.     overflow: hidden;
  4.     margin: 0;
  5.     width: <?php echo $size; ?>px;
  6.     height: <?php echo $size; ?>px;
  7.     font-family: "<?php echo $font; ?>", sans-serif;
  8.     font-size: <?php echo $fontsize; ?>px;
  9.     font-weight: bold;
  10.     text-align: center;
  11.     text-transform: uppercase;
  12.     color: <?php echo $color; ?>
  13. }
  14.  
  15. #emblemtest span {position:absolute;left:0;right:0;top:0;bottom:0;}

Configures the style of the text. Positions each individual character of the text.

  1. #emblemtest {
  2.     animation: spin 5s ease-in-out 1s 2 alternate;
  3. }
  4.  
  5. @keyframes spin {
  6. from { transform: rotate(0deg); }
  7.   to { transform: rotate(360deg); }
  8. }

Programs the animation of the text.

  1. <div id="emblemtest">&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 draw(widget, text) {
  2.     let angle = 360/text.length;
  3.  
  4.     for (let i = 0; i < text.length; i++) {
  5.         let span = document.createElement('span');
  6.         let letter = document.createTextNode(text[i]);
  7.  
  8.         span.appendChild(letter);
  9.  
  10.         let r = i * angle;
  11.  
  12.         span.style.transform = `rotate(${r}deg)`;
  13.  
  14.         widget.appendChild(span);
  15.     }
  16. }

draw displays text in a circle in widget. draw adds in widget a tag <span> for every character of text with a rotation for a total of 360°.

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

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

  1. draw(emblemtest, '<?php echo $text; ?>');

Draws the emblem.

Clip

Click in the text to start the animation.

Objective
  • Model
    • ClipModel
      • EmblemModel
EmblemModel.js
  1. function EmblemModel(clipname) {
  2.     ClipModel.call(this, clipname);
  3.  
  4.     this._value = {
  5.         size:       EmblemModel.defaultSize,
  6.         text:       EmblemModel.defaultText,
  7.         textFont:   EmblemModel.defaultTextFont,
  8.         textSize:   EmblemModel.defaultTextSize,
  9.         textBold:   EmblemModel.defaultTextBold,
  10.         textColor:  EmblemModel.defaultTextColor,
  11.         duration:   EmblemModel.defaultDuration,
  12.         easing:     EmblemModel.defaultEasing,
  13.         delay:      EmblemModel.defaultDelay
  14.     };
  15. }
  16.  
  17. EmblemModel.prototype = Object.create(ClipModel.prototype);
  18.  
  19. Object.defineProperty(EmblemModel.prototype, 'constructor', { value: EmblemModel, enumerable: false, writable: true });
  20.  
  21. EmblemModel.defaultSize = 160;
  22. EmblemModel.defaultText = '';   // 'London • Paris • ';
  23. EmblemModel.defaultTextFont = 'Open Sans';
  24. EmblemModel.defaultTextSize = 22;
  25. EmblemModel.defaultTextBold = true;
  26. EmblemModel.defaultTextColor = '#cccccc';
  27. EmblemModel.defaultEasing = 'ease-in-out';
  28. EmblemModel.defaultDuration = 5;
  29. EmblemModel.defaultDelay = 1;
  30.  
  31. EmblemModel.minSize = 120;
  32. EmblemModel.maxSize = 960;
  33. EmblemModel.minTextLength = 0;
  34. EmblemModel.maxTextLength = 40;
  35. EmblemModel.minTextSize = 10;
  36. EmblemModel.maxTextSize = 60;
  37. EmblemModel.minDuration = 1;
  38. EmblemModel.maxDuration = 9;
  39. EmblemModel.minDelay = 0;
  40. EmblemModel.maxDelay = 5;
  41.  
  42. EmblemModel.easingOptions = Validator.easingOptions;
  43.  
  44. EmblemModel.prototype.validateValue = function(prop, val) {
  45.     if (prop == 'size')
  46.         return Number.isInteger(val);
  47.  
  48.     if (prop == 'text')
  49.         return typeof val === 'string' && val.length >= EmblemModel.minTextLength;
  50.  
  51.     if (prop == 'textFont')
  52.         return typeof val === 'string';
  53.  
  54.     if (prop == 'textSize')
  55.         return Number.isInteger(val);
  56.  
  57.     if (prop == 'textColor')
  58.         return Validator.validateColor(val);
  59.  
  60.     if (prop == 'duration')
  61.         return Number.isInteger(val);
  62.  
  63.     if (prop == 'delay')
  64.         return Number.isInteger(val);
  65.  
  66.     if (prop == 'easing')
  67.         return Validator.validateEasing(val);
  68.  
  69.     return true;
  70. };
  71.  
  72. EmblemModel.prototype.normalizeValue = function(prop, val) {
  73.     if (prop == 'size') {
  74.         if (val < EmblemModel.minSize)
  75.             val = EmblemModel.minSize;
  76.         else if (val > EmblemModel.maxSize)
  77.             val = EmblemModel.maxSize;
  78.     }
  79.     else if (prop == 'text') {
  80.         if (val.length > EmblemModel.maxTextLength)
  81.             val = val.substring(0, EmblemModel.maxTextLength);
  82.     }
  83.     else if (prop == 'textSize') {
  84.         if (val < EmblemModel.minTextSize)
  85.             val = EmblemModel.minTextSize;
  86.         else if (val > EmblemModel.maxTextSize)
  87.             val = EmblemModel.maxTextSize;
  88.     }
  89.     else if (prop == 'textBold')
  90.         val = val ? true : false;
  91.     else if (prop == 'textColor')
  92.         val = Validator.normalizeColor(val);
  93.     else if (prop == 'duration') {
  94.         if (val < EmblemModel.minDuration)
  95.             val = EmblemModel.minDuration;
  96.         else if (val > EmblemModel.maxDuration)
  97.             val = EmblemModel.maxDuration;
  98.     }
  99.     else if (prop == 'delay') {
  100.         if (val < EmblemModel.minDelay)
  101.             val = EmblemModel.minDelay;
  102.         else if (val > EmblemModel.maxDelay)
  103.             val = EmblemModel.maxDelay;
  104.     }
  105.  
  106.     return val;
  107. };
Objective
  • Responder
    • View
      • Clip
        • AnimateClip
          • EmblemClip
EmblemClip.js
  1. function EmblemClip() {
  2.     AnimateClip.call(this);
  3.  
  4.     this._options = {duration: 0, delay: 0, easing: 'linear'};
  5. }
  6.  
  7. EmblemClip.prototype = Object.create(AnimateClip.prototype);
  8.  
  9. Object.defineProperty(EmblemClip.prototype, 'constructor', { value: EmblemClip, enumerable: false, writable: true });
  10.  
  11. EmblemClip.prototype._draw = function(text) {
  12.     while (this._widget.firstChild)
  13.         this._widget.removeChild(this._widget.firstChild);
  14.  
  15.     let angle = 360/text.length;
  16.  
  17.     for (let i = 0; i < text.length; i++) {
  18.         let span = document.createElement('span');
  19.         let letter = document.createTextNode(text[i]);
  20.  
  21.         span.appendChild(letter);
  22.  
  23.         let r = i * angle;
  24.  
  25.         span.style.transform = `rotate(${r}deg)`;
  26.  
  27.         this._widget.appendChild(span);
  28.     }
  29.  
  30.     return this;
  31. };
  32.  
  33. EmblemClip.prototype.set = function(options) {
  34.     const {size, text, textFont, textSize, textBold, textColor, duration, delay, easing} = options;
  35.  
  36.     this.setSize(size);
  37.     this.setText(text);
  38.     this.setTextFont(textFont);
  39.     this.setTextSize(textSize);
  40.     this.setTextBold(textBold);
  41.     this.setTextColor(textColor);
  42.  
  43.     this.setAnimation(duration, delay, easing);
  44.  
  45.     return this;
  46. };
  47.  
  48. EmblemClip.prototype.setValue = function(prop, val) {
  49.     if (prop == 'size')
  50.         this.setSize(val);
  51.     else if (prop == 'text')
  52.         this.setText(val);
  53.     else if (prop == 'textFont')
  54.         this.setTextFont(val);
  55.     else if (prop == 'textSize')
  56.         this.setTextSize(val);
  57.     else if (prop == 'textBold')
  58.         this.setTextBold(val);
  59.     else if (prop == 'textColor')
  60.         this.setTextColor(val);
  61.     else if (prop == 'duration')
  62.         this.setDuration(val);
  63.     else if (prop == 'delay')
  64.         this.setDelay(val);
  65.     else if (prop == 'easing')
  66.         this.setEasing(val);
  67.  
  68.     return this;
  69. };
  70.  
  71. EmblemClip.prototype.setSize = function(px) {
  72.     this.setStyle('width', `${px}px`);
  73.     this.setStyle('height', `${px}px`);
  74.  
  75.     this._width = this._height = px;
  76.  
  77.     return this;
  78. };
  79.  
  80. EmblemClip.prototype.setText = function(text) {
  81.     if (text)
  82.         this._draw(text);
  83.  
  84.     return this;
  85. };
  86.  
  87. EmblemClip.prototype.setTextFont = function(font) {
  88.     this.addFont(font).setStyle('fontFamily', `"${font}", sans-serif`);
  89.  
  90.     return this;
  91. };
  92.  
  93. EmblemClip.prototype.setTextSize = function(px) {
  94.     this.setStyle('fontSize', `${px}px`);
  95.  
  96.     return this;
  97. };
  98.  
  99. EmblemClip.prototype.setTextBold = function(bold) {
  100.     this.setStyle('fontWeight', bold ? 'bold' : 'normal');
  101.  
  102.     return this;
  103. };
  104.  
  105. EmblemClip.prototype.setTextColor = function(color) {
  106.     this.setStyle('color', color);
  107.  
  108.     return this;
  109. };
  110.  
  111. EmblemClip.prototype.setDuration = function(ms) {
  112.     this.setAnimation(ms, this._options.delay, this._options.easing);
  113.  
  114.     return this;
  115. };
  116.  
  117. EmblemClip.prototype.setDelay = function(s) {
  118.     this.setAnimation(this._options.duration, s, this._options.easing);
  119.  
  120.     return this;
  121. };
  122.  
  123. EmblemClip.prototype.setEasing = function(easing) {
  124.     this.setAnimation(this._options.duration, this._options.delay, easing);
  125.  
  126.     return this;
  127. };
  128.  
  129. EmblemClip.prototype.setAnimation = function(duration, delay, easing) {
  130.     const keyframes = [
  131.         { transform: 'rotate(0deg)' },
  132.         { transform: 'rotate(360deg)' }
  133.     ];
  134.  
  135.     const options = {
  136.         duration: duration*1000,
  137.         direction: 'alternate',
  138.         iterations: 2,
  139.         easing: easing,
  140.         delay: delay*1000,
  141.         endDelay: 0
  142.     };
  143.  
  144.     const animations = [
  145.         [this._widget, keyframes, options]
  146.     ];
  147.  
  148.     this.animate(animations, false);
  149.  
  150.     this._options.duration = duration;
  151.     this._options.delay = delay;
  152.     this._options.easing = easing;
  153.  
  154.     return this;
  155. };
testEmblemClip.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='Paris • London • '; ?>
  2. <?php $color='#ccbb66'?>
  3. <?php $size=240; ?>
  4. <?php $font='Slackey'; ?>
  5. <?php $fontsize=36; ?>

Defines the text displayed by the emblem, its color and its size, 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. .emblem {
  2.     position: relative;
  3.     overflow: hidden;
  4.     margin: 0;
  5.     text-align: center;
  6.     text-transform: uppercase;
  7.     user-select: none;
  8. }
  9. .emblem span {position:absolute;left:0;right:0;top:0;bottom:0;}

Configures the CSS of the emblem. Positions each character.

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

Creates the <div> which displays the emblem.

  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/AnimateClip.js'); ?>
  10. <?php head('javascript', '/objectivejs/tests/EmblemModel.js'); ?>
  11. <?php head('javascript', '/objectivejs/tests/EmblemClip.js'); ?>

Includes the code of all the necessary classes.

  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 EmblemClip();
  2.  
  3.     const model = new EmblemModel();
  4.  
  5.     const container = document.querySelector('#<?php echo $id; ?>');
  6.  
  7.     clip.setManagedWidget(container.querySelector('.emblem'));
  8.  
  9.     clip.enablePlayer();
  10.  
  11.     const controller = new ClipController(clip, model);
  12.  
  13.     const options = {
  14.         size: <?php echo $size; ?>,
  15.         text: '<?php echo $text; ?>',
  16.         textColor: '<?php echo $color; ?>',
  17.         textFont: '<?php echo $font; ?>',
  18.         textSize: <?php echo $fontsize; ?>
  19.     };
  20.  
  21.     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 (!$debug): ?>
  2. })();
  3. <?php endif; ?>

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

Editor
 
 
 
 0    

Type in a couple of words, e.g. Paris • London • . Press Enter to validate the text. NOTE: The text is always displayed in capital letters. 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 Righteous. Choose the color of the text, e.g. #CB6. Adjust the dimensions of the clip. Change the numbers of seconds of the duration of the animation and the start delay. Try different animation effects, e.g. linear ou ease-in-out. NOTE: The animation runs two times alternating the direction of the rotation. The total duration of the clip is equal to 2 times the duration of the animation + the start delay.

Click on the emblem to start the animation. Click again to pause it, to continue to play it.

Reload the page. The modifications are saved.

See Architecture of an editor.

testEmblemEditor.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='emblem'; ?>

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.

  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. .emblem {
  2.     position: relative;
  3.     overflow: hidden;
  4.     margin: 0;
  5.     text-align: center;
  6.     text-transform: uppercase;
  7.     user-select: none;
  8. }
  9. .emblem span {position:absolute;left:0;right:0;top:0;bottom:0;}

Configures the CSS of the emblem. Positions each character.

  1. #<?php echo $id; ?>_emblem_text {
  2.     width: 20em;
  3. }
  4. #<?php echo $id; ?>_emblem_textsize {
  5.     width: 3em;
  6. }

Configures the width of the input fields for the text of the emblem and its width.

  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><input class="ojs_size" type="number" step="10"/>&nbsp;<i class="fas fa-expand small"></i></span>
  10. </div>
  11. <span><input id="<?php echo $id; ?>_emblem_text" type="text" size="20" spellcheck="false"/></span>
  12. <div>
  13. <span><input id="<?php echo $id; ?>_emblem_textsize" type="number" step="1"/>&nbsp;<i class="fas fa-text-height small"></i></span>
  14. <span><input id="<?php echo $id; ?>_emblem_textbold" type="checkbox"/><label for="<?php echo $id; ?>_emblem_textbold"><i class="fas fa-bold small"></i></label></span>
  15. <span id="<?php echo $id; ?>_emblem_textcolor"></span>
  16. </div>
  17. <div>
  18. <span><input id="<?php echo $id; ?>_emblem_textfont" type="text" size="20" spellcheck="false"/>&nbsp;<i class="fas fa-font small"></i></span>
  19. </div>
  20. <fieldset class="ojs_animation">
  21. <legend><i class="fas fa-history"></i>&nbsp;<span class="ojs_timing">0</span></legend>
  22. <span><input class="ojs_duration" type="number" min="1" step="1"/>&nbsp;<i class="fas fa-clock small"></i></span>
  23. <span><input class="ojs_delay" type="number" min="0" max="5" step="1"/>&nbsp;<i class="fas fa-play-circle small"></i></span>
  24. <select class="ojs_easing" size="1">
  25. <option value="linear">linear</option>
  26. <option value="ease">ease</option>
  27. <option value="ease-in">ease-in</option>
  28. <option value="ease-out">ease-out</option>
  29. <option value="ease-in-out">ease-in-out</option>
  30. </select>
  31. </fieldset>
  32. </div>
  33. <?php endif; ?>
  34. <div class="emblem"></div>
  35. </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/NumberInspector.js'); ?>
  13. <?php head('javascript', '/objectivejs/StringInspector.js'); ?>
  14. <?php head('javascript', '/objectivejs/SelectInspector.js'); ?>
  15. <?php head('javascript', '/objectivejs/ColorInspector.js'); ?>
  16. <?php head('javascript', '/objectivejs/Undo.js'); ?>
  17. <?php head('javascript', '/objectivejs/Panel.js'); ?>
  18. <?php head('javascript', '/objectivejs/UndoPanel.js'); ?>
  19. <?php else: ?>
  20. <?php head('javascript', '/objectivejs/ClipController.js'); ?>
  21. <?php endif; ?>
  22. <?php head('javascript', '/objectivejs/ClipModel.js'); ?>
  23. <?php head('javascript', '/objectivejs/AnimateClip.js'); ?>
  24. <?php head('javascript', '/objectivejs/ModelCookieDelegate.js'); ?>
  25. <?php head('javascript', '/objectivejs/tests/EmblemModel.js'); ?>
  26. <?php head('javascript', '/objectivejs/tests/EmblemClip.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. REMINDER: The function head of the iZend library adds a tag such as <script src="/objectivejs/Objective.js"></script> to the <head> section of the document in HTML. Adapt the code to your development environment.

  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 EmblemClip();
  2.  
  3.     const model = new EmblemModel('<?php echo $clipname; ?>');
  4.  
  5.     const container = document.querySelector('#<?php echo $id; ?>');
  6.  
  7.     clip.setManagedWidget(container.querySelector('.emblem'));
  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 sizeInspector = new NumberInspector(model.getValue('size'), {min: EmblemModel.minSize, max: EmblemModel.maxSize});
  6.  
  7.     sizeInspector.setManagedWidget(container.querySelector('.ojs_size')).resetWidget();
  8.  
  9.     const textInspector = new StringInspector(model.getValue('text'), {min: EmblemModel.minTextLength, max: EmblemModel.maxTextLength, trim: false, required: false});
  10.  
  11.     textInspector.setManagedWidget(container.querySelector('#<?php echo $id; ?>_emblem_text')).resetWidget();
  12.  
  13.     const textSizeInspector = new NumberInspector(model.getValue('textSize'), {min: EmblemModel.minTextSize, max: EmblemModel.maxTextSize});
  14.  
  15.     textSizeInspector.setManagedWidget(container.querySelector('#<?php echo $id; ?>_emblem_textsize')).resetWidget();
  16.  
  17.     const textBoldInspector = new BooleanInspector(model.getValue('textBold'));
  18.  
  19.     textBoldInspector.setManagedWidget(container.querySelector('#<?php echo $id; ?>_emblem_textbold')).resetWidget();
  20.  
  21.     const textColorInspector = new ColorInspector(model.getValue('textColor'));
  22.  
  23.     textColorInspector.createManagedWidget(container.querySelector('#<?php echo $id; ?>_emblem_textcolor'));
  24.  
  25.     const textFontInspector = new StringInspector(model.getValue('textFont'));
  26.  
  27.     textFontInspector.setManagedWidget(container.querySelector('#<?php echo $id; ?>_emblem_textfont')).resetWidget();
  28.  
  29.     const durationInspector = new NumberInspector(model.getValue('duration'), {min: EmblemModel.minDuration, max: EmblemModel.maxDuration});
  30.  
  31.     durationInspector.setManagedWidget(container.querySelector('.ojs_duration')).resetWidget();
  32.  
  33.     const delayInspector = new NumberInspector(model.getValue('delay'), {min: EmblemModel.minDelay, max: EmblemModel.maxDelay});
  34.  
  35.     delayInspector.setManagedWidget(container.querySelector('.ojs_delay')).resetWidget();
  36.  
  37.     const easingInspector = new SelectInspector(model.getValue('easing'), {tags: EmblemModel.easingOptions});
  38.  
  39.     easingInspector.setManagedWidget(container.querySelector('.ojs_easing')).resetWidget();
  40.  
  41.     const timing = new View();
  42.  
  43.     timing.setManagedWidget(container.querySelector('.ojs_timing'));
  44.  
  45.     const inspectors = {
  46.         size:       sizeInspector,
  47.         text:       textInspector,
  48.         textFont:   textFontInspector,
  49.         textSize:   textSizeInspector,
  50.         textBold:   textBoldInspector,
  51.         textColor:  textColorInspector,
  52.         duration:   durationInspector,
  53.         delay:      delayInspector,
  54.         easing:     easingInspector
  55.     };
  56.  
  57.     const editor = new ClipEditor(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);

If the editor isn't displayed, creates a simple controller.

  1.     model.setDelegate(new ModelCookieDelegate());
  2.  
  3.     if (model.isSaved())
  4.         model.readIn();
  5.     else {
  6.         model.setValue('text', 'Paris • London • ');
  7.         model.setValue('textFont', 'Slackey');
  8.         model.setValue('textColor', '#CB6');
  9.         model.setValue('textSize', 36);
  10.         model.setValue('size', 240);
  11.     }
  12.  
  13.     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 default values. 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.

emblem.webm
emblem.mp4

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

SEE ALSO

Objective, Model, Clip, AnimateClip, Inspector, ModelCookieDelegate, Editor, Architecture of an editor, Editing a programmed 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].