codecombat · smallst · Apr 30, 2025 · Apr 1, 2025 · Apr 2, 2025 · Apr 30, 2025
diff --git a/app/styles/play/common/change_language_tab.sass b/app/styles/play/common/change_language_tab.sass
@@ -0,0 +1,28 @@
+@import 'choices.js/src/styles/choices'
+.my-fancy-select
+  position: relative
+
+  .trigger
+    font-weight: bold
+
+  .choices__list--single .choices__item
+    overflow: visible
+    white-space: nowrap
+
+  .options
+    max-width: 600px
+    width: auto
+    white-space: nowrap
+    overflow: visible
+
+    .choices__list
+      overflow: visible
+
+      .item
+        white-space: nowrap
+        font-size: 13px
+        font-weight: bold
+        color: #2B8686
+
+        &.hover
+          background-color: #abc !important
diff --git a/app/styles/play/modal/play-heroes-modal.sass b/app/styles/play/modal/play-heroes-modal.sass
@@ -1,6 +1,5 @@
 @import "app/styles/mixins"
 @import "app/styles/bootstrap/variables"
-@import "vendor/styles/fancy_select.css"
 
 $heroCanvasHeight: 275px
 
@@ -528,19 +527,19 @@ $heroCanvasHeight: 275px
     select
       font-size: 18px
 
-    &[dir="rtl"] .fancy-select
+    &[dir="rtl"] .my-fancy-select
       .trigger
         padding-right: 30px
 
       .options
         padding-right: 0
 
-        li
+        .item
           background-position-x: right
           padding-left: 0
           padding-right: 40px
 
-    .fancy-select
+    .my-fancy-select
       display: inline-block
       width: 100%
 
@@ -554,6 +553,7 @@ $heroCanvasHeight: 275px
       .trigger
         text-transform: uppercase
         border: 3px solid black
+        border-radius: 4px
         font-size: 16px
         padding: 5px 10px
         width: 100%
@@ -576,7 +576,7 @@ $heroCanvasHeight: 275px
           color: black
           background-color: #abc
 
-    .code-language-form .options li
+    .code-language-form .options .item
       padding-left: 40px
       background: transparent url(/images/common/code_languages/javascript_small.png) no-repeat left center
       background-size: 32px 32px

diff --git a/app/templates/play/common/change-language-tab.pug b/app/templates/play/common/change-language-tab.pug
@@ -1,8 +1,9 @@
 mixin language-select(options, selected)
-  select&attributes(attributes)
-    for option in options
-      option(value=option.id, selected=selected === option.id, disabled=option.disabled)= option.name
-
+  .my-fancy-select
+    select&attributes(attributes)
+      for option in options
+        option.options(value=option.id, selected=selected === option.id, disabled=option.disabled)=option.name
+
 .form
   .form-group.select-group.code-format-form.half-width
     span.help-block(data-i18n="choose_hero.code_format")

diff --git a/app/vendor.js b/app/vendor.js
@@ -22,7 +22,6 @@ window.key = require('../vendor/scripts/keymaster.js');
 require('vendor/scripts/jquery.noty.packaged.min.js');
 require('nanoscroller');// TODO webpack: Try to extract this
 require('vendor/scripts/hsl-to-rgb.js');
-require('imports-loader?this=>window!../vendor/scripts/fancy_select.js');// TODO webpack: Try to extract this
 window.Spade = require('exports-loader?Spade!../vendor/scripts/spade.js');// TODO webpack: Try to extract this
 require('vendor/scripts/fuzzaldrin')// TODO webpack: Try to extract this
 require('bower_components/waypoints/lib/jquery.waypoints.min.js')

diff --git a/app/views/play/common/ChangeLanguageTab.js b/app/views/play/common/ChangeLanguageTab.js
@@ -10,9 +10,11 @@
  */
 const CocoView = require('views/core/CocoView')
 const template = require('app/templates/play/common/change-language-tab')
+require('app/styles/play/common/change_language_tab.sass')
 const { me } = require('core/auth')
 const utils = require('core/utils')
 const { CODE_FORMAT_ALL, CODE_FORMAT_BLOCKS, CODE_FORMAT_IPAD, CODE_FORMAT_TEXT, JUNIOR_LANGUAGES } = require('core/constants')
