Add/search in test dropdown (Blazemeter#31)

* add base css& js scripts * fix styles * add some js functions * save selected value * cleanup styles * add search * fix search * fix styles * cleanup css * fix padding * fix padding * fix close dropdown * format css * add waitor for origin select * fix z-index * fix style * add hover with buttons * disable scroll with keyPress * add select after press enter * move scroll * select cur element after open * wait elements * move css * add more change event handlers * show origin tests select
jenkinsci · Feb 2, 2018 · 6a43bdd · 6a43bdd
1 parent 1c184ec
commit 6a43bdd
Show file tree

Hide file tree

Showing 2 changed files with 410 additions and 3 deletions.
diff --git a/src/main/resources/hudson/plugins/blazemeter/PerformanceBuilder/config.jelly b/src/main/resources/hudson/plugins/blazemeter/PerformanceBuilder/config.jelly
@@ -13,14 +13,23 @@
      See the License for the specific language governing permissions and
      limitations under the License.
     -->
-    <f:entry title="${%Credentials ID:}" field="credentialsId" description="${%GenerateCredentials}">
+    <f:entry title="${%Credentials ID:}" field="credentialsId" description="${%GenerateCredentials}" onchange="executeIntervalTask()">
         <f:select style="width:32em;"/>
     </f:entry>
     <f:entry title="${%Workspace ID:}" field="workspaceId">
-        <f:select style="width:32em;"/>
+        <f:select style="width:32em;" onchange="executeIntervalTask()"/>
     </f:entry>
     <f:entry title="${%BlazeMeter Test}:" field="testId">
-        <f:select style="width:32em;"/>
+        <div id="testDiv">
+            <f:select onchange="onChangeSelectHandler()" style="width:32em;"/>
+            <div id="newSelectDiv">
+                <div id="result" onclick="onClickResultHandler()" class="setting-input select">Select test</div>
+                <div id="hiddenSelect">
+                    <div id="searchInputDiv"/>
+                    <div id="generatedUlDiv"/>
+                </div>
+            </div>
+        </div>
     </f:entry>
     <f:entry title="${%Server url:}">
         <f:textbox disabled="true" style="width:32em;" value="${descriptor.getBlazeMeterURL()}"/>
@@ -46,4 +55,101 @@
             <f:textbox field="sessionProperties"></f:textbox>
         </f:entry>
     </f:advanced>
+
+     <style type="text/css">
+        #hiddenSelect {
+            display: none;
+            position: absolute;
+            border: 1px solid #1E90FF;
+            width: 100%;
+            box-sizing: border-box;
+            background-color: white;
+            z-index: 1;
+        }
+
+        #result {
+            border-radius: 0;
+            height: 2.25em;
+            padding: 6px 10px;
+            color: #000000;
+            position: relative;
+        }
+
+        #searchInput {
+            width: 100%;
+            box-sizing: border-box;
+            border-radius: 0 !important;
+            outline: none;
+            padding: 0 10px !important;
+        }
+
+        #newSelectDiv {
+            width: 32em;
+            box-sizing: border-box;
+            cursor: pointer;
+            position: relative;
+            background-color: white;
+        }
+
+        #newSelectDiv:after {
+            content:'';
+            width: 0;
+            height: 0;
+            display: inline-block;
+            border-top: 6px solid #000000;
+            border-left: 2.5px solid transparent;
+            border-right: 2.5px solid transparent;
+            position: absolute;
+            right: 6px;
+            top: 15px;
+        }
+
+        #generatedUl {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+            color: #000000;
+            max-height: 17em;
+            overflow: auto;
+        }
+
+        #generatedUl li {
+            cursor: pointer;
+            padding: 0 10px;
+        }
+
+
+
+        @media screen and (-moz-device-pixel-ratio) {
+            #newSelectDiv::before {
+                content: '';
+                display: inline-block;
+                border-top: 2px solid #ffffff;
+                width: 18px;
+                height: 30px;
+                position: absolute;
+                right: 1px;
+                top: 1px;
+                background: #f3f3f3;
+                border-left: 2px solid #ffffff;
+                border-bottom: 2px solid #848485;
+                border-right: 2px solid #848485;
+            }
+
+            #newSelectDiv::after {
+                content: '';
+                width: 0;
+                height: 0;
+                display: inline-block;
+                border-top: 4px solid #000000;
+                border-left: 3.5px solid transparent;
+                border-right: 3.5px solid transparent;
+                position: absolute;
+                right: 6px;
+                top: 15px;
+                display: inline-block;
+            }
+        }
+     </style>
+    <script src="${rootURL}/plugin/BlazeMeterJenkinsPlugin/script.js" type="text/javascript"/>
 </j:jelly>