concen 0.1 → 0.1.1

data/public/concen/javascripts/page.js

@@ -0,0 +1,153 @@
+$(document).ready(function() {
+	$("#file-manager a.new-file").live("click", function(event) {
+    var filename = prompt("Filename", "");
+    if (filename) {
+      $.post($(this).attr("href"), {filename: filename}, function(data, textStatus, xhr) {
+        if (data.success) {
+          $("#file-manager div.files").replaceWith(data.content);
+        };
+      });
+    };
+    event.preventDefault();
+	});
+
+	// Delete files.
+  $("#file-manager a.delete").live("click", function(event) {
+    if (confirm("Are you sure?") == true) {
+      targetURL = $(this).attr("href");
+      parentLi = $(this).parents("li").eq(0);
+      $.ajax({
+        url: targetURL,
+        type: "DELETE",
+        dataType: "json",
+        success: function(data, textStatus, xhr) {
+          if (data.success) {
+            console.log(parentLi);
+            parentLi.remove();
+          };
+        }
+      });
+    };
+    event.preventDefault();
+  });
+
+  // Insert file path to text editor by drag and drop.
+  $("#file-manager a.filename").draggable({
+    revert: "invalid",
+    helper: "clone"
+  });
+	$( "#text-editor" ).droppable({
+	  accept: ".filename",
+		drop: function(event, ui) {
+      window.editor.insert(ui.draggable.data("path"));
+		}
+	});
+
+  // Setup text editor (ace.js).
+	setupTextEditor = function() {
+	  if ($("#text-editor").length > 0) {
+      window.editor = ace.edit("text-editor");
+      window.editor.setHighlightActiveLine(false);
+      window.editor.setShowPrintMargin(false);
+      window.editor.getSession().setValue($("textarea.text-editor-content").eq(0).val());
+      window.editor.getSession().setTabSize(2);
+      window.editor.getSession().setUseSoftTabs(true);
+      window.editor.getSession().setUseWrapMode(true);
+      window.editor.renderer.setShowGutter(false);
+
+      $("form.with-text-editor").submit(function() {
+        var editorContent = window.editor.getSession().getValue();
+        $("textarea.text-editor-content").eq(0).val(editorContent);
+      });
+    };
+	};
+
+	setupTextEditor();
+
+  // Text editor is resizable.
+  resizableTextEditor = $("form.with-text-editor .border").eq(0)
+  resizableTextEditor.resizable({
+		minHeight: resizableTextEditor.height(),
+		minWidth: resizableTextEditor.width(),
+		maxWidth: resizableTextEditor.width(),
+		stop: function(event, ui) {
+		  $("#text-editor").css("height", $("#text-editor").parent().height());
+      window.editor.resize();
+		}
+  });
+
+  // Setup file uploader. Support multiple files upload and drag and drop.
+  if ($("#file-uploader").length > 0) {
+    var uploader = new qq.FileUploader({
+      element: $("#file-uploader")[0],
+      action: $("#file-uploader").data("upload-path"),
+      params: {},
+      sizeLimit: 0, // max size
+      minSizeLimit: 0, // min size
+      debug: false,
+      csrf: true,
+      template: '<div class="qq-uploader">' +
+                  '<div class="qq-upload-drop-area"><span>Drop files here to upload</span></div>' +
+                  '<div class="qq-upload-button">Upload Files</div>' +
+                  '<ul class="qq-upload-list"></ul>' +
+                '</div>',
+      onComplete: function(id, fileName, responseJSON){
+        if (responseJSON.success) {
+          $("#file-manager ul.qq-upload-list li.qq-upload-success").remove();
+          $("#file-manager div.files").replaceWith(responseJSON.content);
+        };
+      },
+      showMessage: function(message){ alert(message); }
+    });
+  };
+
+  $("ul.pages").nestedSortable({
+		disableNesting: "no-nest",
+		forcePlaceholderSize: true,
+		helper:	"clone",
+		handle: "span.handle",
+		items: "li",
+		maxLevels: 3,
+		opacity: .6,
+		placeholder: "placeholder",
+		revert: 250,
+		tabSize: 25,
+		tolerance: "pointer",
+		toleranceElement: "> p",
+		listType: "ul",
+		update: function(event, ui) {
+		  data = $("ul.pages").nestedSortable("serialize", {"attribute": "data-id"});
+		  console.log(data);
+		  if ($("ul.pages > li").length > 1) {
+		    $("ul.pages").nestedSortable("cancel")
+		  } else {
+		    $.ajax({
+          url: "/pages/sort",
+          type: "PUT",
+          dataType: "json",
+          data: data,
+          success: function(data, textStatus, xhr) {
+            if (!data.success) {
+              $("ul.pages").nestedSortable("cancel");
+            };
+            // $(this).sortable("cancel");
+          }
+        });
+		  };
+		},
+	});
+
+	$("ul.pages a.title").live("click", function(event) {
+	  if ($(this).hasClass("active")) {
+	    $(this).removeClass("active");
+	    $(this).parent().find("a.link-button").addClass("hidden");
+	    window.location = $(this).attr("href");
+	  } else {
+	    $("ul.pages a.title").removeClass("active");
+	    $("ul.pages a.link-button").addClass("hidden");
+	    $(this).addClass("active");
+	    $(this).parent().find("a.link-button").removeClass("hidden");
+	  };
+    event.preventDefault();
+	});
+});

