Merge pull request #11 from whytheplatypus/master

highlighting

Author: mgage

htdocs/css/library_browser.css

@@ -45,8 +45,8 @@ ul.list li{
     float:right;
 }
 
-.conatains_problem{
-    backbround: aliceblue;
+.contains_problem{
+    background: aliceblue;
 }
 
 .syncing:after{

htdocs/js/apps/LibraryBrowser/library_browser.js

@@ -41,7 +41,7 @@ $(function () {
         //We want the problem to render in a `li` since it will be included in a list
         tagName:"li",
         //Add the 'problem' class to every problem
-        className: "problem",
+        //className: "problem",
         //This is the template for a problem, the html is defined in SetMaker3.pm
         template: _.template($('#problem-template').html()),
 
@@ -85,7 +85,6 @@ $(function () {
                 problem.render();
             }
 
-            this.el.setAttribute('data-path', problem.get('path'));
             this.el.id = this.model.cid;
 
 
@@ -251,6 +250,124 @@ $(function () {
     });
 
 
+    //##The browse View
+    var BrowseView = Backbone.View.extend({
+        template:_.template($('#Library-template').html()),
+
+        events:{
+            "click .next_group": "loadNextGroup"
+        },
+
+        initialize: function(){
+            var self = this;
+            this.group_size = 25;
+            this.model.get('problems').on('reset', this.render, this);
+            this.model.get('problems').on('syncing', function(value){
+                if(value){
+                    $("[href=#"+self.model.get('name')+"]").addClass("syncing");
+                } else {
+                    $("[href=#"+self.model.get('name')+"]").removeClass("syncing");
+                }
+            }, this);
+            this.model.get('problems').on('alert', function(message){alert(message);});
+
+            if(!(this.model.get('problems').length > 0)){
+                this.model.get('problems').fetch();
+            }
+        },
+
+        render: function(){
+
+            var self = this;
+
+            if ($('#problems_container #' + this.model.get('name')).length == 0) {
+                $('#problems_container').tabs('add', "#"+this.model.get('name'), this.model.get('name') + " (" + this.model.get('problems').length + ")"); //could move to an after?
+                this.setElement(document.getElementById(this.model.get('name')));
+            } else {
+                //select
+                $('#problems_container').tabs('select', this.model.get('name'));
+                $("[href=#"+this.model.get('name')+"]").html(this.model.get('name') + " (" + this.model.get('problems').length + ")");
+            }
+
+            if(self.model.get('problems').syncing){
+                $("[href=#"+self.model.get('name')+"]").addClass("syncing");
+            }
+
+            this.$el.addClass("library_tab");
+            this.startIndex = 0;
+
+            var jsonInfo = this.model.toJSON();
+            jsonInfo['group_size'] = this.group_size;
+
+            jsonInfo['enough_problems'] = (this.model.get('problems').length > this.startIndex)? "block" : "none";
+
+            this.$el.html(this.template(jsonInfo));
+
+            this.loadNextGroup();
+
+            return this;
+        },
+        //Define a new function loadNextGroup so that we can just load a few problems at once,
+        //otherwise things get unwieldy :P
+        loadNextGroup: function(){
+
+            var problems = this.model.get('problems');
+            console.log(problems.length);
+            for(var i = 0; i < this.group_size && this.startIndex < problems.length; i++, this.startIndex++){
+                console.log("adding a problem");
+                var problem = problems.at(this.startIndex);
+                var view = new ProblemView({model: problem, remove_display: true});
+                this.$(".list").append(view.render().el);
+            }
+
+            if(!(this.model.get('problems').length > this.startIndex)){
+                this.$(".next_group").css('display', "none");
+            }
+        }
+
+    });
+
+    var BrowseListView = Backbone.View.extend({
+        tagName:'span',
+        template:_.template($('#LibraryList-template').html()),
+
+        events: {
+            //'change .list': 'lib_selected'
+        },
+
+        initialize:function () {
+            var self = this;
+            this.model.on("change:library_subjects", this.render, this);
+            this.model.on("change:library_chapters", this.render, this);
+            this.model.on("change:library_section", this.render, this);
+        },
+
+        render:function () {
+
+            var self = this;
+            if(self.model.syncing){
+                self.$el.addClass("syncing white");
+            }
+            this.$el.html(this.template({name: this.options.name}));
+            self.$("."+this.options.name+".list").on('change', function(event){self.lib_selected(event)});
+            this.addAll();
+            return this;
+        },
+
+        section_selected:function (event) {
+            var self = this;
+            self.$el.removeClass("syncing white");
+            var selectedLib = this.model.getByCid(event.target.value);
+            if(selectedLib){
+                var view = new LibraryListView({model:selectedLib.get('children'), name: selectedLib.cid});
+                this.$('.'+this.options.name+".children").html(view.render().el);
+                libToLoad = selectedLib;
+            }
+        }
+
+    });
+
+
     //##The main Set view
     var SetView = Backbone.View.extend({
         template:_.template($('#set-template').html()),
@@ -341,7 +458,7 @@ $(function () {
             var self = this;
             this.model.get('problems').on('all', function(){self.render()}, this);
             this.model.get('problems').on('alert', function(message){alert(message);});
-            this.model.on('highlight', function(){self.$el.addClass("contains_problem")});
+            this.model.on('highlight', function(){console.log("highlight "+self.model.get('name')); self.$el.addClass("contains_problem")});
         },
 
         render:function () {
@@ -506,9 +623,7 @@ $(function () {
         highlightSets: function(event) {
             switch(event.type){
                 case "mouseenter":
-                    //console.log(this.getAttribute("data-path"));
                     var problemPath = event.currentTarget.getAttribute("data-path");
-
                     this.homeworkSets.each(function(set){
                         if(set.get('problems').find(function(problem){return problem.get('path') == problemPath})){
                             set.trigger('highlight');

htdocs/js/apps/LibraryBrowser/Search.js htdocs/js/lib/webwork/teacher/Browse.jshtdocs/js/apps/LibraryBrowser/Search.js renamed to htdocs/js/lib/webwork/teacher/Browse.js

@@ -1,3 +1,67 @@
+
+/**
+ *
+ * @constructor
+ */
+webwork.Browse = Backbone.Model.extend({
+
+    defaults:{
+        name:"",
+        library_subject:null,
+        library_chapter:null,
+        library_section:null
+    },
+
+    initialize: function(){
+        this.set('problems', new webwork.ProblemList);
+        this.set('library_subjects', new Array());
+        this.set('library_chapters', new Array());
+        this.set('library_section', new Array());
+    },
+
+    go: function () {
+        this.updateInputs();
+        this.set(name, this.get('library_subject') + " " + this.get('library_chapter') + " " + this.get('library_section'));
+        var requestObject = {
+            xml_command: "searchLib",
+            subcommand: "getDBListings",
+            library_subjects: this.get('library_subject'),
+            library_chapters: this.get('library_chapter'),
+            library_sections: this.get('library_section')
+        };
+        _.defaults(requestObject, this.defaultRequestObject);
+        var self = this;
+        $.post(webserviceURL, requestObject, function (data) {
+            var response = $.parseJSON(data);
+            var results = response.result_data.split(",");
+
+            newSearchResult.problems = new Array();
+            for (var i = 0; i < results.length; i++) {
+                newSearchResult.problems.push(new Problem(results[i]));
+            }
+            self.get('problems').reset(newSearchResult);
+        });
+    },
+
+    updateSubcategory: function (section, subcommand) {
+        var self = this;
+        var requestObject = {
+            xml_command: "searchLib",
+            subcommand: subcommand,
+            library_subjects: this.get('library_subject'),
+            library_chapters: this.get('library_chapter'),
+            library_sections: this.get('library_section')
+        };
+        _.defaults(requestObject, this.defaultRequestObject);
+        $.post(webserviceURL, requestObject, function (data) {
+            var response = $.parseJSON(data);
+            self.set(subcommand, response.result_data.split(","));
+        });
+    }
+});
+
+
+/*
 function Search() {
     this.problems = new Array();
     this.subjectBox = document.getElementById("subjectBox");
@@ -27,17 +91,13 @@ function Search() {
         //update inputs
         workAroundTheClosure.updateInputs();
     }, false);
-    /*textbooksBox.addEventListener("change", function() {
-     //update inputs
-     workAroundTheClosure.updateInputs();
-     //update lists
-     workAroundTheClosure.updateAll();
-     }, false);*/
+
     this.updateSubjectBox();
     this.updateChaptersBox();
     this.updateSectionsBox();
 
 }
+*/
 
 function SearchResult() {
     this.searchName = "search" + generateUniqueID();
@@ -89,7 +149,7 @@ SearchResult.prototype.createPageControls = function () {
 
 }
 
-
+/*
 Search.prototype.go = function () {
     this.updateInputs();
     listLibRequest.xml_command = "searchLib";
@@ -119,15 +179,10 @@ Search.prototype.go = function () {
             newSearchResult.problems.push(new Problem(results[i]));
         }
         newSearchResult.renderProblems(newSearchResult.topProbIndex, newSearchResult.probsPerPage);
-        //callback();
-        /*} catch (err) {
-         console.log(err);
-         var myWindow = window.open('', '', 'width=500,height=800');
-         myWindow.document.write(data);
-         myWindow.focus();
-         }*/
+
     });
 };
+*/
 
 SearchResult.prototype.renderProblems = function (start, limit) {
     //$('#'+this.searchName+' a').text("Other text");
@@ -155,6 +210,7 @@ SearchResult.prototype.updateMoveButtons = function () {
     }
 };
 
+/*
 Search.prototype.updateInputs = function () {
     listLibRequest.library_subjects = this.subjectBox.options[this.subjectBox.selectedIndex].value;
     listLibRequest.library_chapters = this.chaptersBox.options[this.chaptersBox.selectedIndex].value;
@@ -164,8 +220,9 @@ Search.prototype.updateInputs = function () {
 //	listLibRequest.library_textsection = this.textSectionsBox.options[this.textSectionsBox.selectedIndex].value;
 //	listLibRequest.library_keywords = this.keywordsBox.value;
 };
+*/
 
-
+/*
 Search.prototype.updateSubjectBox = function () {
     listLibRequest.xml_command = "searchLib";
     listLibRequest.subcommand = "getAllDBsubjects";
@@ -222,4 +279,5 @@ Search.prototype.update = function (box, blankName) {
             myWindow.focus();
         }
     });
-};
+};
+    */

lib/WeBWorK/ContentGenerator/Instructor/SetMaker3.pm

@@ -230,7 +230,7 @@ sub body {
   print '<script type="text/template", id="problem-template">',
         '<%if(!remove_display){ %><div class="handle"><i class="icon-resize-vertical icon-large"></i></div>',
             '<button type="button" class="remove">X</button><%}%>', #replace with twitter bootstrap icons? yeah font awesome :)
-        '    <div class="problem"><%= data %></div>',
+        '    <div class="problem" data-path="<%= path %>" ><%= data %></div>',
         '</script>';
 
   print '<script type="text/template", id="setList-template">',