mxl-filter-editor/index.html at main · azadix/mxl-filter-editor · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
<!DOCTYPE html>
<html lang="en" data-theme="dark">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="icon" href="assets/favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="assets/favicon.ico" type="image/x-icon">

    <title>MedianXL Filter editor</title>

    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/1.0.1/css/bulma.min.css" />
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/2.2.2/css/dataTables.bulma.min.css" />
    <link rel="stylesheet" type="text/css" href="assets/style.css" />
    <link rel="stylesheet" type="text/css" href="assets/dropdown-style.css" />

    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.datatables.net/2.2.2/js/dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/2.2.2/js/dataTables.bulma.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/lz-string@1.4.4/libs/lz-string.min.js"></script>
    <script src="js/script.js" type="module"></script>
  </head>

  <body class="section py-1 px-5 no-scrollbar">
    <div id="header" class="content mb-2">
      <nav class="level mb-2">
        <div class="level-left">
          <div class="level-item">
            <figure class="image is-64x64 mr-4">
              <img src="assets/logo.png" alt="MedianXL Filter editor logo" aria-label="Application logo">
            </figure>

            <h1 class="is-size-2 diablo-font m-0">
              MedianXL Filter editor
            </h1>
          </div>
        </div>

        <div class="level-right">
          <div class="level-item">
            <a href="https://github.com/azadix/mxl-filter-editor" class="github-link" target="_blank" aria-label="GitHub Repository redirect">
              <span class="contribute-text">Contribute!</span>
              <svg width="32" height="32" viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg" class="white-fill" aria-hidden="true">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"></path>
              </svg>
            </a>
          </div>
        </div>
      </nav>

      <div class="columns is-variable is-2 is-align-items-flex-end is-multiline m-0 filter-toolbar">
        <div class="column p-0 is-narrow">
          <div class="field small-gap is-grouped is-grouped-multiline mb-0">
            <div class="control">
              <button class="button is-success is-inverted is-outlined" id="newFilter" aria-label="Create new filter">
                <i class="fas fa-plus pr-1"></i>
                New filter
              </button>
            </div>
            <div class="control">
              <button class="button is-success is-inverted is-outlined" id="addNewRule" aria-label="Add new rule">
                <i class="fas fa-plus pr-1"></i>
                Add new rule
              </button>
            </div>
            <div class="control">
              <button class="button is-warning is-inverted is-outlined" id="pasteFromClipboard" aria-label="Paste filter from clipboard">
                <i class="fas fa-paste pr-1"></i>
                Paste from clipboard
              </button>
            </div>
            <div class="control">
              <button class="button is-warning is-inverted is-outlined" id="copyToClipboard" aria-label="Copy current filter to clipboard">
                <i class="fas fa-clipboard pr-1"></i>
                Copy to clipboard
              </button>
            </div>
          </div>
        </div>

        <div class="column py-0 filter-toolbar-middle">
          <div class="columns is-variable is-2 is-mobile mb-0">
            <div class="column py-0">
              <label class="label is-small mb-1" for="loadFromLocalStorage">Load Filter</label>
              <div class="control">
                <div class="select is-fullwidth">
                  <select id="loadFromLocalStorage"></select>
                </div>
              </div>
            </div>
            <div class="column py-0 pl-0">
              <label class="label is-small mb-1" for="filterName">Edit Filter Name</label>
              <div class="control">
                <input class="input" id="filterName" type="text" placeholder="Filter name" autocomplete="off" aria-label="Filter name">
              </div>
            </div>
          </div>
        </div>

        <div class="column p-0 is-narrow">
          <label class="label is-small mb-1 filter-toolbar-actions-spacer" aria-hidden="true">&nbsp;</label>
          <div class="field small-gap is-grouped is-grouped-multiline mb-0">
            <div class="control">
              <button class="button is-warning is-inverted is-outlined" id="saveToLocalStorage" aria-label="Save filter in storage">
                <i class="fas fa-cloud-upload-alt pr-1"></i>
                Save
              </button>
            </div>
            <div class="control">
              <button class="button is-danger is-inverted is-outlined" id="deleteFromLocalStorage" aria-label="Delete filter from storage">
                <i class="fas fa-trash-alt pr-1"></i>
                Delete
              </button>
            </div>
            <div class="control">
              <button class="button is-info is-inverted is-outlined" id="filterSettings" aria-label="Filter settings">
                <i class="fas fa-cog pr-1"></i>
                Settings
              </button>
            </div>
            <div class="control">
              <button class="button is-info is-inverted is-outlined" id="shareFilter" aria-label="Share filter via link">
                <i class="fas fa-share-alt pr-1"></i>
                Share
              </button>
            </div>
          </div>
        </div>

        <div class="column py-0 pr-0 is-narrow">
          <label class="label is-small mb-1 filter-toolbar-actions-spacer" aria-hidden="true">&nbsp;</label>
          <div class="control">
            <button class="button is-link is-outlined" id="browseTswFilters" type="button" aria-label="Browse cached TSW filters">
              <i class="fas fa-folder-open pr-1"></i>
              Browse filters
            </button>
          </div>
        </div>
      </div>
    </div>

    <div class="modal" id="settingsModal">
      <div class="modal-background"></div>
      <div class="modal-card">
        <header class="modal-card-head p-3">
          <p class="modal-card-title m-3 is-size-3 has-text-weight-bold">Settings</p>
        </header>

        <section class="modal-card-body p-3">
          <!-- Setting 1 -->
          <div class="field mb-5">
            <div class="control">
              <label class="checkbox is-size-4" for="defaultShowItems">
                <input id="defaultShowItems" type="checkbox" checked class="checkbox-input m-3" aria-describedby="showItemsHelp">
                <span class="has-text-weight-bold">Always show items</span>
              </label>
              <p id="showItemsHelp" class="help is-size-7 mx-3 my-1">
                When enabled, filtered items will always be visible on the ground.
                Otherwise, you'll need to hold a key to show hidden items (default: Alt).
              </p>
            </div>
          </div>

          <!-- Setting 2 -->
          <div class="field mb-5">
            <div class="control">
              <label class="checkbox is-size-4" for="defaultNotify">
                <input id="defaultNotify" type="checkbox" class="checkbox-input m-3" aria-describedby="defaultNotifyHelp">
                <span class="has-text-weight-bold">Notify</span>
              </label>
              <p id="defaultNotifyHelp" class="help is-size-7 mx-3 my-1">
                This option changes the default value of notification checkbox for new rules.
                When enabled, you'll see a notification when a filtered item drops.
              </p>
            </div>
          </div>

          <!-- Setting 3 -->
          <div class="field mb-5">
            <div class="control">
              <label class="checkbox is-size-4" for="defaultMap">
                <input id="defaultMap" type="checkbox" class="checkbox-input m-3" aria-describedby="defaultMapHelp">
                <span class="has-text-weight-bold">Show on map</span>
              </label>
              <p id="defaultMapHelp" class="help is-size-7 mx-3 my-1">
                This option changes the default value of map checkbox for new rules.
                When enabled, you'll see a purple X on the minimap when a filtered item drops.
              </p>
            </div>
          </div>

          <!-- Setting 4 -->
          <div class="field mb-2">
            <div class="control">
              <label class="checkbox is-size-4" for="defaultUnobtainableFilter">
                <input id="defaultUnobtainableFilter" type="checkbox" class="checkbox-input m-3" aria-describedby="defaultUnobtainableFilterHelp">
                <span class="has-text-weight-bold">Remove unobtainable items</span>
              </label>
              <p id="defaultUnobtainableFilterHelp" class="help is-size-7 mx-3 my-1">
                This option changes the allowed item list to also contain items that are not longer present in-game or are otherwise unobtainable by normal means.
                When disabled all items will be visible.
              </p>
              <div class="mx-3 my-2">
                <button id="showUnobtainableList" class="button is-small is-outlined is-info">
                  <span class="icon is-small">
                    <i class="fas fa-list"></i>
                  </span>
                  <span>View unobtainable items</span>
                </button>
              </div>
            </div>
          </div>
        </section>

        <footer class="modal-card-foot p-3">
          <div class="buttons">
            <button class="button is-success is-inverted is-outlined" id="saveSettings" aria-label="Save changes button">Save changes</button>
            <button class="button" id="cancelSettings" aria-label="Cancel button">Cancel</button>
          </div>
        </footer>
      </div>
    </div>

    <div class="modal" id="browseTswFiltersModal" aria-hidden="true" inert>
      <div class="modal-background"></div>
      <div class="modal-card" style="width: 90%; max-width: 40vw">
        <header class="modal-card-head p-3">
          <p class="modal-card-title m-3 is-size-4 has-text-weight-bold">Browse public filters</p>
        </header>
        <section class="modal-card-body p-3">
          <p class="help mb-3">Cached filters (synced from Filter Exchange daily). Select a filter and click Load.</p>
          <div id="tswBrowseFilterList" class="box p-0" style="max-height: 60vh; overflow-y: auto;">
            <p class="p-4 has-text-grey">Open this dialog to load the list.</p>
          </div>
        </section>
        <footer class="modal-card-foot p-3 is-justify-content-flex-end">
          <div class="buttons">
            <button class="button is-danger is-inverted is-outlined" type="button" id="browseTswFiltersCancel">Cancel</button>
            <button class="button is-success is-inverted is-outlined" type="button" id="browseTswFiltersLoad" disabled>Load</button>
          </div>
        </footer>
      </div>
    </div>

    <table id="rulesTable" class="table is-hoverable is-fullwidth" aria-label="Table containing all filter rules">
      <thead>
        <tr>
          <th>ID</th>
          <th aria-label="Reorder handle"></th>
          <th aria-label="Is rule active">Is active</th>
          <th aria-label="Show item state">Status</th>
          <th aria-label="Ethereal select">Ethereal</th>
          <th aria-label="Quality select">Quality</th>
          <th>Condition</th>
          <th aria-label="Character level range"><abbr title="Minimum and maximum character level for rule to take effect">CLvl</abbr></th>
          <th aria-label="Item level range"><abbr title="Minimum and maximum item level for rule to take effect">ILvl</abbr></th>
          <th aria-label="Display drop notification"><abbr title="Displays a notification when item drops">Notify</abbr></th>
          <th aria-label="Show item on map"><abbr title="Display icon on the minimap">Map</abbr></th>
          <th aria-label="Actions for rule">Action</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </body>

</html>