data/public/concen/javascripts/performance.js

@@ -0,0 +1,110 @@
+$(function() {
+  function plotWithOptions(data) {
+    window.plot = $.plot($("#recent-responses"), [{label: "Total Runtime", data: data.total_runtime}, {label: "View Runtime", data: data.view_runtime},{label: "MongoDB Runtime", data: data.mongo_runtime}], {
+      xaxis: {
+        mode: "time",
+        timeformat: "%h:%M %P",
+        color: "#141F52",
+        tickColor: "#DADCE7",
+        tickSize: [5, "minute"]
+      },
+      yaxis: {
+        tickDecimals: 0,
+        color: "#141F52",
+        tickColor: "#DADCE7"
+      },
+      grid: {
+        hoverable: true,
+        clickable: true,
+        borderWidth: 1,
+        borderColor: "#141F52",
+        color: "#fe3145",
+        markings: [ { xaxis: { from: 0, to: 2 }, yaxis: { from: 10, to: 10 }, color: "#bb0000" } ]
+      },
+      legend: {show: true, position: "nw", labelBoxBorderColor: false},
+      series: {
+        lines: {show: true, fill: false, steps: false, lineWidth: 2, fillColor: {colors: [{opacity: 0.1}, {opacity: 0.1}]}},
+        stack: null,
+        shadowSize: 0
+      },
+      colors: ["#F3535C", "#E7C400", "#19c84f"]
+    });
+  };
+
+  // plotWithOptions({});
+
+  function showTooltip(x, y, contents) {
+    $("<div id='tooltip'>" + contents + "</div>").css( {
+        position: "absolute",
+        display: "none",
+        top: y + 5,
+        left: x + 5,
+        padding: "4px 8px",
+        "background-color": "#19c84f",
+        opacity: 0.80,
+        color: "white",
+        "font-size": "12px",
+        "font-weight": "bold"
+    }).appendTo("body").fadeIn(200);
+  };
+
+  var previousPoint = null;
+  $("#recent-responses").bind("plothover", function (event, pos, item) {
+      $("#x").text(pos.x.toFixed(2));
+      $("#y").text(pos.y.toFixed(2));
+
+      if (item) {
+        if (previousPoint != item.dataIndex) {
+          previousPoint = item.dataIndex;
+
+          $("#tooltip").remove();
+          var x = item.datapoint[0].toFixed(2),
+              y = item.datapoint[1].toFixed(2);
+
+          showTooltip(item.pageX, item.pageY, "Total Runtime: " + parseInt(y));
+        }
+      }
+      else {
+        $("#tooltip").remove();
+        previousPoint = null;
+      }
+  });
+
+  $("#recent-responses").resize(function() {});
+
+  $(window).resize(function() {
+    updatePanelTextWidth();
+  });
+
+  function updatePanelTextWidth() {
+    $("div.panel ul li p.right").each(function(index) {
+     $(this).parents("li").eq(0).find("p:not(.right)").width($(this).parents("li").eq(0).width() - $(this).innerWidth());
+     $(this).parents("li").eq(0).find("a").width($(this).parents("li").eq(0).width() - $(this).innerWidth());
+   });
+  }
+
+  function update() {
+    $.getJSON("/performance/responses", {"hour": 1}, function(json, textStatus) {
+      plotWithOptions(json);
+      // window.plot.setData([json.total_runtime, json.view_runtime, json.mongo_runtime]);
+      // window.plot.setupGrid();
+      // window.plot.draw();
+      // console.log(window.plot.getOptions())
+    });
+    $.get("/performance/runtimes", {"type": "total"}, function(data, textStatus, xhr) {
+      $("div.panel.total-runtime").find("ul").replaceWith(data);
+      updatePanelTextWidth();
+    });
+    $.get("/performance/runtimes", {"type": "view"}, function(data, textStatus, xhr) {
+      $("div.panel.view-runtime").find("ul").replaceWith(data);
+      updatePanelTextWidth();
+    });
+    $.get("/performance/runtimes", {"type": "mongo"}, function(data, textStatus, xhr) {
+      $("div.panel.mongodb-runtime").find("ul").replaceWith(data);
+      updatePanelTextWidth();
+    });
+    setTimeout(update, 5000);
+  };
+
+  update();
+});

