added style and removed width

common/lib/xmodule/xmodule/gst_module.py

@@ -69,9 +69,19 @@ class GraphicalSliderToolModule(XModule):
         Simple variant: slider and plot controls are not inside any tag.
         """
         #substitute plot
-        plot_div = '<div class="' + self.html_class + '_plot" id="' + self.html_id + '_plot"></div>'
-        html_string = re.sub(r'\$[^\$]*plot[^\$]*\$',
-                plot_div, html_string, flags=re.IGNORECASE | re.UNICODE)
+        plot_div = '<div class="{element_class}__plot" id="{element_id}_plot \
+                    style="{style}"></div>'
+        # extract css style from plot
+        plot_def = re.findall(r'\$\s+plot[^\$]*\$', html_string)
+        style = re.search(r'(?=.*width\=[\"\'](.*)[\"\'])', plot_def)
+        if style:
+            style = style.groups()[0]
+        else:  # no style parameter
+            style = ''
+        replacement = plot_div.format(element_class=self.html_class,
+                                            style=style)
+        html_string = re.sub(r'\$\s+plot[^\$]*\$', replacement, html_string,
+                        flags=re.IGNORECASE | re.UNICODE)
 
         # get variables
         if json.loads(self.configuration_json)['root'].get('parameters'):
@@ -85,62 +95,70 @@ class GraphicalSliderToolModule(XModule):
         #substitute sliders
         slider_div = '<div class="{element_class}_slider" \
                                    id="{element_id}_slider_{var}" \
-                                   data-var="{var}" data-el_width="{width}">\
+                                   data-var="{var}" data-el_style="{style}">\
                      </div>'
         for var in variables:
             # find $slider var='var' ... $
-            instances = re.findall(r'\$slider\s+(?=.*var\=[\"\']' + var + '[\"\'])' \
+            instances = re.findall(r'\$\s+slider\s+(?=.*var\=[\"\']' + var + '[\"\'])' \
                           + r'[^\$]*\$', html_string)
-            if instances:  # if presented
+            if instances:  # if presented, only one slider per var
                 slider_def = instances[0]  # get $slider var='var' ... $ string
-                # get width
-                width = re.search(r'(?=.*width\=[\"\'](\d+)[\"\'])', slider_def)
-                if width:
-                    width = width.groups()[0]
-                else:  # no width parameter
-                    width = ''
-                # substitue parameters to slider div
+                # extract var for proper style extraction further
+                var_substring = re.search(r'(var\=[\"\']' + var + r'[\"\'])',
+                                          slider_def)
+                slider_def = slider_def.replace(var_substring, '')
+                # get style
+                style = re.search(r'(?=.*style\=[\"\'](.*)[\"\'])', slider_def)
+                if style:
+                    style = style.groups()[0]
+                else:  # no style parameter
+                    style = ''
+                # substitute parameters to slider div
                 replacement = slider_div.format(element_class=self.html_class,
                                             element_id=self.html_id,
-                                            var=var,
-                                            width=width)
+                                            var=var, style=style)
                 # subsitute $slider var='var' ... $ in html_srting to proper
                 # html div element
-                html_string = re.sub(r'\$slider\s+(?=.*var\=[\"\'](' + \
+                html_string = re.sub(r'\$\s+slider\s+(?=.*var\=[\"\'](' + \
                     var + ')[\"\'])' + r'[^\$]*\$',
                 replacement, html_string, flags=re.IGNORECASE | re.UNICODE)
 
         # substitute inputs if we have them
         input_el = '<input class="{element_class}_input" \
                                   id="{element_id}_input_{var}" \
-                                   data-var="{var}" data-el_width="{width}" \
+                                   data-var="{var}" data-el_style="{style}" \
                                    data-el_readonly="{readonly}"> \
                      </input>'
 
         input_index = 0  # make multiple inputs for same variable have
         # different id
 
-        for var in variables:  # multiple inputs test
+        for var in variables:
             input_index = +1
-            instances = re.findall(r'\$input\s+(?=.*var\=[\"\']' + var + '[\"\'])' \
+            instances = re.findall(r'\$\s+input\s+(?=.*var\=[\"\']' + var + '[\"\'])' \
                           + r'[^\$]*\$', html_string)
             # import ipdb; ipdb.set_trace()
-            for input_def in instances:
-                width = re.search(r'(?=.*width\=[\"\'](\d+)[\"\'])', input_def)
-                if width:
-                    width = width.groups()[0]
-                else:
-                    width = ''
-                readonly = re.search(r'(?=.*readonly\=[\"\'](\w+)[\"\'])', input_def)
+            for input_def in instances:  # for multiple inputs per var
+                # extract var and readonly before style!
+                var_substring = re.search(r'(var\=[\"\']' + var + r'[\"\'])',
+                                          input_def)
+                input_def = input_def.replace(var_substring, '')
+                readonly = re.search(r'(?=.*(readonly\=[\"\'](\w+)[\"\']))', input_def)
                 if readonly:
-                    readonly = readonly.groups()[0]
+                    readonly = readonly.groups()[1]
+                    input_def = input_def.replace(readonly.groups()[0], '')
                 else:
                     readonly = ''
+                style = re.search(r'(?=.*style\=[\"\'](.*)[\"\'])', input_def)
+                if style:
+                    style = style.groups()[0]
+                else:
+                    style = ''
 
                 replacement = input_el.format(element_class=self.html_class,
                         element_id=self.html_id + '_' + str(input_index),
-                        var=var, width=width, readonly=readonly)
-                html_string = re.sub(r'\$input\s+(?=.*var\=[\"\'](' + \
+                        var=var, readonly=readonly, style=style)
+                html_string = re.sub(r'\$\s+input\s+(?=.*var\=[\"\'](' + \
                                      var + ')[\"\'])' + r'[^\$]*\$',
                 replacement, html_string, flags=re.IGNORECASE | re.UNICODE)
         return html_string