https://bitsbox.com/js/versionchooserwidget.js

1//  Copyright: Copyright 2020 Codepops Inc.
2//  License: All Rights Reserved.
3
4/**
5 * @fileoverview  Provide the VersionChooserWidget class.
6 * @author: Scott Lininger ([email protected])
7 */
8
9/**
10 * Namespace where we'll hang everything off of.
11 * @namespace
12 * @expose
13 * @export
14 */
15var codepops = codepops || {};
16
17/**
18 * Provides a UI inside the coding tablet for selecting older version of a
19 * a given app project. Used in partner sites with a single "Code this app"
20 * button that could lead to multiple projects.
21 * @param {codpops.EditorPage} page The page object.
22 * @param {Object=} opt_settings Optional hash of settings.
23 * @constructor
24 * @export
25 * @expose
26 */
27codepops.VersionChooserWidget = function(page, opt_settings) {
28  var settings = opt_settings || {};
29
30  /**
31   * Contains a reference to the window. Useful for dependency injection.
32   * @type {window}
33   * @private
34   */
35  this.window_ = settings['window'] || window;
36
37  /**
38   * Contains a reference to the document. Useful for dependency injection.
39   * @type {document}
40   * @private
41   */
42  this.document_ = settings['document'] || window.document;
43
44  /**
45   * Contains a reference to the parent Page.
46   * @type {codepops.EditorPage}
47   * @private
48   */
49  this.page_ = page;
50
51  /**
52   * The div we'll render the control into.
53   * @type {Element}
54   * @private
55   */
56  this.panel_ = this.document_.createElement('div');
57  this.panel_.id = 'version-chooser-widget';
58  this.panel_.classList.add('new-app-subpanel');
59  this.panel_.classList.add('hidden');
60  this.page_.tabletScreenDiv.appendChild(this.panel_);
61
62  /**
63   * Add the UI elements.
64   */  
65  this.headerPanel_ = this.document_.createElement('div');
66  this.headerPanel_.id = 'version-chooser-header';
67  this.headerPanel_.innerHTML = $t('<h3>You\'ve coded this app before!</h3>' +
68      '<p>Do you want to keep working on a previous version or start a new ' +
69      'one from scratch?');
70  
71  this.listPanel_ = this.document_.createElement('div');
72  this.listPanel_.id = 'version-chooser-list';
73  var info = this.document_.createElement('h4');
74  info.innerText = $t('Choose a previous version');
75  this.listPanel_.appendChild(info);
76  this.listPages_ = this.document_.createElement('div');
77  this.listPages_.className = 'list-pages';
78  this.listPanel_.appendChild(info);
79  this.listPanel_.appendChild(this.listPages_);
80  
81  this.footerPanel_ = this.document_.createElement('div');
82  this.footerPanel_.id = 'version-chooser-footer';
83  
84  this.panel_.appendChild(this.headerPanel_);
85  this.panel_.appendChild(this.listPanel_);
86  this.panel_.appendChild(this.footerPanel_);
87
88  var or = this.document_.createElement('div');
89  or.className = 'new-app-subpanel-or';
90  or.innerText = $t('OR');
91
92  this.newAppButton_ = this.document_.createElement('button');
93  this.newAppButton_.innerHTML = $t('Start from scratch &raquo;');
94  this.newAppButton_.classList.add('button-flat');
95  this.footerPanel_.appendChild(or);
96  this.footerPanel_.appendChild(this.newAppButton_);
97
98};
99
100
101/**
102 * Called by the IFrameBridgeWidget whenever we want to show a list of apps to
103 * choose from.
104 * @param {Object} apps The list of existing apps for the user to choose from.
105 * @param {string} activityNumber The 4-digit app number if the user selects
106 *    to start from scratch.
107 * @param {string} appTitleSuffix A suffix to append to the end of the app title
108 *    is the user chooses to start from scratch.
109 */
110codepops.VersionChooserWidget.prototype.show = function(apps, activityNumber,
111    appTitleSuffix) {
112  this.page_.home();
113  this.panel_.classList.remove('hidden');
114  this.panel_.classList.add('visible');
115  
116  this.newAppButton_.onclick = function() {
117    this.page_.newAppFromActivityNumber('' + activityNumber, appTitleSuffix);
118  }.bind(this);
119
120  var appCount = Object.keys(apps).length;
121  if (appCount <= 4) {
122    this.listPages_.classList.add('single-row');
123  } else {
124    this.listPages_.classList.remove('single-row');
125  }
126  var renderSettings = {};
127  renderSettings['apps'] = apps;
128  renderSettings['inVersionChooser'] = true;
129  renderSettings['targetDiv'] = this.listPages_;
130  
131  // Render the list of apps to choose from.
132  this.page_.renderAppsList_(renderSettings);
133};
134
135
136/**
137 * Called by the EditorPage whenever we're done collect user subscription
138 * account information.
139 */
140codepops.VersionChooserWidget.prototype.hide = function() {
141  this.panel_.classList.remove('visible');
142  this.panel_.classList.add('hidden');
143};