wip

ext/bg/js/options.js

@@ -54,7 +54,7 @@ function getFormData() {
         $('.dict-group').each((index, element) => {
             const dictionary = $(element);
             const title = dictionary.data('title');
-            const priority = parseInt(dictionary.find('.dict-priority').val(), 10);
+            const priority = parseFloat(dictionary.find('.dict-priority').val());
             const enabled = dictionary.find('.dict-enabled').prop('checked');
             optionsNew.dictionaries[title] = {priority, enabled};
         });
@@ -147,8 +147,8 @@ function populateDictionaries(options) {
     let dictCount = 0;
     return instDb().getDictionaries().then(rows => {
         rows.forEach(row => {
-            const dictOptions = options.dictionaries[row.title] || {enableTerms: false, enableKanji: false, priority: 0};
+            const dictOptions = options.dictionaries[row.title];
-            const html = handlebarsRender('dictionary.html', {
+            const dictHtml = handlebarsRender('dictionary.html', {
                 title: row.title,
                 version: row.version,
                 revision: row.revision,
@@ -156,13 +156,25 @@ function populateDictionaries(options) {
                 enabled: dictOptions.enabled
             });
 
-            dictGroups.append($(html));
+            dictGroups.append($(dictHtml));
             ++dictCount;
         });
 
         updateVisibility(options);
 
         $('.dict-enabled, .dict-priority').change(onOptionsChanged);
+        $('.dict-priority-up').click(e => {
+            const dictGroup = $(e.target).closest('.dict-group');
+            const dictPriority = dictGroup.find('.dict-priority');
+            dictPriority.val(parseFloat(dictPriority.val()) + 0.5);
+            onOptionsChanged(e);
+        });
+        $('.dict-priority-down').click(e => {
+            const dictGroup = $(e.target).closest('.dict-group');
+            const dictPriority = dictGroup.find('.dict-priority');
+            dictPriority.val(parseFloat(dictPriority.val()) - 0.5);
+            onOptionsChanged(e);
+        });
     }).catch(showDictionaryError).then(() => {
         showDictionarySpinner(false);
         if (dictCount === 0) {

ext/bg/js/templates.js

@@ -7,7 +7,7 @@ templates['dictionary.html'] = template({"1":function(container,depth0,helpers,p
 
   return "<div class=\"dict-group well well-sm\" data-title=\""
     + alias4(((helper = (helper = helpers.title || (depth0 != null ? depth0.title : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"title","hash":{},"data":data}) : helper)))
-    + "\">\n    <h4><span class=\"text-muted glyphicon glyphicon-book\"></span> "
+    + "\">\n    <div class=\"row\">\n        <div class=\"col-xs-6\">\n            <h4><span class=\"text-muted glyphicon glyphicon-book\"></span> "
     + alias4(((helper = (helper = helpers.title || (depth0 != null ? depth0.title : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"title","hash":{},"data":data}) : helper)))
     + " <small>rev."
     + alias4(((helper = (helper = helpers.revision || (depth0 != null ? depth0.revision : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"revision","hash":{},"data":data}) : helper)))
@@ -19,7 +19,7 @@ templates['dictionary.html'] = template({"1":function(container,depth0,helpers,p
     + alias4(((helper = (helper = helpers.priority || (depth0 != null ? depth0.priority : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"priority","hash":{},"data":data}) : helper)))
     + "\" id=\"dict-"
     + alias4(((helper = (helper = helpers.title || (depth0 != null ? depth0.title : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"title","hash":{},"data":data}) : helper)))
-    + "\" class=\"form-control dict-priority\">\n    </div>\n</div>\n";
+    + "\" class=\"form-control dict-priority\">\n            </div>\n        </div>\n        <div class=\"col-xs-6 text-right\">\n            <p><button class=\"dict-priority-up glyphicon glyphicon-arrow-up\" title=\"Increase priority\"></button></p>\n            <p><button class=\"dict-priority-down glyphicon glyphicon-arrow-down\" title=\"Decrease priority\"></button></p>\n        </div>\n    </div>\n</div>\n";
 },"useData":true});
 templates['fields.html'] = template({"1":function(container,depth0,helpers,partials,data) {
     var stack1;

tmpl/dictionary.html

@@ -1,4 +1,6 @@
 <div class="dict-group well well-sm" data-title="{{title}}">
+    <div class="row">
+        <div class="col-xs-6">
             <h4><span class="text-muted glyphicon glyphicon-book"></span> {{title}} <small>rev.{{revision}}</small></h4>
 
             <div class="checkbox">
@@ -9,3 +11,9 @@
                 <input type="number" value="{{priority}}" id="dict-{{title}}" class="form-control dict-priority">
             </div>
         </div>
+        <div class="col-xs-6 text-right">
+            <p><button class="dict-priority-up glyphicon glyphicon-arrow-up" title="Increase priority"></button></p>
+            <p><button class="dict-priority-down glyphicon glyphicon-arrow-down" title="Decrease priority"></button></p>
+        </div>
+    </div>
+</div>