data/public/concen/javascripts/pxToEm.js

@@ -0,0 +1,56 @@
+/*-------------------------------------------------------------------- 
+ * javascript method: "pxToEm"
+ * by:
+   Scott Jehl (scott@filamentgroup.com) 
+   Maggie Wachs (maggie@filamentgroup.com)
+   http://www.filamentgroup.com
+ *
+ * Copyright (c) 2008 Filament Group
+ * Dual licensed under the MIT (filamentgroup.com/examples/mit-license.txt) and GPL (filamentgroup.com/examples/gpl-license.txt) licenses.
+ *
+ * Description: Extends the native Number and String objects with pxToEm method. pxToEm converts a pixel value to ems depending on inherited font size.  
+ * Article: http://www.filamentgroup.com/lab/retaining_scalable_interfaces_with_pixel_to_em_conversion/
+ * Demo: http://www.filamentgroup.com/examples/pxToEm/	 	
+ *							
+ * Options:  	 								
+ 		scope: string or jQuery selector for font-size scoping
+ 		reverse: Boolean, true reverses the conversion to em-px
+ * Dependencies: jQuery library						  
+ * Usage Example: myPixelValue.pxToEm(); or myPixelValue.pxToEm({'scope':'#navigation', reverse: true});
+ *
+ * Version: 2.0, 08.01.2008 
+ * Changelog:
+ *		08.02.2007 initial Version 1.0
+ *		08.01.2008 - fixed font-size calculation for IE
+--------------------------------------------------------------------*/
+
+Number.prototype.pxToEm = String.prototype.pxToEm = function(settings){
+	//set defaults
+	settings = jQuery.extend({
+		scope: 'body',
+		reverse: false
+	}, settings);
+	
+	var pxVal = (this == '') ? 0 : parseFloat(this);
+	var scopeVal;
+	var getWindowWidth = function(){
+		var de = document.documentElement;
+		return self.innerWidth || (de && de.clientWidth) || document.body.clientWidth;
+	};	
+	
+	/* When a percentage-based font-size is set on the body, IE returns that percent of the window width as the font-size. 
+		For example, if the body font-size is 62.5% and the window width is 1000px, IE will return 625px as the font-size. 	
+		When this happens, we calculate the correct body font-size (%) and multiply it by 16 (the standard browser font size) 
+		to get an accurate em value. */
+				
+	if (settings.scope == 'body' && $.browser.msie && (parseFloat($('body').css('font-size')) / getWindowWidth()).toFixed(1) > 0.0) {
+		var calcFontSize = function(){		
+			return (parseFloat($('body').css('font-size'))/getWindowWidth()).toFixed(3) * 16;
+		};
+		scopeVal = calcFontSize();
+	}
+	else { scopeVal = parseFloat(jQuery(settings.scope).css("font-size")); };
+			
+	var result = (settings.reverse == true) ? (pxVal * scopeVal).toFixed(2) + 'px' : (pxVal / scopeVal).toFixed(2) + 'em';
+	return result;
+};

data/public/concen/javascripts/status.js

