modulargrid-rails 0.0.3
Sign up to get free protection for your applications and to get access to all the features.
- data/.gitignore +17 -0
- data/Gemfile +4 -0
- data/LICENSE.txt +22 -0
- data/README.md +47 -0
- data/Rakefile +1 -0
- data/lib/modulargrid-rails/version.rb +5 -0
- data/lib/modulargrid-rails.rb +8 -0
- data/modulargrid-rails.gemspec +21 -0
- data/vendor/assets/javascripts/modulargrid.js +437 -0
- metadata +70 -0
data/.gitignore
ADDED
data/Gemfile
ADDED
data/LICENSE.txt
ADDED
@@ -0,0 +1,22 @@
|
|
1
|
+
Copyright (c) 2012 Alex Timofeev
|
2
|
+
|
3
|
+
MIT License
|
4
|
+
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
6
|
+
a copy of this software and associated documentation files (the
|
7
|
+
"Software"), to deal in the Software without restriction, including
|
8
|
+
without limitation the rights to use, copy, modify, merge, publish,
|
9
|
+
distribute, sublicense, and/or sell copies of the Software, and to
|
10
|
+
permit persons to whom the Software is furnished to do so, subject to
|
11
|
+
the following conditions:
|
12
|
+
|
13
|
+
The above copyright notice and this permission notice shall be
|
14
|
+
included in all copies or substantial portions of the Software.
|
15
|
+
|
16
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
17
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
18
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
19
|
+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
20
|
+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
21
|
+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
22
|
+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,47 @@
|
|
1
|
+
# Modulargrid::Rails
|
2
|
+
|
3
|
+
Rails wrapper implementation of [ModularGrid.js](http://github.com/aishek/modulargrid)
|
4
|
+
|
5
|
+
## Installation
|
6
|
+
|
7
|
+
Add this line to your application's Gemfile:
|
8
|
+
|
9
|
+
```ruby
|
10
|
+
group :development do
|
11
|
+
gem 'modulargrid-rails'
|
12
|
+
end
|
13
|
+
```
|
14
|
+
|
15
|
+
And then execute:
|
16
|
+
|
17
|
+
$ bundle
|
18
|
+
|
19
|
+
Or install it yourself as:
|
20
|
+
|
21
|
+
$ gem install modulargrid-rails
|
22
|
+
|
23
|
+
## Usage
|
24
|
+
|
25
|
+
Grid keybindings:
|
26
|
+
|
27
|
+
* Ctrl + ' - show/hide grid
|
28
|
+
* Shift + f - show/hide fonts/grid
|
29
|
+
* Shift + v - show/hide vertical grid
|
30
|
+
* Shift + h - show/hide horizontal grid
|
31
|
+
|
32
|
+
Guides keybindings:
|
33
|
+
|
34
|
+
* Ctrl + ; - show/hide guides
|
35
|
+
|
36
|
+
Window size keybindings:
|
37
|
+
|
38
|
+
* Shift + r - change window size
|
39
|
+
|
40
|
+
Image layout keybindings:
|
41
|
+
|
42
|
+
* Ctrl + \ - show/hide image layout
|
43
|
+
|
44
|
+
Change opacity level keybindings:
|
45
|
+
|
46
|
+
* Shift + ] - less transparent
|
47
|
+
* Shift + [ - more transparent
|
data/Rakefile
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
require "bundler/gem_tasks"
|
@@ -0,0 +1,21 @@
|
|
1
|
+
# -*- encoding: utf-8 -*-
|
2
|
+
lib = File.expand_path('../lib', __FILE__)
|
3
|
+
$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
|
4
|
+
require 'modulargrid-rails/version'
|
5
|
+
|
6
|
+
Gem::Specification.new do |gem|
|
7
|
+
gem.name = "modulargrid-rails"
|
8
|
+
gem.version = Modulargrid::Rails::VERSION
|
9
|
+
gem.authors = ["Alex Timofeev"]
|
10
|
+
gem.email = ["atimofeev@reactant.ru"]
|
11
|
+
gem.description = %q{Rails wrapper implementation of Modulargrid.js}
|
12
|
+
gem.summary = %q{Modulargrid.js Rails implementation}
|
13
|
+
gem.homepage = "https://github.com/ATimofeev/modulargrid-rails"
|
14
|
+
|
15
|
+
gem.rubyforge_project = "modulargrid-rails"
|
16
|
+
|
17
|
+
gem.files = `git ls-files`.split($/)
|
18
|
+
gem.require_paths = ["lib"]
|
19
|
+
|
20
|
+
gem.add_dependency "railties", "~> 3.1"
|
21
|
+
end
|
@@ -0,0 +1,437 @@
|
|
1
|
+
var ModularGrid={};ModularGrid.Utils={};ModularGrid.Utils={updateCSSHeight:function(a,b,c){if(a!==null){a.style.height=b;if(c){c();}}},getClientHeight:function(){var a=Math.max(document.documentElement.clientHeight,this.getDocumentBodyElement().offsetHeight);if(window.scrollMaxY){a=Math.max(a,window.scrollMaxY);}if(document.documentElement.scrollHeight){a=Math.max(a,document.documentElement.scrollHeight);}return a;},getClientWidth:function(){var a=document.documentElement.clientWidth;return a;},documentBodyElement:null,getDocumentBodyElement:function(){if(this.documentBodyElement==null){this.documentBodyElement=document.getElementsByTagName("body")[0];}return this.documentBodyElement;},createParams:function(c,d){var a={};for(var b in c){a[b]=c[b];}for(var b in d){a[b]=d[b];}return a;},defaultStyleValueParams:{display:"block",width:"100%",height:"100%",opacity:1,background:"transparent","float":"none",visibility:"visible",border:"0"},createStyleValue:function(f,d){var b=d||ModularGrid.Utils.defaultStyleValueParams;var e=ModularGrid.Utils.createParams(b,f);var a="";for(var c in e){if(e[c]||e[c]===0){a+=c+":"+e[c]+";";}if(e[c]=="opacity"){a+="-khtml-opacity:"+e[c]+";-moz-opacity:"+e[c]+";filter:progid:DXImageTransform.Microsoft.Alpha(opacity="+(e[c]*100)+");";}}return a;}};ModularGrid.Utils.EventProvider=function(a,c,b){this.eventName=a;this.prepareParams=c;this.target=b||"document";this.handlers=null;return this;};ModularGrid.Utils.EventProvider.prototype.genericHandler=function(c){var d=(this.prepareParams?this.prepareParams(c):c);for(var a=0,b=this.handlers.length;a<b;a++){this.handlers[a](d);}};ModularGrid.Utils.EventProvider.prototype.initHandlers=function(){this.handlers=[];var code=this.target+".on"+this.eventName.toLowerCase()+"=function(event){self.genericHandler(event);};";var self=this;eval(code);};ModularGrid.Utils.EventProvider.prototype.addHandler=function(a){if(this.handlers==null){this.initHandlers();}this.handlers[this.handlers.length]=a;};ModularGrid.Utils.EventSender=function(){this.handlers={};return this;};ModularGrid.Utils.EventSender.prototype.addHandler=function(a,b){if(!this.handlers[a]){this.handlers[a]=[];}this.handlers[a][this.handlers[a].length]=b;};ModularGrid.Utils.EventSender.prototype.occurEvent=function(a,e){var d=this.handlers[a];if(this.handlers[a]){for(var b=0,c=this.handlers[a].length;b<c;b++){this.handlers[a][b](e);}}};ModularGrid.Utils.CookieStore={setValue:function(a,b){ModularGrid.Utils.CookieStore.setCookie(a,b);},getValue:function(a){return ModularGrid.Utils.CookieStore.getCookie(a);},setCookie:function(c,d){var b=new Date(),a=new Date();a.setTime(b.getTime()+31536000000);document.cookie=c+"="+escape(d)+"; expires="+a;},getCookie:function(b){var d=" "+document.cookie;var c=" "+b+"=";var e=null;var f=0;var a=0;if(d.length>0){f=d.indexOf(c);if(f!=-1){f+=c.length;a=d.indexOf(";",f);if(a==-1){a=d.length;}e=unescape(d.substring(f,a));}}return(e);}};ModularGrid.Utils.StateChanger=function(c,b,a){c.addHandler(function(d){if(b(d)){a();}});return this;};ModularGrid.OpacityChanger={};ModularGrid.OpacityChanger.defaults={shouldStepUpOpacity:function(b){var a=!b.occured_in_form&&(b.shiftKey&&b.keyCode==221);return a;},shouldStepDownOpacity:function(b){var a=!b.occured_in_form&&(b.shiftKey&&b.keyCode==219);return a;},opacity:0.25,opacityStep:0.05};ModularGrid.OpacityChanger={params:null,eventSender:null,init:function(a){this.params=ModularGrid.Utils.createParams(this.defaults,a);this.eventSender=new ModularGrid.Utils.EventSender();},setOpacity:function(a){this.params.opacity=a;this.params.opacity=(this.params.opacity<0?0:this.params.opacity);this.params.opacity=(this.params.opacity>1?1:this.params.opacity);this.updateOpacity(this.params.opacity);return this.params.opacity;},stepDownOpacity:function(){return this.setOpacity(this.params.opacity-this.params.opacityStep);},stepUpOpacity:function(){return this.setOpacity(this.params.opacity+this.params.opacityStep);},updateOpacity:function(a){this.eventSender.occurEvent("opacityChanged",this.params.opacity);},changeElementOpacity:function(a){if(a){a.style.opacity=this.params.opacity;}}};ModularGrid.Image={};ModularGrid.Image.defaults={shouldToggleVisibility:function(b){var a=!b.occured_in_form&&(b.ctrlKey&&(b.character=="\\"||b.keyCode==28||b.keyCode==220));return a;},"z-index":255,centered:false,marginTop:0,marginLeft:"0px",marginRight:"0px",src:"",width:100,height:100};ModularGrid.Image={showing:false,parentElement:null,params:null,imgElement:null,eventSender:null,init:function(a){this.params=ModularGrid.Utils.createParams(this.defaults,a);this.eventSender=new ModularGrid.Utils.EventSender();},createParentElement:function(c){var b=document.createElement("div");var a={position:"absolute",left:"0",top:"0",width:"100%",height:c.height+"px",opacity:1,"z-index":c["z-index"]};b.setAttribute("style",ModularGrid.Utils.createStyleValue(a));b.appendChild(this.createImageDOM(c));ModularGrid.Utils.getDocumentBodyElement().appendChild(b);return b;},createImageDOM:function(d){var a={width:"auto",height:"auto",opacity:ModularGrid.OpacityChanger.params.opacity};var c={"padding-top":d.marginTop+"px",width:"auto",height:"auto"};if(d.centered){c["text-align"]="center";a.margin="0 auto";}else{c["padding-left"]=d.marginLeft,c["padding-right"]=d.marginRight;}var b=document.createElement("div");b.setAttribute("style",ModularGrid.Utils.createStyleValue(c));this.imgElement=document.createElement("img");this.imgElement.setAttribute("src",d.src);this.imgElement.setAttribute("width",d.width);this.imgElement.setAttribute("height",d.height);this.imgElement.setAttribute("style",ModularGrid.Utils.createStyleValue(a));b.appendChild(this.imgElement);return b;},opacityHandler:function(){ModularGrid.OpacityChanger.changeElementOpacity(ModularGrid.Image.imgElement);},toggleVisibility:function(){this.showing=!this.showing;this.eventSender.occurEvent("visibilityChanged",this.showing);if(this.showing&&this.parentElement==null){this.parentElement=this.createParentElement(this.params);}if(this.parentElement){this.parentElement.style.display=(this.showing?"block":"none");}}};ModularGrid.Guides={};ModularGrid.Guides.defaults={shouldToggleVisibility:function(b){var a=!b.occured_in_form&&(b.ctrlKey&&(b.character==";"||b.keyCode==186));return a;},lineStyle:"solid",lineColor:"#9dffff",lineWidth:"1px","z-index":255,items:[]};ModularGrid.Guides={showing:false,parentElement:null,params:null,eventSender:null,init:function(a){this.params=ModularGrid.Utils.createParams(this.defaults,a);this.eventSender=new ModularGrid.Utils.EventSender();},createParentElement:function(b){var a=document.createElement("div");var c=ModularGrid.Utils.createStyleValue({position:"absolute",left:"0",top:"0",height:ModularGrid.Utils.getClientHeight()+"px",width:"100%","text-align":"center","z-index":b["z-index"]});a.setAttribute("style",c);a.innerHTML=this.createGuidesHTML(b.items);ModularGrid.Utils.getDocumentBodyElement().appendChild(a);return a;},createGuidesHTML:function(b){var e="";if(b){var d,f,a=this.params.lineWidth+" "+this.params.lineStyle+" "+this.params.lineColor+" !important";for(var c=b.length;c--;){d=b[c];f={position:"absolute"};switch(d.type){case"center":f.width="100%";f.height="100%";var g={width:d.width,height:"100%",margin:"0 auto","border-left":a,"border-right":a};e+='<div style="'+ModularGrid.Utils.createStyleValue(f)+'"><div style="'+ModularGrid.Utils.createStyleValue(g)+'"></div></div>';break;case"vertical":f.width="0px";f.height="100%";if(d.left!=null){f.left=d.left;f["border-right"]=a;}if(d.right!=null){f.right=d.right;f["border-left"]=a;}e+='<div style="'+ModularGrid.Utils.createStyleValue(f)+'"></div>';break;case"horizontal":f.width="100%";f.height="0px";if(d.top!=null){f.top=d.top;f["border-bottom"]=a;}if(d.bottom!=null){f.bottom=d.bottom;f["border-top"]=a;}e+='<div style="'+ModularGrid.Utils.createStyleValue(f)+'"></div>';break;}}}return e;},toggleVisibility:function(){this.showing=!this.showing;this.eventSender.occurEvent("visibilityChanged",this.showing);if(this.showing&&this.parentElement==null){this.parentElement=this.createParentElement(this.params);}if(this.parentElement){this.parentElement.style.display=(this.showing?"block":"none");}}};ModularGrid.Grid={};ModularGrid.Grid.defaults={shouldToggleVerticalGridVisibility:function(b){var a=!b.occured_in_form&&(b.shiftKey&&b.character=="v");return a;},shouldToggleHorizontalGridVisibility:function(b){var a=!b.occured_in_form&&(b.shiftKey&&b.character=="h");return a;},shouldToggleFontGridVisibility:function(b){var a=!b.occured_in_form&&(b.shiftKey&&b.character=="f");return a;},shouldToggleVisibility:function(b){var a=!b.occured_in_form&&(b.ctrlKey&&(b.character=="'"||b.keyCode==222));return a;},"z-index":255,color:"#F00",centered:true,prependGutter:false,appendGutter:false,gutter:16,vDivisions:6,hDivisions:4,marginTop:0,marginLeft:"18px",marginRight:"18px",width:464,minWidth:464,maxWidth:null,lineHeight:16,lineStyle:"solid",lineWidth:"1px",lineColor:"#555"};ModularGrid.Grid={showing:false,fontGridShowing:false,fontGridParentElement:null,horizontalGridShowing:false,horizontalGridParentElement:null,verticalGridShowing:false,verticalGridParentElement:null,params:null,eventSender:null,init:function(a){this.params=ModularGrid.Utils.createParams(this.defaults,a);this.eventSender=new ModularGrid.Utils.EventSender();},createParentElement:function(b){var a=ModularGrid.Utils.getDocumentBodyElement();a.appendChild(this.createVerticalGridParentElement(b));a.appendChild(this.createHorizontalGridParentElement(b));a.appendChild(this.createFontGridParentElement(b));return a;},opacityHandler:function(){ModularGrid.OpacityChanger.changeElementOpacity(ModularGrid.Grid.fontGridParentElement);ModularGrid.OpacityChanger.changeElementOpacity(ModularGrid.Grid.verticalGridParentElement);ModularGrid.OpacityChanger.changeElementOpacity(ModularGrid.Grid.horizontalGridParentElement);},createVerticalGridParentElement:function(a){this.verticalGridParentElement=document.createElement("div");this.verticalGridParentElement.setAttribute("style",ModularGrid.Utils.createStyleValue({position:"absolute",left:"0",top:"0",display:"none",height:ModularGrid.Utils.getClientHeight()+"px",width:"100%",opacity:ModularGrid.OpacityChanger.params.opacity,"z-index":a["z-index"]}));this.updateVerticalGridContents();return this.verticalGridParentElement;},updateVerticalGridContents:function(){html=ModularGrid.Grid.createVerticalGridHTML(ModularGrid.Grid.params);ModularGrid.Grid.verticalGridParentElement.innerHTML=html;},createVerticalGridHTML:function(f){var j="";var k=(typeof(f.width)=="string"&&f.width.substr(f.width.length-1)=="%");var b=(k?f.minWidth:f.width);var h=f.vDivisions-1;(f.prependGutter?h++:null);(f.appendGutter?h++:null);var a=(f.gutter/b)*100;var e=(100-h*a)/f.vDivisions;var m=(f.prependGutter?a:0);var l={position:"relative","float":"left","margin-right":"-"+e+"%",width:e+"%",height:ModularGrid.Utils.getClientHeight()+"px",background:f.color,opacity:f.opacity};for(var g=f.vDivisions;g--;){l.left=m+"%";j+='<div style="'+ModularGrid.Utils.createStyleValue(l)+'"></div>';m+=a+e;}var d={width:(k?f.width:b+"px")};if(k){if(f.maxWidth){d["max-width"]=f.maxWidth+"px";}if(f.minWidth){d["min-width"]=f.minWidth+"px";}else{alert("Ошибка: не задан параметр minWidth\nСетка может отображаться некорректно\n\nЧтобы сетка отображалась корректно, задайте параметр minWidth");}}if(f.centered){var n={"text-align":"center"};d.margin="0 auto";j='<div style="'+ModularGrid.Utils.createStyleValue(n)+'"><div style="'+ModularGrid.Utils.createStyleValue(d)+'">'+j+"</div></div>";}else{j='<div style="'+ModularGrid.Utils.createStyleValue(d)+'">'+j+"</div>";}var c={width:"auto",padding:"0 "+f.marginRight+" 0 "+f.marginLeft};j='<div style="'+ModularGrid.Utils.createStyleValue(c)+'">'+j+"</div>";return j;},createHorizontalGridParentElement:function(a){this.horizontalGridParentElement=document.createElement("div");var b=ModularGrid.Utils.createStyleValue({position:"absolute",left:"0",top:"0",display:"none",height:ModularGrid.Utils.getClientHeight()+"px",width:"100%",opacity:ModularGrid.OpacityChanger.params.opacity,"z-index":a["z-index"]});this.horizontalGridParentElement.setAttribute("style",b);this.updateHorizontalGridContents();return this.horizontalGridParentElement;},updateHorizontalGridContents:function(){html=ModularGrid.Grid.createHorizontalGridHTML(ModularGrid.Grid.params);ModularGrid.Grid.horizontalGridParentElement.innerHTML=html;},createHorizontalGridHTML:function(g){var d="";var a=ModularGrid.Utils.getClientHeight();var h=g.marginTop;var c=0;var b=g.hDivisions+1;var f=g.lineHeight*g.hDivisions;var e={position:"absolute",width:"auto",left:g.marginLeft,right:g.marginRight,height:f+"px",background:g.color,opacity:g.opacity};while(h<a){if(c==0&&(h+f)<a){e.top=h+"px";d+='<div style="'+ModularGrid.Utils.createStyleValue(e)+'"></div>';}h+=g.lineHeight;c++;if(c==b){c=0;}}return d;},createFontGridParentElement:function(a){this.fontGridParentElement=document.createElement("div");var b=ModularGrid.Utils.createStyleValue({position:"absolute",left:"0",top:"0",display:"none",height:ModularGrid.Utils.getClientHeight()+"px",width:"100%",opacity:ModularGrid.OpacityChanger.params.opacity,"z-index":a["z-index"]});this.fontGridParentElement.setAttribute("style",b);this.updateFontGridContents();return this.fontGridParentElement;},updateFontGridContents:function(){html=ModularGrid.Grid.createFontGridHTML(ModularGrid.Grid.params);ModularGrid.Grid.fontGridParentElement.innerHTML=html;},createFontGridHTML:function(d){var c="";var a=ModularGrid.Utils.getClientHeight();var e=d.marginTop+d.lineHeight;var b={position:"absolute",height:0,opacity:d.opacity,"border-bottom":d.lineWidth+" "+d.lineStyle+" "+d.lineColor+" !important"};while(e<a){b.top=(e+"px");c+='<div style="'+ModularGrid.Utils.createStyleValue(b)+'"></div>';e+=d.lineHeight;}return c;},toggleVisibility:function(){this.showing=!this.showing;this.fontGridShowing=this.showing;this.eventSender.occurEvent("fontVisibilityChanged",this.fontGridShowing);this.horizontalGridShowing=this.showing;this.eventSender.occurEvent("horizontalVisibilityChanged",this.horizontalGridShowing);this.verticalGridShowing=this.showing;this.eventSender.occurEvent("verticalVisibilityChanged",this.verticalGridShowing);this.eventSender.occurEvent("visibilityChanged",this.showing);this.updateFontGridVisibility();this.updateHorizontalGridVisibility();this.updateVerticalGridVisibility();},updateFontGridVisibility:function(){if(this.fontGridShowing&&this.fontGridParentElement==null){this.createParentElement(this.params);}if(this.fontGridParentElement){this.fontGridParentElement.style.display=(this.fontGridShowing?"block":"none");}},updateHorizontalGridVisibility:function(){if(this.horizontalGridShowing&&this.horizontalGridParentElement==null){this.createParentElement(this.params);}if(this.horizontalGridParentElement){this.horizontalGridParentElement.style.display=(this.horizontalGridShowing?"block":"none");}},updateVerticalGridVisibility:function(){if(this.verticalGridShowing&&this.verticalGridParentElement==null){this.createParentElement(this.params);}if(this.verticalGridParentElement){this.verticalGridParentElement.style.display=(this.verticalGridShowing?"block":"none");}},toggleHorizontalGridVisibility:function(a){this.horizontalGridShowing=!this.horizontalGridShowing;if(!a){this.eventSender.occurEvent("horizontalVisibilityChanged",this.horizontalGridShowing);}this.updateShowing(a);this.updateHorizontalGridVisibility();},toggleVerticalGridVisibility:function(a){this.verticalGridShowing=!this.verticalGridShowing;if(!a){this.eventSender.occurEvent("verticalVisibilityChanged",this.verticalGridShowing);}this.updateShowing(a);this.updateVerticalGridVisibility();},toggleFontGridVisibility:function(a){this.fontGridShowing=!this.fontGridShowing;if(!a){this.eventSender.occurEvent("fontVisibilityChanged",this.fontGridShowing);}this.updateShowing(a);this.updateFontGridVisibility();},updateShowing:function(a){this.showing=this.fontGridShowing||this.horizontalGridShowing||this.verticalGridShowing;if(!a){this.eventSender.occurEvent("visibilityChanged",this.showing);}}};ModularGrid.Resizer={};ModularGrid.Resizer.defaults={shouldToggleSize:function(b){var a=!b.occured_in_form&&(b.shiftKey&&b.character=="r");return a;},changeTitle:true,sizes:[]};ModularGrid.Resizer={params:null,sizes:null,currentSizeIndex:null,title:null,eventSender:null,detectDefaultSize:function(){var a=null;if(typeof(window.innerWidth)=="number"&&typeof(window.innerHeight)=="number"){a={width:window.innerWidth,height:window.innerHeight};}else{if(document.documentElement&&(document.documentElement.clientWidth||document.documentElement.clientHeight)){a={width:document.documentElement.clientWidth,height:document.documentElement.clientHeight};}else{if(document.body&&(document.body.clientWidth||document.body.clientHeight)){a={width:document.body.clientWidth,height:document.body.clientHeight};}}}return a;},getDefaultSize:function(){return this.sizes[0];},getCurrentSize:function(){return this.sizes[this.currentSizeIndex];},init:function(g,c){this.params=ModularGrid.Utils.createParams(this.defaults,g);this.eventSender=new ModularGrid.Utils.EventSender();var f=this.detectDefaultSize();if(f){var e=[f],a=this.params.sizes;if(a.length){for(var b=0,d=a.length;b<d;b++){e[e.length]=a[b];}}else{if(c.params.minWidth){e[e.length]={width:c.params.minWidth};}}if(e.length>1){if(this.params.changeTitle){this.title=document.title;}this.sizes=e;this.currentSizeIndex=0;}}},sizeTitle:function(d){var b,f=this.sizes[d],c=this.sizes[0];if(f.title){b=f.title;}else{var e=(f.width?f.width:c.width);var a=(f.height?f.height:c.height);b=e+"×"+a;}return b;},selectSize:function(a){this.currentSizeIndex=a;this.applySize();},toggleSize:function(){if(this.currentSizeIndex!=null){this.currentSizeIndex++;this.currentSizeIndex=(this.currentSizeIndex==this.sizes.length?0:this.currentSizeIndex);this.applySize();}},applySize:function(){var c=(this.getCurrentSize().width?this.getCurrentSize().width:this.getDefaultSize().width);var a=(this.getCurrentSize().height?this.getCurrentSize().height:this.getDefaultSize().height);window.resizeTo(c,a);if(this.params.changeTitle){var b=(this.currentSizeIndex?this.title+" ("+c+"×"+a+")":this.title);if(this.getCurrentSize().title){b=this.getCurrentSize().title;}document.title=b;}this.eventSender.occurEvent("sizeChanged",this.currentSizeIndex);}};ModularGrid.GUI={params:null,togglerElement:null,paneElement:null,paneShowing:true,checkboxes:{},init:function(a){this.params=ModularGrid.Utils.createParams(this.defaults,a);},create:function(){this.createToggler();this.createPane();},createToggler:function(){var b=this;b.togglerElement=document.createElement("button");b.togglerElement.innerHTML=b.params.toggler.label;var a=ModularGrid.Utils.createStyleValue(b.params.toggler.style,{});b.togglerElement.setAttribute("style",a);ModularGrid.Utils.getDocumentBodyElement().appendChild(b.togglerElement);b.togglerElement.onclick=function(){b.paneShowing=!b.paneShowing;b.paneElement.style.display=(b.paneShowing?"block":"none");};},createPaneCheckboxItemHTML:function(e,b,d){var a=d||"";var c='<div style="width:auto;'+a+'">';c+='<input type="checkbox" id="'+e+'">';c+='<label for="'+e+'"> '+b+"</label>";c+="</div>";return c;},createPane:function(){var b=this;b.paneElement=document.createElement("div");var c=b.params.pane.style;var a=ModularGrid.Utils.createStyleValue(c,{});b.paneElement.setAttribute("style",a);var g={},e="";g.guides=b.generateId()+"guides";e+=b.createPaneCheckboxItemHTML(g.guides,b.params.pane.labels.guides);g.grid=b.generateId()+"grid";e+=b.createPaneCheckboxItemHTML(g.grid,b.params.pane.labels.grid.all,"margin:1em 0 0");g.font_grid=b.generateId()+"fontgrid";e+=b.createPaneCheckboxItemHTML(g.font_grid,b.params.pane.labels.grid.font,"padding:0 0 0 1em");g.vertical_grid=b.generateId()+"verticalgrid";e+=b.createPaneCheckboxItemHTML(g.vertical_grid,b.params.pane.labels.grid.vertical,"padding:0 0 0 1em");g.horizontal_grid=b.generateId()+"horizontalgrid";e+=b.createPaneCheckboxItemHTML(g.horizontal_grid,b.params.pane.labels.grid.horizontal,"padding:0 0 1em 1em");g.image=b.generateId()+"image";e+=b.createPaneCheckboxItemHTML(g.image,b.params.pane.labels.image,"margin:0 0 1em");if(ModularGrid.Resizer.sizes.length){e+='<div style="width:auto">';g.sizes=b.generateId()+"sizes";e+='<select size="1" id="'+g.sizes+'"><option>'+this.params.pane.labels.size+"</option></select>";e+="</div>";}e+='<div style="width:auto;margin:1em 0 0">';g.opacity_down=b.generateId()+"opacitydown";g.opacity_up=b.generateId()+"opacityup";g.opacity_value=b.generateId()+"opacityvalue";if(b.params.pane.labels.opacity){e+=b.params.pane.labels.opacity+"<br>";}e+='<button id="'+g.opacity_down+'">-</button> ';e+='<span id="'+g.opacity_value+'">'+ModularGrid.OpacityChanger.params.opacity.toFixed(2)+"</span>";e+=' <button id="'+g.opacity_up+'">+</button>';e+="</div>";b.paneElement.innerHTML=e;ModularGrid.Utils.getDocumentBodyElement().appendChild(this.paneElement);b.checkboxes.guides=document.getElementById(g.guides);if(b.checkboxes.guides){b.checkboxes.guides.onclick=function(){ModularGrid.Guides.toggleVisibility();};ModularGrid.Guides.eventSender.addHandler("visibilityChanged",function(i){b.checkboxes.guides.checked=i;});}b.checkboxes.grid=document.getElementById(g.grid);if(b.checkboxes.grid){b.checkboxes.grid.onclick=function(){ModularGrid.Grid.toggleVisibility();};ModularGrid.Grid.eventSender.addHandler("visibilityChanged",function(i){b.checkboxes.grid.checked=i;});}b.checkboxes.font_grid=document.getElementById(g.font_grid);if(b.checkboxes.font_grid){b.checkboxes.font_grid.onclick=function(){ModularGrid.Grid.toggleFontGridVisibility();};ModularGrid.Grid.eventSender.addHandler("fontVisibilityChanged",function(i){b.checkboxes.font_grid.checked=i;});}b.checkboxes.vertical_grid=document.getElementById(g.vertical_grid);if(b.checkboxes.vertical_grid){b.checkboxes.vertical_grid.onclick=function(){ModularGrid.Grid.toggleVerticalGridVisibility();};ModularGrid.Grid.eventSender.addHandler("verticalVisibilityChanged",function(i){b.checkboxes.vertical_grid.checked=i;});}b.checkboxes.horizontal_grid=document.getElementById(g.horizontal_grid);if(b.checkboxes.horizontal_grid){b.checkboxes.horizontal_grid.onclick=function(){ModularGrid.Grid.toggleHorizontalGridVisibility();};ModularGrid.Grid.eventSender.addHandler("horizontalVisibilityChanged",function(i){b.checkboxes.horizontal_grid.checked=i;});}b.checkboxes.image=document.getElementById(g.image);if(b.checkboxes.image){b.checkboxes.image.onclick=function(){ModularGrid.Image.toggleVisibility();};ModularGrid.Image.eventSender.addHandler("visibilityChanged",function(i){b.checkboxes.image.checked=i;});}b.checkboxes.sizes=document.getElementById(g.sizes);if(b.checkboxes.sizes){var f="";for(var d=0,h=ModularGrid.Resizer.sizes.length;d<h;d++){f+="<option>"+ModularGrid.Resizer.sizeTitle(d)+"</option>";}b.checkboxes.sizes.innerHTML+=f;b.checkboxes.sizes.onchange=function(){ModularGrid.Resizer.selectSize(b.checkboxes.sizes.selectedIndex-1);};ModularGrid.Resizer.eventSender.addHandler("sizeChanged",function(i){b.checkboxes.sizes.selectedIndex=i+1;});}b.checkboxes.opacity_value=document.getElementById(g.opacity_value);if(b.checkboxes.opacity_value){ModularGrid.OpacityChanger.eventSender.addHandler("opacityChanged",function(i){b.checkboxes.opacity_value.innerHTML=i.toFixed(2);});}b.checkboxes.opacity_up=document.getElementById(g.opacity_up);if(b.checkboxes.opacity_up){b.checkboxes.opacity_up.onclick=function(){ModularGrid.OpacityChanger.stepUpOpacity();};}b.checkboxes.opacity_down=document.getElementById(g.opacity_down);if(b.checkboxes.opacity_down){b.checkboxes.opacity_down.onclick=function(){ModularGrid.OpacityChanger.stepDownOpacity();};}},generateId:function(){var b="_mdg",a=new Date();a=b+a.getTime();return a;}};ModularGrid.GUI.defaults={toggler:{style:{position:"absolute",right:"10px",top:"10px","z-index":1000},label:"Настройки сетки"},pane:{style:{position:"absolute",right:"10px",top:"35px",width:"auto",height:"auto",margin:"0",padding:"7px 5px",background:"#FFF",border:"2px solid #CCC","z-index":1000},labels:{guides:'гайды <span style="color:#555;font-size:80%;margin-left:0.75em">Ctrl + ;</span>',size:"выберите размер (Shift + r)",grid:{all:'сетка <span style="color:#555;font-size:80%;margin-left:0.75em">Ctrl + \'</span>',font:'шрифтовая <span style="color:#555;font-size:80%;margin-left:0.75em">Shift + f</span>',vertical:'вертикальная <span style="color:#555;font-size:80%;margin-left:0.75em">Shift + v</span>',horizontal:'горизонтальная <span style="color:#555;font-size:80%;margin-left:0.75em">Shift + h</span>'},image:'изображение-макет <span style="color:#555;font-size:80%;margin-left:0.75em">Ctrl + \\</span>',opacity:"прозрачность"}}};ModularGrid.keyDownEventProvider=null;ModularGrid.resizeEventProvider=null;ModularGrid.getResizeEventProvider=function(){if(this.resizeEventProvider==null){this.resizeEventProvider=new ModularGrid.Utils.EventProvider("resize",function(a){return{event:a};},"window");}return this.resizeEventProvider;};ModularGrid.getKeyDownEventProvider=function(){if(this.keyDownEventProvider==null){this.keyDownEventProvider=new ModularGrid.Utils.EventProvider("keydown",function(c){var b=(c||window.event);var e=(b.keyCode?b.keyCode:(b.which?b.which:b.keyChar));var d=String.fromCharCode(e).toLowerCase();var f={"`":"~","1":"!","2":"@","3":"#","4":"$","5":"%","6":"^","7":"&","8":"*","9":"(","0":")","-":"_","=":"+",";":":","'":'"',",":"<",".":">","/":"?","\\":"|"};if(b.shiftKey&&f[d]){d=f[d];}var a=(b.target?b.target:b.srcElement);if(a&&a.nodeType==3){a=a.parentNode;}var g=(a&&(a.tagName=="INPUT"||a.tagName=="TEXTAREA"));return{occured_in_form:g,character:d,keyCode:e,altKey:b.altKey,shiftKey:b.shiftKey,ctrlKey:b.ctrlKey,event:b};});}return this.keyDownEventProvider;};ModularGrid.init=function(f){var m=this;var k=ModularGrid.Utils.CookieStore;this.OpacityChanger.init(f.opacity);var i=new ModularGrid.Utils.StateChanger(this.getKeyDownEventProvider(),this.OpacityChanger.params.shouldStepUpOpacity,function(){m.OpacityChanger.stepUpOpacity();});var j=new ModularGrid.Utils.StateChanger(this.getKeyDownEventProvider(),this.OpacityChanger.params.shouldStepDownOpacity,function(){m.OpacityChanger.stepDownOpacity();});this.OpacityChanger.eventSender.addHandler("opacityChanged",function(n){k.setValue("o",n);});this.Image.init(f.image);this.OpacityChanger.eventSender.addHandler("opacityChanged",this.Image.opacityHandler);var b=new ModularGrid.Utils.StateChanger(this.getKeyDownEventProvider(),this.Image.params.shouldToggleVisibility,function(){m.Image.toggleVisibility();});m.Guides.init(f.guides);var g=new ModularGrid.Utils.StateChanger(m.getKeyDownEventProvider(),m.Guides.params.shouldToggleVisibility,function(){m.Guides.toggleVisibility();});m.Guides.eventSender.addHandler("visibilityChanged",function(n){k.setValue("g",n);});this.Grid.init(f.grid);this.OpacityChanger.eventSender.addHandler("opacityChanged",this.Grid.opacityHandler);var a=new ModularGrid.Utils.StateChanger(this.getKeyDownEventProvider(),this.Grid.params.shouldToggleVisibility,function(){m.Grid.toggleVisibility();});m.Grid.eventSender.addHandler("visibilityChanged",function(n){k.setValue("v",m.Grid.verticalGridShowing);k.setValue("h",m.Grid.horizontalGridShowing);k.setValue("f",m.Grid.fontGridShowing);});var e=new ModularGrid.Utils.StateChanger(this.getKeyDownEventProvider(),this.Grid.params.shouldToggleFontGridVisibility,function(){m.Grid.toggleFontGridVisibility();});m.Grid.eventSender.addHandler("fontVisibilityChanged",function(n){k.setValue("f",m.Grid.fontGridShowing);});var d=new ModularGrid.Utils.StateChanger(this.getKeyDownEventProvider(),this.Grid.params.shouldToggleHorizontalGridVisibility,function(){m.Grid.toggleHorizontalGridVisibility();});m.Grid.eventSender.addHandler("horizontalVisibilityChanged",function(n){k.setValue("h",m.Grid.horizontalGridShowing);});var h=new ModularGrid.Utils.StateChanger(this.getKeyDownEventProvider(),this.Grid.params.shouldToggleVerticalGridVisibility,function(){m.Grid.toggleVerticalGridVisibility();});m.Grid.eventSender.addHandler("verticalVisibilityChanged",function(n){k.setValue("v",m.Grid.verticalGridShowing);});m.Resizer.init(f.resizer,m.Grid);var l=new ModularGrid.Utils.StateChanger(m.getKeyDownEventProvider(),m.Resizer.params.shouldToggleSize,function(){m.Resizer.toggleSize();});ModularGrid.getResizeEventProvider().addHandler(function(o){var n=ModularGrid.Utils.getClientHeight()+"px";ModularGrid.Utils.updateCSSHeight(ModularGrid.Grid.horizontalGridParentElement,n,ModularGrid.Grid.updateHorizontalGridContents);ModularGrid.Utils.updateCSSHeight(ModularGrid.Grid.fontGridParentElement,n,ModularGrid.Grid.updateFontGridContents);ModularGrid.Utils.updateCSSHeight(ModularGrid.Grid.verticalGridParentElement,n,ModularGrid.Grid.updateVerticalGridContents);ModularGrid.Utils.updateCSSHeight(ModularGrid.Guides.parentElement,n);});m.GUI.init(f.gui);m.GUI.create();if(k.getValue("i")=="true"){m.Image.toggleVisibility();}var c=parseFloat(k.getValue("o"));if(!isNaN(c)){m.OpacityChanger.setOpacity(c);}if(k.getValue("g")=="true"){m.Guides.toggleVisibility();}if(k.getValue("v")=="true"){m.Grid.toggleVerticalGridVisibility(true);}if(k.getValue("h")=="true"){m.Grid.toggleHorizontalGridVisibility(true);}if(k.getValue("f")=="true"){m.Grid.toggleFontGridVisibility(true);}m.Grid.updateShowing(true);};/** @include "index.js" */
|
2
|
+
|
3
|
+
/**
|
4
|
+
* Настройки.
|
5
|
+
*
|
6
|
+
* Любые настройки ниже - настройки по-умолчанию, вы можете удалить их,
|
7
|
+
* если они вам не нужны.
|
8
|
+
*/
|
9
|
+
ModularGrid.init(
|
10
|
+
{
|
11
|
+
// настройки гайдов
|
12
|
+
guides: {
|
13
|
+
/**
|
14
|
+
* Функция вызывается каждый раз при нажатии клавиш в браузере.
|
15
|
+
* @param {Object} params информация о нажатой комбинации клавиш (params.ctrlKey, params.altKey, params.keyCode)
|
16
|
+
* @return {Boolean} true, если нужно показать/скрыть направляющие
|
17
|
+
*/
|
18
|
+
shouldToggleVisibility:
|
19
|
+
function (params) {
|
20
|
+
// Ctrl + ;
|
21
|
+
var result = !params.occured_in_form && (params.ctrlKey && (params.character == ';' || params.keyCode == 186));
|
22
|
+
return result;
|
23
|
+
},
|
24
|
+
|
25
|
+
/**
|
26
|
+
* Стиль линий-направляющих.
|
27
|
+
* Значения аналогичны значениям CSS-свойства border-style.
|
28
|
+
* @type String
|
29
|
+
*/
|
30
|
+
lineStyle: 'solid',
|
31
|
+
/**
|
32
|
+
* Цвет линий-направляющих.
|
33
|
+
* Значения аналогичны значениям CSS-свойства border-color.
|
34
|
+
* @type String
|
35
|
+
*/
|
36
|
+
lineColor: '#9dffff',
|
37
|
+
/**
|
38
|
+
* Толщина линий-направляющих.
|
39
|
+
* Значения аналогичны значениям CSS-свойства border-width.
|
40
|
+
* @type String
|
41
|
+
*/
|
42
|
+
lineWidth: '1px',
|
43
|
+
|
44
|
+
/**
|
45
|
+
* значения CSS-свойства z-index HTML-контейнера всех направляющих
|
46
|
+
* @type Number
|
47
|
+
*/
|
48
|
+
'z-index': 255,
|
49
|
+
|
50
|
+
/**
|
51
|
+
* Массив настроек направляющих (задается в формате items:[{настройки-1},{настройки-2},...,{настройки-N}]).
|
52
|
+
* @type Array
|
53
|
+
*/
|
54
|
+
items: [
|
55
|
+
{
|
56
|
+
/**
|
57
|
+
* Две центрированные направляющие
|
58
|
+
*
|
59
|
+
* Ширина задается параметром width (значения аналогичны значениям CSS-свойства width),
|
60
|
+
* две направляющие рисуются слева и справа от центрированной области заданной ширины.
|
61
|
+
*/
|
62
|
+
type: 'center',
|
63
|
+
width: '1050px'
|
64
|
+
},
|
65
|
+
{
|
66
|
+
/**
|
67
|
+
* Одна вертикальная направляющая
|
68
|
+
*
|
69
|
+
* Можно задать либо отступ от левого края рабочей области браузера параметром left,
|
70
|
+
* либо отступ от правого края рабочей области браузера параметром right.
|
71
|
+
* Значения параметров аналогичны значениям CSS-свойства left.
|
72
|
+
*/
|
73
|
+
type: 'vertical',
|
74
|
+
left: '33%'
|
75
|
+
},
|
76
|
+
{
|
77
|
+
/**
|
78
|
+
* Одна горизонтальная направляющая
|
79
|
+
*
|
80
|
+
* Можно задать либо отступ от верхнего края рабочей области браузера параметром top,
|
81
|
+
* либо отступ от нижнего края рабочей области браузера параметром bottom.
|
82
|
+
* Значения параметров аналогичны значениям CSS-свойства top.
|
83
|
+
*/
|
84
|
+
type: 'horizontal',
|
85
|
+
top: '65px'
|
86
|
+
}
|
87
|
+
]
|
88
|
+
},
|
89
|
+
|
90
|
+
grid: {
|
91
|
+
/**
|
92
|
+
* Функция вызывается каждый раз при нажатии клавиш в браузере.
|
93
|
+
* @param {Object} params информация о нажатой комбинации клавиш (params.ctrlKey, params.altKey, params.keyCode)
|
94
|
+
* @return {Boolean} true, если нужно показать/скрыть вертикальную сетку
|
95
|
+
*/
|
96
|
+
shouldToggleVerticalGridVisibility:
|
97
|
+
function (params) {
|
98
|
+
// Shift + v
|
99
|
+
var result = !params.occured_in_form && (params.shiftKey && params.character == 'v' );
|
100
|
+
return result;
|
101
|
+
},
|
102
|
+
|
103
|
+
/**
|
104
|
+
* Функция вызывается каждый раз при нажатии клавиш в браузере.
|
105
|
+
* @param {Object} params информация о нажатой комбинации клавиш (params.ctrlKey, params.altKey, params.keyCode)
|
106
|
+
* @return {Boolean} true, если нужно показать/скрыть горизонтальную сетку
|
107
|
+
*/
|
108
|
+
shouldToggleHorizontalGridVisibility:
|
109
|
+
function (params) {
|
110
|
+
// Shift + h
|
111
|
+
var result = !params.occured_in_form && (params.shiftKey && params.character == 'h' );
|
112
|
+
return result;
|
113
|
+
},
|
114
|
+
|
115
|
+
/**
|
116
|
+
* Функция вызывается каждый раз при нажатии клавиш в браузере.
|
117
|
+
* @param {Object} params информация о нажатой комбинации клавиш (params.ctrlKey, params.altKey, params.keyCode)
|
118
|
+
* @return {Boolean} true, если нужно показать/скыть шрифтовую сетку
|
119
|
+
*/
|
120
|
+
shouldToggleFontGridVisibility:
|
121
|
+
function (params) {
|
122
|
+
// Shift + f
|
123
|
+
var result = !params.occured_in_form && (params.shiftKey && params.character == 'f' );
|
124
|
+
return result;
|
125
|
+
},
|
126
|
+
|
127
|
+
/**
|
128
|
+
* Функция вызывается каждый раз при нажатии клавиш в браузере.
|
129
|
+
* @param {Object} params информация о нажатой комбинации клавиш (params.ctrlKey, params.altKey, params.keyCode)
|
130
|
+
* @return {Boolean} true, если нужно показать/скрыть сетку целиком
|
131
|
+
*/
|
132
|
+
shouldToggleVisibility:
|
133
|
+
function (params) {
|
134
|
+
// Ctrl + '
|
135
|
+
// скрывает если хотя бы один из элементов сетки показан (шрифтовая, колонки или строки)
|
136
|
+
var result = !params.occured_in_form && (params.ctrlKey && (params.character == "'" || params.keyCode == 222));
|
137
|
+
return result;
|
138
|
+
},
|
139
|
+
|
140
|
+
'z-index': 255,
|
141
|
+
|
142
|
+
/**
|
143
|
+
* Цвет фона колонок и строк модульной сетки.
|
144
|
+
* Цвет линий шрифтовой сетки задаётся отдельно.
|
145
|
+
* @see lineColor
|
146
|
+
* @type String
|
147
|
+
*/
|
148
|
+
color: "#F00",
|
149
|
+
|
150
|
+
/**
|
151
|
+
* Центрировать ли сетку
|
152
|
+
* @type Boolean
|
153
|
+
*/
|
154
|
+
centered: true,
|
155
|
+
|
156
|
+
prependGutter: false,
|
157
|
+
appendGutter: false,
|
158
|
+
|
159
|
+
gutter: 16,
|
160
|
+
|
161
|
+
/**
|
162
|
+
* Количество вертикальных модулей (столбцов сетки)
|
163
|
+
* @see lineHeight
|
164
|
+
* @type Number
|
165
|
+
*/
|
166
|
+
vDivisions: 12,
|
167
|
+
|
168
|
+
/**
|
169
|
+
* Высота строки модульной сетки в строках модульной сетки.
|
170
|
+
* @see lineHeight
|
171
|
+
* @type Number
|
172
|
+
*/
|
173
|
+
hDivisions: 3,
|
174
|
+
|
175
|
+
/**
|
176
|
+
* Отступ от верхнего края рабочей области браузера до шрифтовой и горизонтальной сетки в пикселах.
|
177
|
+
* @type Number
|
178
|
+
*/
|
179
|
+
marginTop: 0,
|
180
|
+
/**
|
181
|
+
* Отступ от левого края рабочей области браузера до сетки.
|
182
|
+
* Значения аналогичны значениям CSS-свойства margin-left
|
183
|
+
* @type Number
|
184
|
+
*/
|
185
|
+
marginLeft: '0px',
|
186
|
+
/**
|
187
|
+
* Отступ от правого края рабочей области браузера до сетки.
|
188
|
+
* Значения аналогичны значениям CSS-свойства margin-right
|
189
|
+
* @type Number
|
190
|
+
*/
|
191
|
+
marginRight: '0px',
|
192
|
+
|
193
|
+
/**
|
194
|
+
* Ширина контейнера с сеткой.
|
195
|
+
* Для резиновой сетки задавать как '100%' и обязательно указывать minWidth
|
196
|
+
* Для сетки с фиксированной шириной указывать только число, например 640 для ширины 640 пикселов
|
197
|
+
* @type Number
|
198
|
+
*/
|
199
|
+
width: 978,
|
200
|
+
/**
|
201
|
+
* Минимальная ширина контейнера с сеткой.
|
202
|
+
* Указывать только число, например 640 для ширины 640 пикселов
|
203
|
+
* @type Number
|
204
|
+
*/
|
205
|
+
minWidth: null,
|
206
|
+
/**
|
207
|
+
* Максимальная ширина контейнера с сеткой.
|
208
|
+
* Указывать только число, например 1240 для ширины 1240 пикселов
|
209
|
+
* @type Number
|
210
|
+
*/
|
211
|
+
maxWidth: null,
|
212
|
+
|
213
|
+
/**
|
214
|
+
* Высота строки в пикселах.
|
215
|
+
* Используется для рисования шрифтовой сетки.
|
216
|
+
* Сама линия сетки начинает рисоваться на (lineHeight + 1) пикселе
|
217
|
+
* @type Number
|
218
|
+
*/
|
219
|
+
lineHeight: 18,
|
220
|
+
|
221
|
+
// стиль линий шрифтовой сетки
|
222
|
+
/**
|
223
|
+
* Стиль линий шрифтовой сетки.
|
224
|
+
* Значения аналогичны значениям CSS-свойства border-style
|
225
|
+
* @type String
|
226
|
+
*/
|
227
|
+
lineStyle: 'solid',
|
228
|
+
/**
|
229
|
+
* Толщина линий шрифтовой сетки.
|
230
|
+
* Значения аналогичны значениям CSS-свойства border-width
|
231
|
+
* @type String
|
232
|
+
*/
|
233
|
+
lineWidth: '1px',
|
234
|
+
/**
|
235
|
+
* Цвет линий шрифтовой сетки.
|
236
|
+
* Значения аналогичны значениям CSS-свойства border-color
|
237
|
+
* @type String
|
238
|
+
*/
|
239
|
+
lineColor: "#555"
|
240
|
+
},
|
241
|
+
|
242
|
+
resizer: {
|
243
|
+
/**
|
244
|
+
* Функция вызывается каждый раз при нажатии клавиш в браузере.
|
245
|
+
* @param {Object} params информация о нажатой комбинации клавиш (params.ctrlKey, params.altKey, params.keyCode)
|
246
|
+
* @return {Boolean} true, если нужно изменить размер на следующий из заданных
|
247
|
+
*/
|
248
|
+
shouldToggleSize:
|
249
|
+
function (params) {
|
250
|
+
// Shift + r
|
251
|
+
var result = !params.occured_in_form && (params.shiftKey && params.character == 'r');
|
252
|
+
return result;
|
253
|
+
},
|
254
|
+
|
255
|
+
/**
|
256
|
+
* Нужно ли в title окна указывать разрешение
|
257
|
+
* @type Boolean
|
258
|
+
*/
|
259
|
+
changeTitle: true,
|
260
|
+
|
261
|
+
sizes:
|
262
|
+
[
|
263
|
+
{
|
264
|
+
width: 640,
|
265
|
+
height: 480
|
266
|
+
},
|
267
|
+
{
|
268
|
+
width: 800,
|
269
|
+
height: 600
|
270
|
+
},
|
271
|
+
{
|
272
|
+
width: 1024,
|
273
|
+
height: 768
|
274
|
+
},
|
275
|
+
{
|
276
|
+
width: 1280,
|
277
|
+
height: 1024
|
278
|
+
}
|
279
|
+
]
|
280
|
+
},
|
281
|
+
|
282
|
+
// настройки макета-изображения
|
283
|
+
image: {
|
284
|
+
/**
|
285
|
+
* Функция вызывается каждый раз при нажатии клавиш в браузере.
|
286
|
+
* @param {Object} params информация о нажатой комбинации клавиш (params.ctrlKey, params.altKey, params.keyCode)
|
287
|
+
* @return {Boolean} true, если нужно показать/скрыть изображение
|
288
|
+
*/
|
289
|
+
shouldToggleVisibility:
|
290
|
+
function (params) {
|
291
|
+
// Ctrl + \
|
292
|
+
var result = !params.occured_in_form && (params.ctrlKey && (params.character == '\\' || params.keyCode == 28 || params.keyCode == 220));
|
293
|
+
return result;
|
294
|
+
},
|
295
|
+
|
296
|
+
/**
|
297
|
+
* Значения CSS-свойства z-index HTML-контейнера изображения
|
298
|
+
* @type Number
|
299
|
+
*/
|
300
|
+
'z-index': 255,
|
301
|
+
|
302
|
+
/**
|
303
|
+
* Начальное значение прозрачности изображения от 0 до 1 (0 - абсолютно прозрачное, 1 - абсолютно непрозрачное)
|
304
|
+
* @type Number
|
305
|
+
*/
|
306
|
+
opacity: 0.85,
|
307
|
+
/**
|
308
|
+
* Шаг изменения значения прозрачности для изображения от 0 до 1
|
309
|
+
* @type Number
|
310
|
+
*/
|
311
|
+
opacityStep: 0.05,
|
312
|
+
|
313
|
+
/**
|
314
|
+
* Центрировать ли изображение относительно ширины рабочей области браузера
|
315
|
+
* @type Boolean
|
316
|
+
*/
|
317
|
+
centered: true,
|
318
|
+
|
319
|
+
/**
|
320
|
+
* Отступ от верхнего края рабочей области браузера до изображения в пикселах
|
321
|
+
* @type Number
|
322
|
+
*/
|
323
|
+
marginTop: 100,
|
324
|
+
/**
|
325
|
+
* Отступ от левого края рабочей области браузера до изображения.
|
326
|
+
* Возможные значения аналогичны значениям CSS-свойства margin-left
|
327
|
+
* @type Number
|
328
|
+
*/
|
329
|
+
marginLeft: '0px',
|
330
|
+
/**
|
331
|
+
* Отступ от правого края рабочей области браузера до изображения.
|
332
|
+
* Возможные значения аналогичны значениям CSS-свойства margin-left
|
333
|
+
* @type Number
|
334
|
+
*/
|
335
|
+
marginRight: '0px',
|
336
|
+
|
337
|
+
/**
|
338
|
+
* URL файла изображения
|
339
|
+
* @type String
|
340
|
+
*/
|
341
|
+
src: 'design.png',
|
342
|
+
|
343
|
+
/**
|
344
|
+
* Ширина изображения в пикселах
|
345
|
+
* @type Number
|
346
|
+
*/
|
347
|
+
width: 300,
|
348
|
+
/**
|
349
|
+
* Высота изображения в пикселах
|
350
|
+
* @type Number
|
351
|
+
*/
|
352
|
+
height: 356
|
353
|
+
},
|
354
|
+
|
355
|
+
opacity: {
|
356
|
+
/**
|
357
|
+
* Функция вызывается каждый раз при нажатии клавиш в браузере.
|
358
|
+
* @param {Object} params информация о нажатой комбинации клавиш (params.ctrlKey, params.altKey, params.keyCode)
|
359
|
+
* @return {Boolean} true, если нужно сделать изображение менее прозрачным на opacityStep процентов
|
360
|
+
*/
|
361
|
+
shouldStepUpOpacity:
|
362
|
+
function (params) {
|
363
|
+
// Shift + ]
|
364
|
+
var result = !params.occured_in_form && (params.shiftKey && params.keyCode == 221);
|
365
|
+
return result;
|
366
|
+
},
|
367
|
+
/**
|
368
|
+
* Функция вызывается каждый раз при нажатии клавиш в браузере.
|
369
|
+
* @param {Object} params информация о нажатой комбинации клавиш (params.ctrlKey, params.altKey, params.keyCode)
|
370
|
+
* @return {Boolean} true, если нужно сделать изображение более прозрачным на opacityStep процентов
|
371
|
+
*/
|
372
|
+
shouldStepDownOpacity:
|
373
|
+
function (params) {
|
374
|
+
// Shift + [
|
375
|
+
var result = !params.occured_in_form && (params.shiftKey && params.keyCode == 219);
|
376
|
+
return result;
|
377
|
+
},
|
378
|
+
|
379
|
+
/**
|
380
|
+
* Начальное значение прозрачности изображения от 0 до 1 (0 - абсолютно прозрачное, 1 - абсолютно непрозрачное)
|
381
|
+
* @type Number
|
382
|
+
*/
|
383
|
+
opacity: 0.25,
|
384
|
+
/**
|
385
|
+
* Шаг изменения значения прозрачности для изображения от 0 до 1
|
386
|
+
* @type Number
|
387
|
+
*/
|
388
|
+
opacityStep: 0.05
|
389
|
+
},
|
390
|
+
|
391
|
+
gui: {
|
392
|
+
toggler: {
|
393
|
+
style: {
|
394
|
+
position: "absolute",
|
395
|
+
right: '10px',
|
396
|
+
top: '10px',
|
397
|
+
'z-index': 1000
|
398
|
+
},
|
399
|
+
|
400
|
+
label: "Настройки сетки"
|
401
|
+
},
|
402
|
+
|
403
|
+
pane: {
|
404
|
+
style: {
|
405
|
+
position: "absolute",
|
406
|
+
right: '10px',
|
407
|
+
top: '35px',
|
408
|
+
|
409
|
+
width: 'auto',
|
410
|
+
height: 'auto',
|
411
|
+
|
412
|
+
margin: '0',
|
413
|
+
padding: '7px 5px',
|
414
|
+
|
415
|
+
background: '#FFF',
|
416
|
+
border: '2px solid #CCC',
|
417
|
+
|
418
|
+
'z-index': 1000
|
419
|
+
},
|
420
|
+
|
421
|
+
labels: {
|
422
|
+
guides: 'гайды <span style="color:#555;font-size:80%;margin-left:0.75em">Ctrl + ;</span>',
|
423
|
+
size: 'выберите размер (Shift + r)',
|
424
|
+
grid: {
|
425
|
+
all: 'сетка <span style="color:#555;font-size:80%;margin-left:0.75em">Ctrl + \'</span>',
|
426
|
+
font: 'шрифтовая <span style="color:#555;font-size:80%;margin-left:0.75em">Shift + f</span>',
|
427
|
+
vertical: 'вертикальная <span style="color:#555;font-size:80%;margin-left:0.75em">Shift + v</span>',
|
428
|
+
horizontal: 'горизонтальная <span style="color:#555;font-size:80%;margin-left:0.75em">Shift + h</span>'
|
429
|
+
},
|
430
|
+
image: 'изображение-макет <span style="color:#555;font-size:80%;margin-left:0.75em">Ctrl + \</span>',
|
431
|
+
opacity: 'прозрачность'
|
432
|
+
}
|
433
|
+
}
|
434
|
+
}
|
435
|
+
|
436
|
+
}
|
437
|
+
);
|
metadata
ADDED
@@ -0,0 +1,70 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: modulargrid-rails
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: 0.0.3
|
5
|
+
prerelease:
|
6
|
+
platform: ruby
|
7
|
+
authors:
|
8
|
+
- Alex Timofeev
|
9
|
+
autorequire:
|
10
|
+
bindir: bin
|
11
|
+
cert_chain: []
|
12
|
+
date: 2012-10-21 00:00:00.000000000 Z
|
13
|
+
dependencies:
|
14
|
+
- !ruby/object:Gem::Dependency
|
15
|
+
name: railties
|
16
|
+
requirement: !ruby/object:Gem::Requirement
|
17
|
+
none: false
|
18
|
+
requirements:
|
19
|
+
- - ~>
|
20
|
+
- !ruby/object:Gem::Version
|
21
|
+
version: '3.1'
|
22
|
+
type: :runtime
|
23
|
+
prerelease: false
|
24
|
+
version_requirements: !ruby/object:Gem::Requirement
|
25
|
+
none: false
|
26
|
+
requirements:
|
27
|
+
- - ~>
|
28
|
+
- !ruby/object:Gem::Version
|
29
|
+
version: '3.1'
|
30
|
+
description: Rails wrapper implementation of Modulargrid.js
|
31
|
+
email:
|
32
|
+
- atimofeev@reactant.ru
|
33
|
+
executables: []
|
34
|
+
extensions: []
|
35
|
+
extra_rdoc_files: []
|
36
|
+
files:
|
37
|
+
- .gitignore
|
38
|
+
- Gemfile
|
39
|
+
- LICENSE.txt
|
40
|
+
- README.md
|
41
|
+
- Rakefile
|
42
|
+
- lib/modulargrid-rails.rb
|
43
|
+
- lib/modulargrid-rails/version.rb
|
44
|
+
- modulargrid-rails.gemspec
|
45
|
+
- vendor/assets/javascripts/modulargrid.js
|
46
|
+
homepage: https://github.com/ATimofeev/modulargrid-rails
|
47
|
+
licenses: []
|
48
|
+
post_install_message:
|
49
|
+
rdoc_options: []
|
50
|
+
require_paths:
|
51
|
+
- lib
|
52
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
53
|
+
none: false
|
54
|
+
requirements:
|
55
|
+
- - ! '>='
|
56
|
+
- !ruby/object:Gem::Version
|
57
|
+
version: '0'
|
58
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
59
|
+
none: false
|
60
|
+
requirements:
|
61
|
+
- - ! '>='
|
62
|
+
- !ruby/object:Gem::Version
|
63
|
+
version: '0'
|
64
|
+
requirements: []
|
65
|
+
rubyforge_project: modulargrid-rails
|
66
|
+
rubygems_version: 1.8.24
|
67
|
+
signing_key:
|
68
|
+
specification_version: 3
|
69
|
+
summary: Modulargrid.js Rails implementation
|
70
|
+
test_files: []
|