Convert tabs to dropdown for Asset Index and Trading Times

Author: mohammad-deriv

src/javascript/binary/common_functions/frontend.js

@@ -558,6 +558,17 @@ function detect_hedging($purpose, $hedging) {
     });
 }
 
+function jqueryuiTabsToDropdown($container) {
+    var $ddl = $('<select/>');
+    $container.find('li a').each(function() {
+        $ddl.append($('<option/>', {text: $(this).text(), value: $(this).attr('href')}));
+    });
+    $ddl.change(function() {
+        $container.find('li a[href="' + $(this).val() + '"]').click();
+    });
+    return $ddl;
+}
+
 $(function() {
     $( "#accordion" ).accordion({
       heightStyle: "content",

src/javascript/binary/websocket_pages/resources/asset_index/asset_indexws.ui.js

@@ -6,9 +6,10 @@ var AssetIndexUI = (function() {
         $contents;
     var activeSymbols,
         assetIndex,
-        marketColumns;
+        marketColumns,
+        isFramed;
 
-    var init = function() {
+    var init = function(config) {
         if (japanese_client()) {
             if (!TradePage.is_trading_page()) {
                 window.location.href = page.url.url_for('resources');
@@ -21,6 +22,8 @@ var AssetIndexUI = (function() {
 
         Content.populate();
         showLoadingImage($container);
+
+        isFramed = (config && config.framed);
         if (!assetIndex) AssetIndexData.sendRequest(!activeSymbols);
     };
 
@@ -50,6 +53,11 @@ var AssetIndexUI = (function() {
             .append($contents.children());
 
         $container.tabs('destroy').tabs();
+
+        if (isFramed) {
+            $container.find('ul').hide();
+            $('<div/>', {class: 'center-text'}).append(jqueryuiTabsToDropdown($container)).prependTo($container);
+        }
     };
 
     var getSubmarketTable = function(assetItem, symbolInfo) {

src/javascript/binary/websocket_pages/resources/market_times/market_timesws.ui.js

@@ -5,9 +5,10 @@ var MarketTimesUI = (function() {
         $container;
     var columns,
         activeSymbols,
-        tradingTimes;
+        tradingTimes,
+        isFramed;
 
-    var init = function() {
+    var init = function(config) {
         $date      = $('#trading-date');
         $container = $('#trading-times');
         columns    = ['Asset', 'Opens', 'Closes', 'Settles', 'UpcomingEvents'];
@@ -16,6 +17,8 @@ var MarketTimesUI = (function() {
 
         Content.populate();
         showLoadingImage($container);
+
+        isFramed = (config && config.framed);
         if (!tradingTimes) MarketTimesData.sendRequest('today', !activeSymbols);
 
         $date.val(moment.utc(new Date()).format('YYYY-MM-DD'));
@@ -61,6 +64,11 @@ var MarketTimesUI = (function() {
             .append($contents.children());
 
         $container.tabs('destroy').tabs();
+
+        if (isFramed) {
+            $container.find('ul').hide();
+            $('<div/>', {class: 'center-text'}).append(jqueryuiTabsToDropdown($container)).prependTo($container);
+        }
     };
 
     var createMarketTables = function(market, isJapanTrading) {

src/javascript/binary/websocket_pages/trade/analysis.js

@@ -80,10 +80,12 @@ var TradingAnalysis = (function() {
                 BinarySocket.send({'ticks_history': underlying, 'end': 'latest', 'count': tick + '', 'req_id': 1});
                 break;
             case 'tab_asset_index':
-                AssetIndexUI.init();
+                AssetIndexUI.init({framed: true});
+                $('#tab_asset_index-content h1').hide();
                 break;
             case 'tab_trading_times':
-                MarketTimesUI.init();
+                MarketTimesUI.init({framed: true});
+                $('#tab_trading_times-content h1').hide();
                 break;
             default:
                 var url = currentLink.getAttribute('href') ;

src/sass/static/trade.scss

@@ -185,14 +185,18 @@
             }
             #spot_container {
                 #spot {
-                    line-height: 28px;
+                    line-height: 20px;
+                    display: inline-block;
                     white-space: nowrap;
                     padding: 3px;
                     border-radius: $BORDER_RADIUS;
                     &.error {
                         font-style: italic;
                     }
                 }
+                #trading_worm_chart {
+                    display: inline-block;
+                }
             }
         }
     }