Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tpaksu/boxmodel
A CSS box-model editor interface builder input tryout
https://github.com/tpaksu/boxmodel
box-model css editor
Last synced: 12 days ago
JSON representation
A CSS box-model editor interface builder input tryout
- Host: GitHub
- URL: https://github.com/tpaksu/boxmodel
- Owner: tpaksu
- License: mit
- Created: 2017-05-16T14:28:25.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-06-07T05:52:05.000Z (over 6 years ago)
- Last Synced: 2024-12-17T12:30:29.393Z (2 months ago)
- Topics: box-model, css, editor
- Language: JavaScript
- Homepage: https://tpaksu.github.io/boxmodel
- Size: 1.57 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# BoxModel - CSS Box Model Editor
> BoxModel is a jQuery plugin which helps it's users to create a compact form input for editing box model css in html forms. It can submit several details such as separate values and combined, optimized units ready for use inside CSS blocks. It supports mouse wheel input value increasing/decreasing, up/down keys, locking mechanism for editing the property for all directions, multiple styles, multiple unit support, label translations and more.
## Usage
The main files of this plugin are `boxmodel.min.js` and `boxmodel.min.css`, which are generated by compiling and minifying `boxmodel.js` and `boxmodel.scss`. The plugin relies on **jQuery** library, also needs to be included before including `boxmodel.min.js`.
The example configuration which can be found in the base index file is:
```html
window.jQuery || document.write('<script src="js/jquery-2.1.4.min.js" type="text/javascript"><\/script>')
````
Then, to attach a boxmodel object to a container you desire, use this:
```javascript
$(".boxmodel").boxModel();
```
You can customize your plugin with options you provide to the initializing function,
```javascript
$(".boxmodel").boxModel({inputName: "my-box-model", enableDimensions: false});
```
or the element's `data-plugin-options` property.
```javascript
```
Once initalized, you can access the boxmodel object like this:
```javascript
var boxmodel = $(".boxmodel:eq(3)").data("boxmodel");
boxmodel.options.enableDimensions = false;
boxmodel.$element.empty();
boxmodel.init();
```
## Properties
Once you've got the `boxmodel` instance object, you can access these properties:
- `element` [DOM node object]: The HTML dom node which the instance is created on.
- `$element` [jQuery Object]: jQuery object of the dom node. Equals to `$(boxmodel.element)`
For example,
```javascript
var boxmodel = $("#elem1").boxModel();
// boxmodel.element will be equal to document.getElementById("elem1") or $("#elem1").get(0);
// boxmodel.$element will be equal to $("#elem1");
```
- `options` [JS Object]: The instance's configuration object. Consists of merging default values and user defined settings. The details of it is explained in the *Options* section.
- `inputs` [jQuery Object]: This refers to the visible inputs in the boxmodel container.
## Options
These are the options you can set with the javascript plugin initialization object, or with the `data-plugin-options` html attribute on the input element, or within the events by directly modifying the `boxmodel.options` object.
- `inputName` [string]: The input name which will be prepended to the inputs. For example, if this property is set to **my_box**, the left margin input will be posted as **my_box_left_margin**. Can also be set with `data-name` html attribute on the container element. No default.
- `autoText` [string]: the string that'll be displayed on empty inputs, the values of it will be posted as __"auto"__. Default: `"-"`
- `enabledUnits` [array]: allowed units definition. Default: `[ "px", "pt", "em", "rem", "vh", "vw", "vmin", "vmax", "%", "cm" and "mm" ]`
- `defaultUnit` [string]: unit to use when no enabled unit matches the value given. Default: `px`
- `usePrecision` [boolean]: If you want the up/down buttons (and mousewheel) to increase using the minimum precision in the input, this needs to be true. Else, the inputs will increase/decrease by 1 unit. Default: `true`
- `enableMargin` [boolean]: if you want to disable margin box and inputs, set this to false. Default: `true`
- `enablePadding` [boolean]: if you want to disable padding box and inputs, set this to false. Default: `true`
- `enableBorder` [boolean]: if you want to disable border box and inputs, set this to false. Default: `true`
- `enableDimensions` [boolean]: if you want to disable width and height inputs, set this to false. Default: `true`
- `marginLabel` [string]: the label which is displayed inside the margin box. Default: `Margin`
- `paddingLabel` [string]: the label which is displayed inside the padding box. Default: `Padding`
- `borderLabel` [string]: the label which is displayed inside the border box. Default: `Border`
- `dimensionLabel` [string]: the text that'll be displayed in between the width and height inputs if enableDimensions is set to true. Default: `x`
- `onInit` [function]: the method that runs on successful plugin initialization. Default: `function() { }`
- `values` [object]: the initial values for the plugin. Default: `null`
**example structure:**
```javascript
var initialValues = { margin: "0px 1px 0px 1px", padding: "0px 0px 0px 2px", border: "0 .2em .3em 0"};
// or
var initialValues = { margin: { top: "2px", left: "3px", right: "5px"} };
$("div.boxmodel").boxModel({values: initialValues});
```
## Events
- `boxmodel:change` [event handler]: event which is triggered after changing any input on the boxmodel. Attached to the container element itself.
**Prototype:**
```javascript
$(".boxmodel").on("boxmodel:change", function(element, value, all){
...
});
// parameters : element -> the input which triggered the change event
// value -> the input value
// all -> all input values on the plugin as an object
```
- `boxmodel:blur` [event handler]: event which is triggered after when an input loses focus on the container. Attached to the container element itself.
**Prototype:**
```javascript
$(".boxmodel").on("boxmodel:blur", function(element, value, all){
...
});
// parameters : element -> the input which triggered the change event
// value -> the input value
// all -> all input values on the plugin as an object
```
- `boxmodel:keyup` [event handler]: event which is triggered after when an input had a key pressed on the container. Attached to the container element itself.
**Prototype:**
```javascript
$(".boxmodel").on("boxmodel:keyup", function(event, element, value, all){
...
});
// parameters : event -> the DOM event
// element -> the input which triggered the change event
// value -> the input value
// all -> all input values on the plugin as an object
```
- `boxmodel:error` [event handler]: event which is triggered after when an user input triggered a validation error on the container. Attached to the container element itself.
**Prototype:**
```javascript
$(".boxmodel").on("boxmodel:error", function(element, value, all){
...
});
// parameters : element -> the input which triggered the change event
// value -> the input value
// all -> all input values on the plugin as an object
```
## Methods
- `getAllProperties` [function]: Gets all the inputs as an object.
- `setValue` [function]: Sets a specific value, returns `false` if validation `fails`, does nothing and returns `true` when the related input doesn't exist.
**Prototype:**
```javascript
var boxmodel = $("#boxmodel").boxModel();
// parameters:
// string direction (top, left, bottom, right)
// string scope (margin, padding, border)
// string value
boxmodel.setValue("top","margin","5px");
boxmodel.setValue(null, "width", "250px");
```
- `setBorders` [function]: Sets all borders to a specific value, returns `false` if validation fails, does nothing and returns `true` when `enableBorder` is set to `false`.
**Prototype:**
```javascript
var boxmodel = $("#boxmodel").boxModel();
// parameters:
// string value
boxmodel.setBorders("1px");
```
- `setPaddings` [function]: Sets all paddings to a specific value, returns `false` if validation fails, does nothing and returns `true` when `enablePadding` is set to `false`.
**Prototype:**
```javascript
var boxmodel = $("#boxmodel").boxModel();
// parameters:
// string value
boxmodel.setPaddings("8px");
```
- `setMargins` [function]: Sets all borders to a specific value, returns `false` if validation fails, does nothing and returns `true` when `enableMargin` is set to `false`.
**Prototype:**
```javascript
var boxmodel = $("#boxmodel").boxModel();
// parameters:
// string value
boxmodel.setMargins("3px");
```
- `setWidth` [function]: Sets the width input, returns `false` if validation `fails`, does nothing and returns `true when `enableDimensions` is set to `false`.
**Prototype:**
```javascript
var boxmodel = $("#boxmodel").boxModel();
// parameters:
// string value
boxmodel.setWidth("250px");
```
- `setHeight` [function]: Sets the height input, returns `false` if validation `fails`, does nothing and returns `true` when `enableDimensions` is set to `false`.
**Prototype:**
```javascript
var boxmodel = $("#boxmodel").boxModel();
// parameters:
// string value
boxmodel.setHeight("75px");
```
## Examples
### Default Box Model Input
---
Add `data-name` property to the container div, and call `.boxModel()` on the container.
**Preview**
$("#boxmodel-ex-1").boxModel();
HTML:
```html
```
JavaScript:
```html
$("#boxmodel-ex-1").boxModel();
```
### Setting Initial Values
#### Initialization Object
---
Showing how to implement initialization with object.
**Preview**
$("#boxmodel-ex-1-1").boxModel({values: {margins: {top: "1px", left: "2px", right: "3px", bottom: "4px"}, paddings: {top: "1px", left: "2px", right: "3px", bottom: "4px"}, borders: {top: "1px", left: "2px", right: "3px", bottom: "4px"}, dimensions: { width: "150px", height: "250px" }}});
HTML:
```html
```
JavaScript:
```html
$("#boxmodel-ex-1-1").boxModel({
values: {
margins: {
top: "1px",
left: "2px",
right: "3px",
bottom: "4px"
},
paddings: {
top: "1px",
left: "2px",
right: "3px",
bottom: "4px"
},
borders: {
top: "1px",
left: "2px",
right: "3px",
bottom: "4px"
},
dimensions: {
width: "150px",
height: "250px"
}
}
});
```
#### Incomplete Object Values
---
Showing how to implement initialization using an object with undefined values.
**Preview**
$("#boxmodel-ex-1-4").boxModel({
values: {
margins: {
top: "1px",
left: "2px"
},
paddings: {
bottom: "4px"
},
borders: {
left: "2px",
bottom: "4px"
},
dimensions: {
height: "250px"
}
}});
HTML:
```html
```
JavaScript:
```html
$("#boxmodel-ex-1-4").boxModel({
values: {
margins: {
top: "1px",
left: "2px"
},
paddings: {
bottom: "4px"
},
borders: {
left: "2px",
bottom: "4px"
},
dimensions: {
height: "250px"
}
}
});
```
#### Invalid Object Values
---
Showing how to implement initialization using an object with invalid values.
**Preview**
$("#boxmodel-ex-1-5").boxModel({
values: {
margins: {
top: "1px",
left: "2py"
},
paddings: {
top: "1px",
bottom: "4"
},
borders: {
leftx: "2px",
bottom: "4px"
},
dimensions: {
height: "250$",
width: "100%"
}
}});
HTML:
```html
```
JavaScript:
```html
$("#boxmodel-ex-1-5").boxModel({
values: {
margins: {
top: "1px",
left: "2py"
},
paddings: {
top: "1px",
bottom: "4"
},
borders: {
leftx: "2px",
bottom: "4px"
},
dimensions: {
height: "250$",
width: "100%"
}
}
});
```
#### Object With CSS Strings
---
Showing how to implement initialization with object.
**Preview**
$("#boxmodel-ex-1-2").boxModel({values: {margins: "1px 2px 3px 4px",paddings: "1px 2px 3px 4px", borders: "1px 2px 3px 4px", dimensions: { width: "150px", height: "250px"}}});
HTML:
```html
```
JavaScript:
```html
$("#boxmodel-ex-1-2").boxModel({
values: {
margins: "1px 2px 3px 4px",
paddings: "1px 2px 3px 4px",
borders: "1px 2px 3px 4px",
dimensions: {
width: "150px",
height: "250px"
}
}
});
```
#### Optimized CSS Strings
---
Showing how to implement initialization with shortened css strings.
**Preview**
$("#boxmodel-ex-1-3").boxModel({values: {
margins: "5px auto",
paddings: "1px 2px 1px",
borders: "1px auto 3px",
dimensions: {
width: "150px"
}
}});
HTML:
```html
```
JavaScript:
```html
$("#boxmodel-ex-1-3").boxModel({
values: {
margins: "5px auto",
paddings: "1px 2px 1px",
borders: "1px auto 3px",
dimensions: {
width: "150px"
}
}
});
```
#### Invalid CSS Strings
---
Showing how to implement initialization with shortened css strings.
**Preview**
$("#boxmodel-ex-1-6").boxModel({
values: {
margins: "john doe 25ipx",
paddings: "1em 2rem 3pem",
borders: "1px oto 3px",
dimensions: {
width: "720p"
}
}});
HTML:
```html
```
JavaScript:
```html
$("#boxmodel-ex-1-6").boxModel({
values: {
margins: "john doe 25ipx",
paddings: "1em 2rem 3pem",
borders: "1px oto 3px",
dimensions: {
width: "720p"
}
}
});
```
### Skins
#### Chrome Skin
---
Just add `boxmodel-chrome-skin` to the container object and the skin will be applied.
**Preview**
$("#boxmodel-ex-2").boxModel();
HTML:
```html
```
JavaScript:
```html
$("#boxmodel-ex-2").boxModel();
```
#### FireBug Skin
---
Just add `boxmodel-firebug-skin` to the container object and the skin will be applied.
**Preview**
$("#boxmodel-ex-3").boxModel();
HTML:
```html
```
JavaScript:
```html
$("#boxmodel-ex-3").boxModel();
```
#### IE Skin
---
Just add `boxmodel-ie-skin` to the container object and the skin will be applied.
**Preview**
$("#boxmodel-ex-4").boxModel();
HTML:
```html
```
JavaScript:
```html
$("#boxmodel-ex-4").boxModel();
```
#### Rounded Skin
---
Just add `boxmodel-rounded-skin` to the container object and the skin will be applied.
**Preview**
$("#boxmodel-ex-5").boxModel();
HTML:
```html
```
JavaScript:
```html
$("#boxmodel-ex-5").boxModel();
```
#### Dark Skin
---
Just add `boxmodel-dark-skin` to the container object and the skin will be applied.
**Preview**
$("#boxmodel-ex-6").boxModel();
HTML:
```html
```
JavaScript:
```html
$("#boxmodel-ex-6").boxModel();
```
#### Neo Skin
---
Just add `boxmodel-neo-skin` to the container object and the skin will be applied.
**Preview**
$("#boxmodel-ex-7").boxModel();
HTML:
```html
```
JavaScript:
```html
$("#boxmodel-ex-7").boxModel();
```
#### Perspective Skin
---
Just add `boxmodel-perspective-skin` to the container object and the skin will be applied.
**Preview**
$("#boxmodel-ex-8").boxModel();
HTML:
```html
```
JavaScript:
```html
$("#boxmodel-ex-8").boxModel();
```
#### Metal Skin
---
Just add `boxmodel-metal-skin` to the container object and the skin will be applied.
**Preview**
$("#boxmodel-ex-9").boxModel();
HTML:
```html
```
JavaScript:
```html
$("#boxmodel-ex-9").boxModel();
```
### Sent Values
---
This is a form submitting test to see which variables this plugin is posting to you.
**Preview**
Testing with `POST` data sent to "https://httpbin.org/post"
.json_output {display: flex; flex-direction: row;flex-wrap: wrap}
.json_output div { display: flex; flex-direction: row; margin-top: 1px;}
.json_output div label { background: #eee; width: 200px; padding: 4px 10px; margin:0; }
.json_output div p { background: #fff; width: 200px; padding: 4px 10px; margin: 0; }
function call_boxmodel_mock(form){
$.ajax({
url: "https://httpbin.org/post",
data: $(form).serialize(),
method: "POST",
success: function(response){
$(".json_output").empty();
for(i in response.form){
$(".json_output").append("<div><label>"+i+"</label><p>"+response.form[i]+"</p>");
}
}
})
}
$("#boxmodel-ex-10").boxModel();
HTML:
```html
Testing with `POST` data sent to "https://httpbin.org/post"
.json_output {display: flex; flex-direction: row;flex-wrap: wrap}
.json_output div { display: flex; flex-direction: row; margin-top: 1px;}
.json_output div label { background: #eee; width: 200px; padding: 4px 10px; margin:0; }
.json_output div p { background: #fff; width: 200px; padding: 4px 10px; margin: 0; }
function call_boxmodel_mock(form){
$.ajax({
url: "https://httpbin.org/post",
data: $(form).serialize(),
method: "POST",
success: function(response){
$(".json_output").empty();
for(i in response.form){
$(".json_output").append("<div><label>"+i+"</label><p>"+response.form[i]+"</p>");
}
}
})
}
```
JavaScript:
```html
$("#boxmodel-ex-10").boxModel();
```
## Change Log
- #### v1.0.0
- Released initial version.
## Copyright & Licenses
* *boxmodel* CSS Box Model Editor
Copyright (c) Taha PAKSU
All rights reserved.
* Based on *jQuery — New Wave JavaScript* http://www.jquery.org
Copyright (c) JS Foundation and other contributors, https://js.foundation/
Released under [jQuery License](https://jquery.org/license/)
All rights reserved.