Browse files

- reorganized folders (sorry Aaron :)), added scripts.json and build…

….lua to build your art.js file.
  • Loading branch information...
1 parent 54d9c05 commit b86d7b18b4c450d28f4c83afe489e7774e49db25 @kamicane kamicane committed Apr 2, 2009
View
1 .gitignore
@@ -0,0 +1 @@
+art.js
View
0 fonts/mgopen.license.txt → Source/Fonts/MgOpen.License.txt
File renamed without changes.
View
0 fonts/moderna.bold.js → Source/Fonts/MgOpen.Moderna.Bold.js
File renamed without changes.
View
0 fonts/moderna.js → Source/Fonts/MgOpen.Moderna.js
File renamed without changes.
View
7 art.adapter.canvas.js → Source/Paint/ART.Adapter.Canvas.js
@@ -1,4 +1,9 @@
-// Canvas Adapter.
+/*
+Script: ART.Adapter.Canvas.js
+
+License:
+ MIT-style license.
+*/
ART.Adapter.Canvas = new Class({
View
7 art.adapter.js → Source/Paint/ART.Adapter.js
@@ -1,4 +1,9 @@
-// art.adapter.js
+/*
+Script: ART.Adapter.js
+
+License:
+ MIT-style license.
+*/
// Generic adapter base Class.
View
7 art.paint.js → Source/Paint/ART.Paint.js
@@ -1,4 +1,9 @@
-// art.paint.js
+/*
+Script: ART.Paint.js
+
+License:
+ MIT-style license.
+*/
// kappa!
View
7 art.shape.js → Source/Paint/ART.Shape.js
@@ -1,4 +1,9 @@
-// art.shape.js
+/*
+Script: ART.Shape.js
+
+License:
+ MIT-style license.
+*/
// ART.Shape Class stub.
// Will probably support defining shapes as json at some point.
View
7 art.text.js → Source/Paint/ART.Text.js
@@ -1,4 +1,9 @@
-// art.font.js
+/*
+Script: ART.Font.js
+
+License:
+ MIT-style license.
+*/
// ==========================================
// This file implements code from Cufón
View
74 Source/scripts.json
@@ -0,0 +1,74 @@
+{
+
+ "Base": {
+
+ "ART": {
+ "deps": [],
+ "desc": "The base ART Class."
+ },
+
+ "ART.Widget": {
+ "deps": ["ART"],
+ "desc": "Barebones ART Widget."
+ }
+
+ },
+
+ "Paint": {
+
+ "ART.Adapter": {
+ "deps": ["ART"],
+ "desc": "ART Graphic Adapter."
+ },
+
+ "ART.Adapter.Canvas": {
+ "deps": ["ART.Adapter"],
+ "desc": "Adds Canvas support to ART.Adapter."
+ },
+
+ "ART.Paint": {
+ "deps": ["ART.Adapter.Canvas"],
+ "desc": "Public Class for painting stuff. Extends ART.Adapter."
+ },
+
+ "ART.Shape": {
+ "deps": ["ART.Paint"],
+ "desc": "Adds some shapes, and implements the shape method to ART.Paint."
+ },
+
+ "ART.Text": {
+ "deps": ["ART.Paint"],
+ "desc": "Adds font drawing support (thanks to Cufón), and implements the text method to ART.Paint."
+ }
+
+ },
+
+ "Fonts": {
+
+ "MgOpen.Moderna": {
+ "deps": ["ART.Text"],
+ "desc": "Open source font to use with ART.Paint."
+ },
+
+ "MgOpen.Moderna.Bold": {
+ "deps": ["ART.Text"],
+ "desc": "Bold version of the Moderna Font."
+ }
+
+ },
+
+ "Widgets": {
+
+ "ART.Widget.Button": {
+ "deps": ["ART.Widget", "ART.Text"],
+ "desc": "Button widget."
+ },
+
+ "ART.Widget.Window": {
+ "deps": ["ART.Widget", "ART.Text"],
+ "desc": "Window widget."
+ }
+
+ }
+
+}
View
103 art.button.js
@@ -1,103 +0,0 @@
-// art.button.js
-
-// Button Widget. Work in progress.
-
-ART.Button = new Class({
-
- Extends: ART.Widget,
-
- name: 'button',
-
- style: {
-
- base: {
-
- 'height': 20,
- 'width': 100,
-
- 'glyph': false,
- 'glyph-stroke': 2,
- 'glyph-color': hsb(0, 0, 0, 0.8),
- 'glyph-height': 10,
- 'glyph-width': 10,
- 'glyph-top': 2,
- 'glyph-left': 2,
-
- 'pill': false,
-
- 'corner-radius': 3,
- 'background-color': {0: hsb(0, 0, 80), 1: hsb(0, 0, 60)},
- 'border-color': hsb(0, 0, 0, 0.7),
- 'reflection-color': {0: hsb(0, 0, 100, 1), 1: hsb(0, 0, 0, 0)},
- 'shadow-color': hsb(0, 0, 100, 0.6)
- },
-
- active: {
- 'background-color': hsb(0, 0, 40),
- 'border-color': hsb(0, 0, 0, 0.8),
- 'reflection-color': {0: hsb(0, 0, 30, 1), 1: hsb(0, 0, 0, 0)}
- }
-
- },
-
- options: {},
-
- initialize: function(options){
- this.parent(options);
-
- this.paint = new ART.Paint();
- $(this.paint).inject(this.element);
-
- var self = this;
-
- var deactivate = function(){
- self.deactivate();
- document.removeEvent('mouseup', deactivate);
- };
-
- this.element.addEvent('mousedown', function(){
- self.activate();
- document.addEvent('mouseup', deactivate);
- });
-
- this.render();
- },
-
- render: function(style){
- if (!this.paint) return this;
- if (style) $extend(this.style.now, style);
-
- var now = {};
- for (var p in this.style.now) now[p.camelCase()] = this.style.now[p];
-
- this.paint.resize({x: now.width, y: now.height + 1});
- this.element.setStyles({width: now.width, height: now.height + 1});
-
- var shape = (now.pill) ? (now.width > now.height) ? 'horizontal-pill' : 'vertical-pill' : 'rounded-rectangle';
-
- this.paint.start({x: 0, y: 0});
- this.paint.shape(shape, {x: now.width, y: now.height + 1}, now.cornerRadius + 1);
- this.paint.end({'fill': true, 'fill-color': now.shadowColor});
-
- this.paint.start({x: 0, y: 0});
- this.paint.shape(shape, {x: now.width, y: now.height}, now.cornerRadius + 1);
- this.paint.end({'fill': true, 'fill-color': now.borderColor});
-
- this.paint.start({x: 1, y: 1});
- this.paint.shape(shape, {x: now.width - 2, y: now.height - 2}, now.cornerRadius);
- this.paint.end({'fill': true, 'fill-color': now.reflectionColor});
-
- this.paint.start({x: 1, y: 2});
- this.paint.shape(shape, {x: now.width - 2, y: now.height - 3}, now.cornerRadius);
- this.paint.end({'fill': true, 'fill-color': now.backgroundColor});
-
- if (now.glyph){
- this.paint.start({x: now.glyphLeft, y: now.glyphTop});
- this.paint.shape(now.glyph, {x: now.glyphWidth, y: now.glyphHeight});
- this.paint.end({'stroke': true, 'stroke-width': now.glyphStroke, 'stroke-color': now.glyphColor});
- }
-
- return this;
- }
-
-});
View
5 art.js
@@ -1,5 +0,0 @@
-// art.js
-
-// NS.
-
-var ART = function(){};
View
144 art.widget.js
@@ -1,144 +0,0 @@
-// art.widget.js
-
-// Base widget class. Based on » http://gist.github.com/85837
-
-ART.Widget = new Class({
-
- Implements: [Options, Events],
-
- ns: 'art',
- name: 'widget',
-
- options: {
- // onShow: $empty,
- // onHide: $empty,
- // onFocus: $empty,
- // onBlur: $empty,
- // onEnable: $empty,
- // onDisable: $empty,
- style: null
- },
-
- style: {
- base: null,
- active: null,
- disabled: null,
- focused: null,
- hidden: null
- },
-
- initialize: function(options){
- if (options) this.setOptions(options);
-
- if (this.options.style) this.style = $merge(this.style, this.options.style);
-
- this.prefix = this.ns + '-' + this.name;
- this.element = new Element('div');
- this.element.addClass(this.ns).addClass(this.prefix);
-
- this.style.now = $unlink(this.style.base);
-
- // initial render
- this.render();
- },
-
- // render placeholder
-
- render: function(style){
- if (style) $extend(this.style.now, style);
-
- this.element.setStyles(this.style.now);
- return this;
- },
-
- // special states
-
- hide: function(){
- if (!this.hidden){
- this.hidden = true;
- this.fireEvent('hide');
- this.element.addClass(this.prefix + '-hidden');
- this.render(this.style.hidden);
- }
- return this;
- },
-
- activate: function(){
- if (!this.active){
- this.active = true;
- this.fireEvent('activate');
- this.element.addClass(this.prefix + '-active');
- this.render(this.style.active);
- }
- return this;
- },
-
- focus: function(){
- if (!this.focused){
- this.focused = true;
- this.fireEvent('focus');
- this.element.addClass(this.prefix + '-focused');
- this.render(this.style.focused);
- }
- return this;
- },
-
- disable: function(){
- if (!this.disabled){
- this.disabled = true;
- this.fireEvent('disable');
- this.element.addClass(this.prefix + '-disabled');
- this.render(this.style.disabled);
- }
- return this;
- },
-
- // normal states
-
- show: function(){
- if (this.hidden){
- this.hidden = false;
- this.fireEvent('show');
- this.element.removeClass(this.prefix + '-hidden');
- this.render(this.style.base);
- }
- return this;
- },
-
- deactivate: function(){
- if (this.active){
- this.active = false;
- this.fireEvent('deactivate');
- this.element.removeClass(this.prefix + '-active');
- this.render(this.style.base);
- }
- return this;
- },
-
- blur: function(){
- if (this.focused){
- this.focused = false;
- this.fireEvent('blur');
- this.element.removeClass(this.prefix + '-focused');
- this.render(this.style.base);
- }
- return this;
- },
-
- enable: function(){
- if (this.disabled){
- this.disabled = false;
- this.fireEvent('enable');
- this.element.removeClass(this.prefix + '-disabled');
- this.render(this.style.base);
- }
- return this;
- },
-
- // toElement
-
- toElement: function(){
- return this.element;
- }
-
-});
View
231 art.window.js
@@ -1,231 +0,0 @@
-// art.window.js
-
-// Window Widget. Work in progress.
-
-ART.Window = new Class({
-
- Extends: ART.Widget,
-
- name: 'window',
-
- style: {
-
- base: {
-
- 'height': 300,
- 'width': 400,
-
- 'button-margin': 20,
- 'button-top': 5,
-
- 'corner-radius': 3,
- 'header-height': 24,
- 'footer-height': 16,
- 'header-background-color': {0: hsb(0, 0, 80), 1: hsb(0, 0, 60)},
- 'footer-background-color': {0: hsb(0, 0, 80), 1: hsb(0, 0, 70)},
- 'header-reflection-color': {0: hsb(0, 0, 100, 1), 1: hsb(0, 0, 0, 0)},
- 'footer-reflection-color': {0: hsb(0, 0, 100, 1), 1: hsb(0, 0, 0, 0)},
- 'border-color': hsb(0, 0, 0, 0.5)
- }
-
- },
-
- options: {
- close: true,
- minimize: true,
- maximize: true,
- resize: true,
-
- closeStyle: {base: {
- 'pill': true,
-
- 'background-color': {0: hsb(200, 15, 75), 1: hsb(200, 35, 55)},
- 'reflection-color': {0: hsb(200, 10, 95), 1: hsb(200, 0, 0, 0)},
- 'border-color': hsb(200, 35, 45),
- 'glyph-color': hsb(0, 0, 100, 0.5),
-
- 'glyph': 'close-icon',
-
- 'height': 14,
- 'width': 14,
-
- 'glyph-height': 4,
- 'glyph-width': 4,
- 'glyph-top': 5,
- 'glyph-left': 5
- }, active: {
- 'glyph-color': hsb(0, 0, 100),
- 'background-color': hsb(200, 15, 65),
- 'reflection-color': {0: hsb(200, 35, 65), 1: hsb(0, 0, 0, 0)},
- 'border-color': hsb(200, 35, 45)
- }},
-
- minimizeStyle: {base: {
- 'pill': true,
-
- 'background-color': {0: hsb(200, 15, 75), 1: hsb(200, 35, 55)},
- 'reflection-color': {0: hsb(200, 10, 95), 1: hsb(200, 0, 0, 0)},
- 'border-color': hsb(200, 35, 45),
- 'glyph-color': hsb(0, 0, 100, 0.5),
-
- 'glyph': 'minus-icon',
-
- 'height': 14,
- 'width': 14,
-
- 'glyph-height': 6,
- 'glyph-width': 6,
- 'glyph-top': 4,
- 'glyph-left': 4
- }, active: {
- 'glyph-color': hsb(0, 0, 100),
- 'background-color': hsb(200, 15, 65),
- 'reflection-color': {0: hsb(200, 35, 65), 1: hsb(0, 0, 0, 0)},
- 'border-color': hsb(200, 35, 45)
- }},
-
- maximizeStyle: {base: {
- 'pill': true,
-
- 'background-color': {0: hsb(200, 15, 75), 1: hsb(200, 35, 55)},
- 'reflection-color': {0: hsb(200, 10, 95), 1: hsb(200, 0, 0, 0)},
- 'border-color': hsb(200, 35, 45),
- 'glyph-color': hsb(0, 0, 100, 0.5),
-
- 'glyph': 'plus-icon',
-
- 'height': 14,
- 'width': 14,
-
- 'glyph-height': 6,
- 'glyph-width': 6,
- 'glyph-top': 4,
- 'glyph-left': 4
- }, active: {
- 'glyph-color': hsb(0, 0, 100),
- 'background-color': hsb(200, 15, 65),
- 'reflection-color': {0: hsb(200, 35, 65), 1: hsb(0, 0, 0, 0)},
- 'border-color': hsb(200, 35, 45)
- }}
- },
-
- initialize: function(options){
- this.parent(options);
-
- var relative = {'position': 'relative', 'top': 0, 'left': 0};
- var absolute = {'position': 'absolute', 'top': 0, 'left': 0};
-
- this.paint = new ART.Paint();
- $(this.paint).setStyles(absolute).inject(this.element);
-
- this.element.setStyles({'position': 'relative'});
-
- this.header = new Element('div', {'class': 'art-window-header'});
- this.content = new Element('div', {'class': 'art-window-content'});
- this.footer = new Element('div', {'class': 'art-window-footer'});
-
- this.header.setStyles(relative);
- this.content.setStyles(relative);
- this.footer.setStyles(relative);
-
- this.element.adopt(this.header, this.content, this.footer);
-
- if (this.options.close){
- this.close = new ART.Button({style: this.options.closeStyle});
- $(this.close).setStyles(absolute).inject(this.header);
- }
-
- if (this.options.maximize){
- this.maximize = new ART.Button({style: this.options.maximizeStyle});
- $(this.maximize).setStyles(absolute).inject(this.header);
- }
-
- if (this.options.minimize){
- this.minimize = new ART.Button({style: this.options.minimizeStyle});
- $(this.minimize).setStyles(absolute).inject(this.header);
- }
-
- this.render();
- },
-
- setContent: function(){
- this.content.adopt(arguments);
- return this;
- },
-
- render: function(style){
- if (!this.paint) return this;
- if (style) $extend(this.style.now, style);
-
- var now = {};
- for (var p in this.style.now) now[p.camelCase()] = this.style.now[p];
-
- this.paint.resize({x: now.width, y: now.height});
- this.element.setStyles({height: now.height, width: now.width});
- this.content.setStyles({top: 0, left: 1, height: now.height - now.footerHeight - now.headerHeight - 2, width: now.width -2});
-
- this.paint.start();
- this.paint.shape('rounded-rectangle', {x: now.width, y: now.height}, now.cornerRadius + 1);
- this.paint.end({'fill': true, 'fill-color': now.borderColor});
-
- this.header.setStyles({'width': now.width, height: now.headerHeight});
-
- this.paint.start({x: 1, y: 1});
- this.paint.shape('rounded-rectangle', {x: now.width - 2, y: now.headerHeight - 2}, [now.cornerRadius, now.cornerRadius, 0, 0]);
- this.paint.end({'fill': true, 'fill-color': now.headerReflectionColor});
-
- this.paint.start({x: 1, y: 2});
- this.paint.shape('rounded-rectangle', {x: now.width - 2, y: now.headerHeight - 3}, [now.cornerRadius, now.cornerRadius, 0, 0]);
- this.paint.end({'fill': true, 'fill-color': now.headerBackgroundColor});
-
- this.footer.setStyles({'width': now.width, height: now.footerHeight});
-
- this.paint.start({x: 1, y: now.height - now.footerHeight - 1});
- this.paint.shape('rounded-rectangle', {x: now.width - 2, y: now.footerHeight}, [0, 0, now.cornerRadius, now.cornerRadius]);
- this.paint.end({'fill': true, 'fill-color': now.footerReflectionColor});
-
- this.paint.start({x: 1, y: now.height - now.footerHeight});
- this.paint.shape('rounded-rectangle', {x: now.width - 2, y: now.footerHeight - 1}, [0, 0, now.cornerRadius, now.cornerRadius]);
- this.paint.end({'fill': true, 'fill-color': now.footerBackgroundColor});
-
- if (this.options.resize){
-
- this.paint.start({x: now.width - 4, y: now.height - 14});
- this.paint.lineBy({x: -10, y: 10});
- this.paint.moveBy({x: 4, y: 0});
- this.paint.lineBy({x: 6, y: -6});
- this.paint.moveBy({x: 0, y: 4});
- this.paint.lineBy({x: -2, y: 2});
- this.paint.end({'stroke': true, 'stroke-color': hsb(0, 0, 100, 0.6)});
-
- this.paint.start({x: now.width - 5, y: now.height - 14});
- this.paint.lineBy({x: -10, y: 10});
- this.paint.moveBy({x: 4, y: 0});
- this.paint.lineBy({x: 6, y: -6});
- this.paint.moveBy({x: 0, y: 4});
- this.paint.lineBy({x: -2, y: 2});
- this.paint.end({'stroke': true, 'stroke-color': hsb(0, 0, 0, 0.6)});
- }
-
- // painting buttons
-
- var baseLeft = 8;
- var oneLeft = baseLeft + now.buttonMargin;
- var twoLeft = oneLeft + oneLeft - baseLeft;
-
- if (this.close) $(this.close).setStyles({top: now.buttonTop, left: baseLeft});
-
- if (this.maximize) $(this.maximize).setStyles({
- top: now.buttonTop,
- left: (this.close && this.maximize) ? twoLeft : (this.close || this.maximize) ? oneLeft : baseLeft
- });
-
- if (this.minimize) $(this.minimize).setStyles({
- top: now.buttonTop,
- left: (this.close) ? oneLeft : baseLeft
- });
-
- return this;
- }
-
-});

0 comments on commit b86d7b1

Please sign in to comment.