tweaking the debugger

jonathan-fielding · Sep 13, 2013 · ff88b98 · ff88b98
1 parent e5f0507
commit ff88b98
Show file tree

Hide file tree

Showing 24 changed files with 38 additions and 10 deletions.
diff --git a/.bowerrc b/.bowerrc
diff --git a/.gitignore b/.gitignore
diff --git a/.travis.yml b/.travis.yml
diff --git a/CNAME b/CNAME
diff --git a/Gruntfile.js b/Gruntfile.js
diff --git a/README.md b/README.md
diff --git a/bookmarklet/debugger.css b/bookmarklet/debugger.css
@@ -93,22 +93,22 @@ body{
 	display: none!important;
 }
 
-#rd_states ul{
+.rd_DebugPanel ul{
 	margin: 0px;
 }
 
-#rd_states ul li{
+.rd_DebugPanel ul li{
 	list-style: none;
 }
 
-#rd_states h2{
+.rd_DebugPanel h2{
 	background: #ccc;
 	margin-top: 0px;
 	padding: 5px 10px;
 	font-size: 16px;
 	line-height: 16px;
 }
 
-#rd_states p{
+.rd_DebugPanel p{
 	margin: 10px;
 }
diff --git a/bookmarklet/debugger.js b/bookmarklet/debugger.js
@@ -96,12 +96,18 @@
 
 	var initPanels = {
 		overview: function(){
+			var panel = document.getElementById('rd_overview'),
+				ssmStates = ssm.getStates(),
+				stateCount = ssmStates.length,
+				panelHTML = "<ul>";
 
+			panelHTML += "<p>Number of SSM States: " + stateCount + "</p>";
+			panel.innerHTML = panelHTML;
 		},
 		ssmStates: function(){
-			var ssmStates = ssm.getStates(),
+			var panel = document.getElementById('rd_states'),
+				ssmStates = ssm.getStates(),
 				stateCount = ssmStates.length,
-				panel = document.getElementById('rd_states'), 
 				panelHTML = '<ul>';
 
 			for (var i = 0; i < stateCount; i++) {
@@ -117,7 +123,7 @@
 
 			panelHTML += '</ul>'
 
-			document.getElementById('rd_states').innerHTML = panelHTML;
+			document.getElementById('rd_states').innerHTML += panelHTML;
 		}
 	};
 

diff --git a/bookmarklet/images/close.png b/bookmarklet/images/close.png
diff --git a/bookmarklet/templates.js b/bookmarklet/templates.js
diff --git a/bower.json b/bower.json
@@ -8,6 +8,9 @@
     "components"
   ],
   "dependencies": {
-    "sass-bootstrap": "~2.3.2"
+    "sass-bootstrap": "~2.3.2",
+    "jquery": "~1.10.2",
+    "modernizr": "~2.6.2",
+    "respond": "~1.3.0"
   }
 }
diff --git a/dist/ssm.min.js b/dist/ssm.min.js
diff --git a/docs/css/main.css b/docs/css/main.css
diff --git a/docs/css/styles.css b/docs/css/styles.css
diff --git a/docs/images/fork-me.png b/docs/images/fork-me.png
diff --git a/docs/images/ssm-logo.png b/docs/images/ssm-logo.png
diff --git a/docs/js/script.js b/docs/js/script.js
diff --git a/docs/sass/styles.scss b/docs/sass/styles.scss
diff --git a/index.html b/index.html
@@ -5,6 +5,10 @@
         <link rel="stylesheet" href="docs/css/styles.css">
         <link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
         <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+
+        <script src="docs/bower_components/modernizr/modernizr.js"></script>
+        <script src="docs/bower_components/respond/respond.min.js"></script>
+
     </head>
     <body data-spy="scroll" data-target=".navbar" id="home">
         <a class="github-ribbon visible-desktop" href="https://github.com/jonathan-fielding/SimpleStateManager">
@@ -178,6 +182,10 @@ <h3>Full API</h3>
                             <td>ssm.addState</td>
                             <td>Add a new state, expects an object literal, properties avaliable -  id (optional), minWidth (optional), maxWidth (optional), onEnter (optional), onResize (optional), onLeave (optional)</td>
                         </tr>
+                        <tr>
+                            <td>ssm.updateState</td>
+                            <td>Update an existing state, expects two parameters, firstly the id of the state you wish to update and secondly an object literal of updated settings, properties avaliable -  id (optional), minWidth (optional), maxWidth (optional), onEnter (optional), onResize (optional), onLeave (optional)</td>
+                        </tr>
                         <tr>
                             <td>ssm.addStates</td>
                             <td>Add multiple new states, expects an array of object literals, properties avaliable -  id (optional), minWidth (optional), maxWidth (optional), onEnter (optional), onResize (optional), onLeave (optional)</td>

diff --git a/package.json b/package.json
diff --git a/src/ssm.js b/src/ssm.js
@@ -73,6 +73,17 @@
         return this;
     };
 
+    //Allow updating of an already added state
+    ssm.updateState = function (stateId, options) {
+        for (var i = states.length - 1; i >= 0; i--) {
+            if (states[i].id === stateId) {
+                states[i] = mergeOptions(states[i], options);
+            }
+        }
+
+        return this;
+    };
+
     //Find and remove the state from the array
     ssm.removeState = function (stateId) {
         for (var i = states.length - 1; i >= 0; i--) {

diff --git a/test/index.html b/test/index.html
diff --git a/test/resources/qunit.css b/test/resources/qunit.css
diff --git a/test/resources/qunit.js b/test/resources/qunit.js