@@ -0,0 +1,15 @@
+$(function() {
+  function update() {
+    $.getJSON("/status/counts", function(json, textStatus) {
+      $("div.panel.pages").find("p.big-number").html(json.pages);
+      $("div.panel.users").find("p.big-number").html(json.users);
+    });
+
+    $.get("/status/server", function(data, textStatus, xhr) {
+      $("div.panel.server").find("ul").replaceWith(data);
+    });
+
+    setTimeout(update, 5000);
+  };
+  update();
+});

data/public/concen/javascripts/traffic.js

@@ -0,0 +1,113 @@
+$(function() {
+  function plotWithOptions() {
+    window.plot = $.plot($("#recent-visits"), [{label: "Visits", data: []}], {
+      xaxis: {
+        mode: "time",
+        timeformat: "%h %P",
+        color: "#141F52",
+        tickColor: "#DADCE7",
+        minTickSize: [1, "hour"],
+        tickSize: [1, "hour"]
+      },
+      yaxis: {
+        tickDecimals: 0,
+        color: "#141F52",
+        tickColor: "#DADCE7"
+      },
+      grid: {
+        hoverable: true,
+        clickable: true,
+        borderWidth: 1,
+        borderColor: "#141F52",
+        color: "#fe3145",
+        markings: [ { xaxis: { from: 0, to: 2 }, yaxis: { from: 10, to: 10 }, color: "#bb0000" } ]
+      },
+      legend: {show: false, position: "ne"},
+      series: {
+        lines: {show: true, fill: true, steps: false, lineWidth: 2, fillColor: {colors: [{opacity: 0.1}, {opacity: 0.1}]}},
+        stack: true,
+        shadowSize: 0
+      },
+      colors: ["#19c84f"]
+    });
+  };
+
+  plotWithOptions();
+
+  function showTooltip(x, y, contents) {
+    $("<div id='tooltip'>" + contents + "</div>").css( {
+        position: "absolute",
+        display: "none",
+        top: y + 5,
+        left: x + 5,
+        padding: "4px 8px",
+        "background-color": "#19c84f",
+        opacity: 0.80,
+        color: "white",
+        "font-size": "12px",
+        "font-weight": "bold"
+    }).appendTo("body").fadeIn(200);
+  };
+
+  var previousPoint = null;
+  $("#recent-visits").bind("plothover", function (event, pos, item) {
+      $("#x").text(pos.x.toFixed(2));
+      $("#y").text(pos.y.toFixed(2));
+
+      if (item) {
+        if (previousPoint != item.dataIndex) {
+          previousPoint = item.dataIndex;
+
+          $("#tooltip").remove();
+          var x = item.datapoint[0].toFixed(2),
+              y = item.datapoint[1].toFixed(2);
+
+          showTooltip(item.pageX, item.pageY, "Visits: " + parseInt(y));
+        }
+      }
+      else {
+        $("#tooltip").remove();
+        previousPoint = null;
+      }
+  });
+
+  $("#recent-visits").resize(function() {});
+
+  $(window).resize(function() {
+    updatePanelTextWidth();
+  });
+
+  function updatePanelTextWidth() {
+    $("div.panel ul li p.right").each(function(index) {
+  		$(this).parents("li").eq(0).find("p:not(.right)").width($(this).parents("li").eq(0).width() - $(this).innerWidth());
+  		$(this).parents("li").eq(0).find("a").width($(this).parents("li").eq(0).width() - $(this).innerWidth());
+  	});
+  }
+
+  function update() {
+    $.getJSON("/traffic/visits_counts", {"hour": 24}, function(json, textStatus) {
+      window.plot.setData([json]);
+      window.plot.setupGrid();
+      window.plot.draw();
+    });
+    $.getJSON("/traffic/visits_counts", {"hour": 1}, function(json, textStatus) {
+      if (json.length > 0) {
+        $("div.panel.visits-1-hour").find("p.big-number").html(json[0][1]);
+      } else {
+        $("div.panel.visits-1-hour").find("p.big-number").html("0");
+      };
+    });
+    $.get("/traffic/pages", function(data, textStatus, xhr) {
+      $("div.panel.pages").find("ul").replaceWith(data);
+      updatePanelTextWidth();
+    });
+    $.get("/traffic/referrals", function(data, textStatus, xhr) {
+      $("div.panel.referrals").find("ul").replaceWith(data);
+      updatePanelTextWidth();
+    });
+
+    setTimeout(update, 5000);
+  };
+
+  update();
+});