parambox - npm Package Compare versions

Comparing version 1.0.0 to 1.2.1

package.json

 {
   "name": "parambox",
-  "version": "1.0.0",
+  "version": "1.2.1",
   "description": "Too much parameters to handle ? paraBox is a collection of smart plug and play tools to facilitate the design of javascript games and cognitive tasks.",
-  "main": "lib/paramBox-transpiled-0.1.js",
+  "main": "lib/paramBox-transpiled-0.2.js",
   "repository": {
@@ -27,4 +27,5 @@ "type": "git",
   "dependencies": {
+    "bootstrap": "^3.3.6",
     "jquery": "^3.0.0"
   }
 }

README.md

@@ -1,2 +0,2 @@
-# paramBox
+# paramBox v1.2
 
@@ -7,9 +7,33 @@ Too much parameters to handle ?
 
+
 ## Require
 
-For now : jQuery
+For now : jQuery, Bootstrap
 
 ## Install
+	<link rel="stylesheet" type="text/css" href="/node_modules/bootstrap/dist/css/bootstrap.min.css"></link>
 	<script type="text/javascript" src="/lib/paramBox-transpiled-0.1.js"></script>
+	<script type="text/javascript">
+		// one example of implementation could be
+    var paramBox = null;
+		$(document).ready(function(){
+				// we suppose you have an object "Task" holding all your variables. 
+				// If your variables are in the global space you can just put window as an object
+			  taskObject = new Task();			
+				
+				// instanciate the param box
+				paramBox = new ParamBox();
 
+				// bind object variables to it
+				paramBox.bind(taskObject, ["nameOfVariableOne", "nameOfVariableTwo"]);
+
+				// we suppose in this example that taskObject.nameOfVariableOne, and taskObject.nameOfVariableTwo exists !
+			
+		});
+	</script>
+
+
+A div containing the ParamBox is automatically added to the document's body, to show/hide it, press Shift + P. You ight want to change the url of your imports.
+
+
 ## Classes
@@ -19,14 +43,60 @@
 
-Small dragable boxes. 
+This is the parent class, all properties and method of this object are inherited by ParamBox and SmartModal classes. Dragboxes are small dragable boxes with a title and content. By clicking on the title bar you can drag the box. 
 
-Three stickiness properties : magnetized, glue, or none.
+To create a box :
 
-The boxes are keybinded and appear and disapear on command : Shift + P for now.
+	var dragBox = new DragBox();
+	dragBox.title = "<h3><center> My dragbox </center></h3>";
+	dragBox.content = "<p>Some very usefull information in HTML</p>";
 
+	// then show the dragbox
+	dragBox.show();
 
+	// to hide the dragBox
+	// dragBox.hide();
+
+	// to destroy a box (removes it from the DOM)
+	// dragBox.destroy()
+
+
+You will see that by default the box is sticky on the edge of the screen, this property can be changed to: magnetized, glue, or none.
+	
+	// edge are magnetic and attract the box
+	cawaka.stickiness = "magnetized";
+	
+	// the box is not attracted by the edge but sticks to it if you make it collide with it.
+	cawaka.stickiness = "glue";
+
+	// no stickiness
+	cawaka.stickiness = "none";
+
+
 ### ParamBox
 
-### BindedProperty
+The boxes are keybinded and appear and disapear on command : Shift + P for now. This will show and hide all paramBoxes you have on your page.
 
-### BindedField
 
+* BindedProperty
+* BindedField
+
+### SmartModal
+
+Smart modal is another helping class that creates a modal that adapt intelligently to the page, and are easilly configurable. They are shown automatically and dismiss when the button is clicked.
+
+The modal constructor takes four possible arguments :
+	SmartModal(formatType = "across", callback = null, buttonType = "closebutton")
+
+formatType determine the size and position of the modal, modals appeara at 20% from the top and are of three types: 
+	* "centralSmall" creates a modal with : 30% height 40% width 
+	* "centralLarge" creates a modal with : 60% height 70% width 
+	* "across" creates a modal with : 40% height 100% width (30% from the top)
+
+Callback is a function that is called when the modal is dismissed. 
+
+Buttontype is a string can either be : "closebutton", "nextbutton", or "blankbutton"
+
+To create a modal :
+
+	var modalBox = new SmartModal("centralSmall", function() { console.log("Modal Destroyed"); })
+	modalBox.title = "<h4><center>This is a modal</center></h4>"
+	modalBox.content = "Very important information, needed a modal."

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

100702

increased by135.1%

Number of package files

8

increased by33.33%

Lines of code

2651

increased by141.66%

Number of lines in readme file

101

increased by225.81%

Worsened metrics

Dependency count

2

increased by100%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedbootstrap@^3.3.6

• + Addedbootstrap@3.4.1(transitive)