+const Choices = require('choices.js')
 
 let ChangeLanguageTab
 module.exports = (ChangeLanguageTab = (function () {
@@ -36,6 +38,8 @@ module.exports = (ChangeLanguageTab = (function () {
       this.utils = utils
       this.codeLanguageObject = utils.getCodeLanguages()
       this.codeFormatObject = utils.getCodeFormats()
+      this.languageChoices = null
+      this.codeformatChoices = null
       const defaultCodeFormat = 'text-code'
       this.codeFormat = this.options.codeFormat || me.get('aceConfig')?.codeFormat || defaultCodeFormat
       if (this.isJunior && options.level?.get('slug') === 'the-gem') {
@@ -125,6 +129,7 @@ module.exports = (ChangeLanguageTab = (function () {
       if (this.codeFormatObject[this.codeFormat].disabled) {
         this.codeFormat = _.find(this.codeFormatObject, { disabled: false })?.id
       }
+      // this.codeformatChoices?.destroy()
       this.renderSelectors('.code-format-form')
       this.buildCodeFormats()
     }
@@ -180,50 +185,63 @@ module.exports = (ChangeLanguageTab = (function () {
       this.buildCodeLanguages()
    }
 
+    newFancySelect (element) {
+      const options = {
+        searchEnabled: false,
+        itemSelectText: '',
+        classNames: {
+          containerInner: ['choices__inner', 'trigger'],
+          listDropdown: ['options'],
+          itemChoice: ['item'],
+          selectedState: ['selected'],
+          highlightedState: ['hover'],
+        },
+      }
+      return new Choices(element, options)
+    }
+
     buildCodeFormats () {
       const $select = this.$el.find('#option-code-format')
-      if (!utils.isMobile()) {
-        $select.fancySelect()
+      if (!utils.isMobile() && $select.length) {
+        if (this.codeformatChoices) {
+          this.codeformatChoices.destroy()
+        }
+        this.codeformatChoices = this.newFancySelect($select[0])
       }
-      $select.parent().find('.options li').each(function () {
+      $select.parent().parent().find('.options .item').each(function () {
         const formatName = $(this).text()
         const formatID = $(this).data('value')
         const blurb = $.i18n.t(`choose_hero.${formatID}_blurb`.replace(/-/g, '_'))
         if (formatName.indexOf(blurb) === -1) { // Avoid doubling blurb if this is called 2x
           return $(this).text(`${formatName} - ${blurb}`)
         }
       })
-      if ($select.parent().find('.options li').length === 1) {
-        $select.trigger('disable.fs')
-      } else {
-        $select.trigger('enable.fs')
-      }
     }
 
     buildCodeLanguages () {
       const $select = this.$el.find('#option-code-language')
-      if (!utils.isMobile()) {
-        $select.fancySelect()
+      if (!utils.isMobile() && $select.length) {
+        if (this.languageChoices) {
+          this.languageChoices.destroy()
+        }
+        this.languageChoices = this.newFancySelect($select[0])
       }
-      $select.parent().find('.options li').each(function () {
+      $select.parent().parent().find('.options .item').each(function () {
         const languageName = $(this).text()
         const languageID = $(this).data('value')
         const blurb = $.i18n.t(`choose_hero.${languageID}_blurb`)
         if (languageName.indexOf(blurb) === -1) { // Avoid doubling blurb if this is called 2x
           return $(this).text(`${languageName} - ${blurb}`)
         }
       })
-      if ($select.parent().find('.options li').length === 1) {
-        $select.trigger('disable.fs')
-      } else {
-        $select.trigger('enable.fs')
-      }
     }
 
     onCodeLanguageChanged (e) {
       this.codeLanguage = this.$el.find('#option-code-language').val()
       this.codeLanguageChanged = true
+
       this.updateCodeFormatList()
+      this.buildCodeLanguages()
       window.tracker?.trackEvent('Campaign changed code language', { category: 'Campaign Hero Select', codeLanguage: this.codeLanguage, levelSlug: this.options.level?.get('slug') })
       if (this.codeFormat === 'blocks-and-code' && ['python', 'javascript'].indexOf(this.codeLanguage) === -1) {
         // Blockly can't support languages like C++/Java. (Some day we'll have Lua.)
@@ -236,6 +254,7 @@ module.exports = (ChangeLanguageTab = (function () {
       this.codeFormat = this.$el.find('#option-code-format').val()
       this.codeFormatChanged = true
       this.updateCodeLanguageList()
+      this.buildCodeFormats()
       window.tracker?.trackEvent('Campaign changed code format', { category: 'Campaign Hero Select', codeFormat: this.codeFormat, levelSlug: this.options.level?.get('slug') })
       if (this.codeFormat === 'blocks-and-code' && ['python', 'javascript'].indexOf(this.codeLanguage) === -1) {
         // Blockly can't support languages like C++/Java. (Some day we'll have Lua.)

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -108,6 +108,7 @@
     "bootstrap-sass": "3.3.7",
     "buffer": "^6.0.3",
     "cheerio": "^0.22.0",
+    "choices.js": "^11.1.0",
     "co": "^4.6.0",
     "co-express": "^1.2.1",
     "coffee-loader": "^0.7.2",