diff --git a/static/js/index.js b/static/js/index.js index 8a8c43c..f9f3fca 100644 --- a/static/js/index.js +++ b/static/js/index.js @@ -29,6 +29,25 @@ var typingTimer, lastValue; var codeExample = '
 1\n 2\n 3\n 4\n 5\n 6\n 7\n 8\n 9\n10\n11\n12\n13\n14\n15\n16\n17\n18\n19\n20\n21\n22\n23\n24\n25\n26\n27\n28\n29\n30\n31\n32\n33\n34\n35\n36\n37\n38\n39\n40
"""\nModule to contain all the project's Flask server plumbing.\n"""\n\nfrom flask import Flask\nfrom flask import render_template, session\n\nfrom bitshift import assets\n# from bitshift.database import Database\n# from bitshift.query import parse_query\n\napp = Flask(__name__)\napp.config.from_object("bitshift.config")\n\napp_env = app.jinja_env\napp_env.line_statement_prefix = "="\napp_env.globals.update(assets=assets)\n\n# database = Database()\n\n@app.route("/")\ndef index():\n    return render_template("index.html")\n\n@app.route("/search/<query>")\ndef search(query):\n    # tree = parse_query(query)\n    # database.search(tree)\n    pass\n\n@app.route("/about")\ndef about():\n    return render_template("about.html")\n\n@app.route("/developers")\ndef developers():\n    return render_template("developers.html")\n\nif __name__ == "__main__":\n    app.run(debug=True)\n
\n
' searchBar.onkeyup = typingTimer; +var testCodelet = { + 'code_url': 'https://github.com/earwig/bitshift/blob/develop/app.py', + 'filename': 'app.py', + 'language': 'Python', + 'date_created': 'May 10, 2014', + 'date_modified': '2 days ago', + 'symbols': { + 'vars': [ + ['app', [ [12, -1, 12, -1] ], + [ [13, -1, 13, -1], + [15, -1, 15, -1], + [16, -1, 16, -1], + [17, -1, 17, -1] ]] + ] + }, + 'authors': ['sevko', 'earwig'], + 'html_code': codeExample +}; + // Enable infinite scrolling down the results page. $(window).scroll(function() { var searchField = $("div#search-field"); @@ -113,6 +132,93 @@ function populateResults(){ } /* + * Create a result element based upon a codelet instance. + * + * @return {Element} The result element. + */ +function createResult(codelet) { + //Level 1 + var newDiv = document.createElement("div"), + table = document.createElement("table"), + row = document.createElement("tr"); + //Level 2 + var displayInfo = document.createElement("div"), + sidebar = document.createElement("td"), + codeElt = document.createElement("td"), + hiddenInfo = document.createElement("td"); + //Level 3 + var title = document.createElement("span"), + site = document.createElement("span"), + dateModified = document.createElement("span"), + language = document.createElement("span"), + dateCreated = document.createElement("span"), + matches = document.createElement("div"), + authors = document.createElement("div"); + + //Classes and ID's + newDiv.classList.add('result'); + + displayInfo.id = 'display-info'; + sidebar.id = 'sidebar'; + codeElt.id = 'code'; + hiddenInfo.id = 'hidden-info'; + + title.id = 'title'; + site.id = 'site'; + dateModified.id = 'date-modified'; + language.id = 'language'; + dateCreated.id = 'date-created'; + matches.id = 'matches'; + authors.id = 'authors'; + + //Add the bulk of the html + var hostUrl = codelet.code_url.match(/htt(p|ps):\/\/\w+\.\w+/)[0], + hostName = hostUrl.split('://')[1].split('.')[0]; + + title.innerHTML = 'File ' + + codelet.filename + ''; + site.innerHTML = 'on ' + hostName +''; + dateModified.innerHTML = 'Last modified ' + codelet.date_modified; + // Needs to be changed from int to string on the server + language.innerHTML = codelet.language; + dateCreated.innerHTML = 'Created ' + codelet.date_created; + matches.innerHTML = 'Symbol matches: '; + $.each(Object.keys(codelet.symbols), function(i, t) { + $.each(codelet.symbols[t], function(i, s) { + matches.innerHTML += '' + s[0] + ''; + }); + }); + authors.innerHTML = 'Authors: '; + $.each(codelet.authors, function(i, a) { + authors.innerHTML += '' + a + '; '; + }); + + sidebar.innerHTML = ''; + // Needs to be processed on the server + codeElt.innerHTML = '
' + codelet.html_code + '
'; + + //Finish and append elements to parent elements + row.appendChild(sidebar); + row.appendChild(codeElt); + row.appendChild(hiddenInfo); + table.appendChild(row); + + displayInfo.appendChild(title); + displayInfo.appendChild(site); + displayInfo.appendChild(dateModified); + + hiddenInfo.appendChild(dateCreated); + hiddenInfo.appendChild(language); + hiddenInfo.appendChild(matches); + hiddenInfo.appendChild(authors); + + newDiv.appendChild(displayInfo); + newDiv.appendChild(table); + + return newDiv; +} + +/* * AJAX the current query string to the server, and return its response. * * @return {Array} The server's response in the form of `div.result` DOM @@ -121,27 +227,7 @@ function populateResults(){ function queryServer(){ var resultDivs = [] for(var result = 0; result < 20; result++){ - var newDiv = document.createElement("div"), - table = document.createElement("table"), - row = document.createElement("tr"), - sidebar = document.createElement("td"), - codeElt = document.createElement("td"), - meta = document.createElement("td"); - - newDiv.classList.add("result"); - sidebar.id = 'sidebar'; - codeElt.id = 'code'; - meta.id = 'meta'; - - sidebar.innerHTML = ''; - codeElt.innerHTML = '
' + codeExample + '
'; - - row.appendChild(sidebar); - row.appendChild(codeElt); - row.appendChild(meta); - table.appendChild(row); - newDiv.appendChild(table); - + var newDiv = createResult(testCodelet); resultDivs.push(newDiv); } diff --git a/static/sass/index.sass b/static/sass/index.sass index a26ad54..bdc4f27 100644 --- a/static/sass/index.sass +++ b/static/sass/index.sass @@ -9,7 +9,7 @@ $minSearchFieldsWidth: 490px $resultWidth: 830px $sidebarWidth: 30px $codeWidth: 500px -$metaWidth: 300px +$hiddenInfoWidth: 300px .ui-datepicker font-size: 70% @@ -286,10 +286,32 @@ div#results margin-right: auto width: 80% + /* TODO: + 1) On the side + - add way to cycle through hits in the code.*/ div.result width: $resultWidth height: 200px - margin-top: 3% + margin-top: 2% + margin-bottom: 6% + + #display-info + a + text-decoration: none + + &:hover + color: orange + + #title + margin-right: 50px + + #site + text-transform: capitalize + + #date-modified + font-family: monospace + color: #333 + display: block table border-collapse: collapse @@ -325,10 +347,32 @@ div#results border: none font-family: monospace - #meta - width: $metaWidth + #hidden-info + width: $hiddenInfoWidth + text-align: center + font-size: 1.2em + + #date-created + display: block + + #language + display: inline-block + padding: 3px + @include vendor(border-radius, 3px) + background-color: #eee + font-weight: bold + color: purple + + &:hover + background-color: #ddd + + #matches + span + color: red + + #authors + span + color: red &.cascade @extend .t3 - - margin-bottom: 0%