Browse Source

initial setup 3rd party JS lib

user 9 years ago
parent
commit
a523900815

+ 91 - 0
snap.svg/Gruntfile.js

@@ -0,0 +1,91 @@
+'use strict';
+
+module.exports = function (grunt) {
+    var path = require('path');
+
+    // These plugins provide necessary tasks.
+    grunt.loadNpmTasks('grunt-contrib-clean');
+    grunt.loadNpmTasks('grunt-contrib-requirejs');
+    grunt.loadNpmTasks('grunt-execute');
+    grunt.loadNpmTasks('amber-dev');
+
+    // Default task.
+    grunt.registerTask('default', ['amberc:all']);
+    grunt.registerTask('test', ['amberc:test_runner', 'execute:test_runner', 'clean:test_runner']);
+    grunt.registerTask('devel', ['amdconfig:app', 'requirejs:devel']);
+    grunt.registerTask('deploy', ['amdconfig:app', 'requirejs:deploy']);
+
+    // Project configuration.
+    grunt.initConfig({
+        // Metadata.
+        // pkg: grunt.file.readJSON(''),
+        banner: '/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - ' +
+            '<%= grunt.template.today("yyyy-mm-dd") %>\n' +
+            '<%= pkg.homepage ? "* " + pkg.homepage + "\\n" : "" %>' +
+            '* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>;' +
+            ' Licensed <%= _.pluck(pkg.licenses, "type").join(", ") %> */\n',
+        // task configuration
+        amberc: {
+            options: {
+                amber_dir: path.join(__dirname, "bower_components", "amber"),
+                library_dirs: ['src'],
+                closure_jar: ''
+            },
+            all: {
+                src: [
+                    'src/AmberSnapsvg.st', // list all sources in dependency order
+                    'src/AmberSnapsvg-Tests.st' // list all tests in dependency order
+                ],
+                amd_namespace: 'amber-snapsvg',
+                libraries: ['SUnit', 'Web']
+            },
+            test_runner: {
+                src: ['node_modules/amber-dev/lib/Test.st'],
+                libraries: [
+                    /* add dependencies packages here */
+                    'AmberSnapsvg', /* add other code-to-test packages here */
+                    'SUnit',
+                    'AmberSnapsvg-Tests' /* add other test packages here */
+                ],
+                main_class: 'NodeTestRunner',
+                output_name: 'test_runner'
+            }
+        },
+
+        amdconfig: {app: {dest: 'config.js'}},
+
+        requirejs: {
+            deploy: {options: {
+                mainConfigFile: "config.js",
+                onBuildWrite: function (moduleName, path, contents) {
+                    return moduleName === "config" ? contents + "\nrequire.config({map:{'*':{app:'deploy'}}});" : contents;
+                },
+                pragmas: {
+                    excludeIdeData: true,
+                    excludeDebugContexts: true
+                },
+                include: ['config', 'node_modules/requirejs/require', 'deploy'],
+                out: "the.js"
+            }},
+            devel: {options: {
+                mainConfigFile: "config.js",
+                onBuildWrite: function (moduleName, path, contents) {
+                    return moduleName === "config" ? contents + "\nrequire.config({map:{'*':{app:'devel'}}});" : contents;
+                },
+                include: ['config', 'node_modules/requirejs/require'],
+                out: "the.js"
+            }}
+        },
+
+        execute: {
+            test_runner: {
+                src: ['test_runner.js']
+            }
+        },
+
+        clean: {
+            test_runner: ['test_runner.js']
+        }
+    });
+
+};

+ 22 - 0
snap.svg/LICENSE

@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 Hannes Hirzel
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

+ 149 - 0
snap.svg/README.md

@@ -0,0 +1,149 @@
+# Amber Smalltalk Snap.svg Demo
+
+Demo how to use the [Snapsvg libary](https://github.com/adobe-webplatform/Snap.svg) in Amber Smalltalk 0.14.1
+
+## Getting Started
+
+To bring project alive (for example after `git clone`):
+
+```sh
+npm install
+bower install
+grunt devel
+```
+
+Developing the project (after brought alive):
+ 
+Start server with `amber serve` and go to `http://localhost:4000/` in your browser and follow the instructions
+
+
+## How was this constructed
+
+
+### amber init
+
+
+
+    hanneshirzel@hanneshirzel-Latitude-E6410 ~/Amber-snapsvg-demo $ amber init
+    Welcome to Amber version 0.14.0 (NodeJS 0.10.25).
+    Running "init:/usr/local/lib/node_modules/amber-cli/node_modules/grunt-init-amber" (init) task
+    This task will create one or more files in the current directory, based on the
+    environment and the answers to a few questions. Note that answering "?" to any
+    question will show question-specific help and answering "none" to most questions
+    will leave its value blank.
+    
+    "grunt-init-amber" template notes:
+     Project title should be a human-readable title.
+    
+    Please answer the following:
+    [?] Project title (Application or Library Title) Amber Smalltalk Snap.svg Demo
+    [?] Main class and package of Amber application.
+    Project name is derived by lowercasing this. (AmberSmalltalkSnapSvgDemo) AmberSnapsvg
+    [?] Description (The Application or The Library doing The Thing.) Demo how to use the Snapsvg libary in Amber Smalltalk
+    [?] Author name (hhzl) 
+    [?] Author email (hannes.hirzel@gmail.com) 
+    [?] Namespace of the new Amber package. (amber-ambersnapsvg) amber-snapsvg
+    [?] Version (0.1.0) 
+    [?] Project git repository (git://github.com/hanneshirzel/Amber-snapsvg-demo.git) 
+    [?] Project homepage (https://github.com/hanneshirzel/Amber-snapsvg-demo) 
+    [?] Project issues tracker (https://github.com/hanneshirzel/Amber-snapsvg-demo/issues) 
+    [?] Author url (none) 
+    [?] Licenses (MIT) 
+    [?] Do you need to make any changes to the above before continuing? (y/N) 
+
+
+### Installation of snap.svg
+
+    bower install snap.svg --save
+
+
+Creation of snap.svg.amd.json
+
+
+    {
+    "paths": {
+                "snap.svg" : "dist/snap.svg"
+             }
+    }
+
+
+Add it to ``deploy.js``
+
+
+    define([
+        'amber/deploy',
+        'snap.svg',
+        // --- packages to be deployed begin here ---
+        'amber-snapsvg/AmberSnapsvg'
+        // --- packages to be deployed end here ---
+    ], function (amber) {
+        return amber;
+    });
+
+Generate new ``config.js`` with
+
+    grunt devel
+
+
+Check that the library is properly referenced in ``config.js``
+
+
+    "snap.svg": "bower_components/snap.svg/dist/snap.svg",
+
+
+
+### Add Smalltalk code
+
+Add a #snapsvg-button to the ``index.html`` page
+
+
+Change method #augmentPage to
+
+    augmentPage
+	'#amber-with' asJQuery click: [ self doAmberWith ].
+	'#jquery-append' asJQuery click: [ self doJQueryAppend ].
+	'#snapsvg-button' asJQuery click: [self doSnapSvg]
+
+Create a method #doSnapSvg
+
+    doSnapSvg
+    "translation to Smalltalk points 1 to 4 of
+    http://snapsvg.io/start/ "
+    
+    | s bigCircle smallCircle |
+        
+    s := Snap value: 300 value: 600.
+    bigCircle := s circle: 150 value: 150 value: 100.
+    bigCircle attr: #{'fill' -> '#bada55'. 'stroke' -> '#000'. 'strokeWidth' -> 5}.
+    smallCircle := s circle: 100 value: 150 value: 70.
+
+You may add
+
+    Transcript show: s outerSVG.
+    
+to the #doSnapSvg method to get the generated SVG code.
+
+### Create deployment file
+
+To create a deployment file run
+
+    grunt deploy
+    
+This creates a ``the.js`` which includes everything needed for deployment.
+Copy ``index.html`` and ``the.js`` to your deployment folder.
+
+To switch back to development mode run
+
+    grunt devel
+
+
+### References
+
+#### Amber
+- http://amber-lang.net/
+- [Illustration](https://github.com/amber-smalltalk/amber/wiki/Building-blocks-of-Amber-application-%28and-library%29) about the different pieces involved.
+
+#### snap.svg
+- http://snapsvg.io/start/
+- http://svg.dabbles.info/
+- http://stackoverflow.com/questions/tagged/snap.svg

+ 37 - 0
snap.svg/bower.json

@@ -0,0 +1,37 @@
+{
+  "name": "ambersnapsvg",
+  "description": "Demo how to use the Snapsvg libary in Amber Smalltalk",
+  "version": "0.1.0",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "/test_runner.js",
+    "test",
+    "tests"
+  ],
+  "authors": [
+    {
+      "name": "hhzl",
+      "email": "hannes.hirzel@gmail.com"
+    }
+  ],
+  "homepage": "https://github.com/amber-smalltalk/amber-examples/",
+  "keywords": [
+    "Amber",
+    "Smalltalk"
+  ],
+  "license": [
+    "MIT"
+  ],
+  "private": false,
+  "dependencies": {
+    "amber": "^0.14.1",
+    "snap.svg": "~0.3.0"
+  },
+  "devDependencies": {
+    "amber-ide-starter-dialog": "^0.1.0",
+    "amber-attic": "^0.1.0",
+    "helios": "^0.3.0"
+  }
+}

+ 9 - 0
snap.svg/deploy.js

@@ -0,0 +1,9 @@
+define([
+    'amber/deploy',
+    'snap.svg',
+    // --- packages to be deployed begin here ---
+    'amber-snapsvg/AmberSnapsvg'
+    // --- packages to be deployed end here ---
+], function (amber) {
+    return amber;
+});

+ 10 - 0
snap.svg/devel.js

@@ -0,0 +1,10 @@
+define([
+    'amber/devel',
+    './deploy',
+    // --- packages used only during development begin here ---
+    'amber-snapsvg/AmberSnapsvg-Tests',
+    'amber-attic/IDE'
+    // --- packages used only during development end here ---
+], function (amber) {
+    return amber;
+});

+ 31 - 0
snap.svg/index.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+
+  <head>
+    <title>Amber Smalltalk Snap.svg Demo</title>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta name="author" content="hhzl" />
+    <script type='text/javascript' src='the.js'></script>
+  </head>
+
+  <body>
+  <p>Hi, hhzl! Welcome to Amber project: "Amber Smalltalk Snap.svg Demo".</p>
+  <p>This is the place for your application's HTML. After getting familiar with Amber,
+      just remove this welcome contents from index.html and replace it with your own.</p>
+  <button id="amber-with">Hello from TagBrush >> with:</button>
+  <button id="jquery-append">Hello from jQuery append</button>
+  <button id="snapsvg-button">Hello from Snap.svg</button>
+  <ol id="output-list"></ol>
+  <script type='text/javascript'>
+      require(['app'], function (amber) {
+          amber.initialize({
+            //used for all new packages in IDE
+            'transport.defaultAmdNamespace': "amber-snapsvg"
+          });
+          require(["amber-ide-starter-dialog"], function (dlg) { dlg.start(); });
+          amber.globals.AmberSnapsvg._start();
+      });
+  </script>
+  </body>
+
+</html>

+ 5 - 0
snap.svg/local.amd.json

@@ -0,0 +1,5 @@
+{
+    "paths": {
+        "amber-snapsvg": "src"
+    }
+}

+ 42 - 0
snap.svg/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "ambersnapsvg",
+  "title": "Amber Smalltalk Snap.svg Demo",
+  "description": "Demo how to use the Snapsvg libary in Amber Smalltalk",
+  "version": "0.1.0",
+  "homepage": "https://github.com/amber-smalltalk/amber-examples/",
+  "author": {
+    "name": "hhzl",
+    "email": "hannes.hirzel@gmail.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/amber-smalltalk/amber-examples.git"
+  },
+  "bugs": {
+    "url": "https://github.com/amber-smalltalk/amber-examples/issues"
+  },
+  "licenses": [
+    {
+      "type": "MIT",
+      "url": "https://github.com/amber-smalltalk/amber-examples/blob/master/LICENSE"
+    }
+  ],
+  "engines": {
+    "node": ">= 0.8.0"
+  },
+  "scripts": {
+    "test": "grunt test"
+  },
+  "devDependencies": {
+    "amber-dev": "^0.3.0",
+    "grunt": "^0.4.5",
+    "grunt-contrib-clean": "^0.6.0",
+    "grunt-contrib-requirejs": "^0.4.4",
+    "grunt-execute": "^0.2.2",
+    "requirejs": "^2.1.15"
+  },
+  "keywords": [
+    "Amber",
+    "Smalltalk"
+  ]
+}

+ 5 - 0
snap.svg/snap.svg.amd.json

@@ -0,0 +1,5 @@
+{
+"paths": {
+            "snap.svg" : "dist/snap.svg"
+         }
+}

+ 8 - 0
snap.svg/src/AmberSnapsvg-Tests.js

@@ -0,0 +1,8 @@
+define("amber-snapsvg/AmberSnapsvg-Tests", ["amber/boot", "amber_core/SUnit"], function($boot){
+var $core=$boot.api,nil=$boot.nil,$recv=$boot.asReceiver,$globals=$boot.globals;
+$core.addPackage('AmberSnapsvg-Tests');
+$core.packages["AmberSnapsvg-Tests"].transport = {"type":"amd","amdNamespace":"amber-snapsvg"};
+
+$core.addClass('AmberSnapsvgTest', $globals.TestCase, [], 'AmberSnapsvg-Tests');
+
+});

+ 5 - 0
snap.svg/src/AmberSnapsvg-Tests.st

@@ -0,0 +1,5 @@
+Smalltalk createPackage: 'AmberSnapsvg-Tests'!
+TestCase subclass: #AmberSnapsvgTest
+	instanceVariableNames: ''
+	package: 'AmberSnapsvg-Tests'!
+

+ 191 - 0
snap.svg/src/AmberSnapsvg.js

@@ -0,0 +1,191 @@
+define("amber-snapsvg/AmberSnapsvg", ["amber/boot", "amber_core/Kernel-Objects"], function($boot){
+var $core=$boot.api,nil=$boot.nil,$recv=$boot.asReceiver,$globals=$boot.globals;
+$core.addPackage('AmberSnapsvg');
+$core.packages["AmberSnapsvg"].transport = {"type":"amd","amdNamespace":"amber-snapsvg"};
+
+$core.addClass('AmberSnapsvg', $globals.Object, [], 'AmberSnapsvg');
+$core.addMethod(
+$core.method({
+selector: "augmentPage",
+protocol: 'starting',
+fn: function (){
+var self=this;
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+return $core.withContext(function($ctx1) {
+//>>excludeEnd("ctx");
+var $1,$2;
+$1="#amber-with"._asJQuery();
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+$ctx1.sendIdx["asJQuery"]=1;
+//>>excludeEnd("ctx");
+$recv($1)._click_((function(){
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+return $core.withContext(function($ctx2) {
+//>>excludeEnd("ctx");
+return self._doAmberWith();
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+}, function($ctx2) {$ctx2.fillBlock({},$ctx1,1)});
+//>>excludeEnd("ctx");
+}));
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+$ctx1.sendIdx["click:"]=1;
+//>>excludeEnd("ctx");
+$2="#jquery-append"._asJQuery();
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+$ctx1.sendIdx["asJQuery"]=2;
+//>>excludeEnd("ctx");
+$recv($2)._click_((function(){
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+return $core.withContext(function($ctx2) {
+//>>excludeEnd("ctx");
+return self._doJQueryAppend();
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+}, function($ctx2) {$ctx2.fillBlock({},$ctx1,2)});
+//>>excludeEnd("ctx");
+}));
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+$ctx1.sendIdx["click:"]=2;
+//>>excludeEnd("ctx");
+$recv("#snapsvg-button"._asJQuery())._click_((function(){
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+return $core.withContext(function($ctx2) {
+//>>excludeEnd("ctx");
+return self._doSnapSvg();
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+}, function($ctx2) {$ctx2.fillBlock({},$ctx1,3)});
+//>>excludeEnd("ctx");
+}));
+return self;
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+}, function($ctx1) {$ctx1.fill(self,"augmentPage",{},$globals.AmberSnapsvg)});
+//>>excludeEnd("ctx");
+},
+//>>excludeStart("ide", pragmas.excludeIdeData);
+args: [],
+source: "augmentPage\x0a\x09'#amber-with' asJQuery click: [ self doAmberWith ].\x0a\x09'#jquery-append' asJQuery click: [ self doJQueryAppend ].\x0a\x09'#snapsvg-button' asJQuery click: [self doSnapSvg]",
+referencedClasses: [],
+//>>excludeEnd("ide");
+messageSends: ["click:", "asJQuery", "doAmberWith", "doJQueryAppend", "doSnapSvg"]
+}),
+$globals.AmberSnapsvg);
+
+$core.addMethod(
+$core.method({
+selector: "doAmberWith",
+protocol: 'action',
+fn: function (){
+var self=this;
+var tag;
+function $HTMLCanvas(){return $globals.HTMLCanvas||(typeof HTMLCanvas=="undefined"?nil:HTMLCanvas)}
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+return $core.withContext(function($ctx1) {
+//>>excludeEnd("ctx");
+tag=$recv($recv($HTMLCanvas())._onJQuery_("#output-list"._asJQuery()))._root();
+$recv(tag)._with_((function(html){
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+return $core.withContext(function($ctx2) {
+//>>excludeEnd("ctx");
+return $recv($recv(html)._li())._with_("Amber Web #with: added me!");
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+}, function($ctx2) {$ctx2.fillBlock({html:html},$ctx1,1)});
+//>>excludeEnd("ctx");
+}));
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+$ctx1.sendIdx["with:"]=1;
+//>>excludeEnd("ctx");
+return self;
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+}, function($ctx1) {$ctx1.fill(self,"doAmberWith",{tag:tag},$globals.AmberSnapsvg)});
+//>>excludeEnd("ctx");
+},
+//>>excludeStart("ide", pragmas.excludeIdeData);
+args: [],
+source: "doAmberWith\x0a\x09| tag |\x0a\x09tag := (HTMLCanvas onJQuery: '#output-list' asJQuery) root.\x0a\x09tag with: [ :html | html li with: 'Amber Web #with: added me!' ]",
+referencedClasses: ["HTMLCanvas"],
+//>>excludeEnd("ide");
+messageSends: ["root", "onJQuery:", "asJQuery", "with:", "li"]
+}),
+$globals.AmberSnapsvg);
+
+$core.addMethod(
+$core.method({
+selector: "doJQueryAppend",
+protocol: 'action',
+fn: function (){
+var self=this;
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+return $core.withContext(function($ctx1) {
+//>>excludeEnd("ctx");
+$recv("#output-list"._asJQuery())._append_("<li>jQuery append added me!</li>");
+return self;
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+}, function($ctx1) {$ctx1.fill(self,"doJQueryAppend",{},$globals.AmberSnapsvg)});
+//>>excludeEnd("ctx");
+},
+//>>excludeStart("ide", pragmas.excludeIdeData);
+args: [],
+source: "doJQueryAppend\x0a\x09'#output-list' asJQuery append: '<li>jQuery append added me!</li>'",
+referencedClasses: [],
+//>>excludeEnd("ide");
+messageSends: ["append:", "asJQuery"]
+}),
+$globals.AmberSnapsvg);
+
+$core.addMethod(
+$core.method({
+selector: "doSnapSvg",
+protocol: 'action',
+fn: function (){
+var self=this;
+var s,snapLib,bigCircle,smallCircle;
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+return $core.withContext(function($ctx1) {
+//>>excludeEnd("ctx");
+snapLib=$recv(require)._value_("snap.svg");
+s=$recv(snapLib)._value_value_((300),(600));
+bigCircle=$recv(s)._circle_value_value_((150),(150),(100));
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+$ctx1.sendIdx["circle:value:value:"]=1;
+//>>excludeEnd("ctx");
+$recv(bigCircle)._attr_($globals.HashedCollection._newFromPairs_(["fill","#bada55","stroke","#000","strokeWidth",(5)]));
+smallCircle=$recv(s)._circle_value_value_((100),(150),(70));
+return self;
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+}, function($ctx1) {$ctx1.fill(self,"doSnapSvg",{s:s,snapLib:snapLib,bigCircle:bigCircle,smallCircle:smallCircle},$globals.AmberSnapsvg)});
+//>>excludeEnd("ctx");
+},
+//>>excludeStart("ide", pragmas.excludeIdeData);
+args: [],
+source: "doSnapSvg\x0a\x22translation to Smalltalk points 1 to 4 of\x0ahttp://snapsvg.io/start/ \x22\x0a\x0a| s snapLib bigCircle smallCircle |\x0a\x0asnapLib := require value: 'snap.svg'.\x0as := snapLib value: 300 value: 600.\x0a\x0abigCircle := s circle: 150 value: 150 value: 100.\x0abigCircle attr: #{'fill' -> '#bada55'. 'stroke' -> '#000'. 'strokeWidth' -> 5}.\x0asmallCircle := s circle: 100 value: 150 value: 70.\x0a\x22Transcript show: s outerSVG.\x22\x0a\x22s inspect\x22",
+referencedClasses: [],
+//>>excludeEnd("ide");
+messageSends: ["value:", "value:value:", "circle:value:value:", "attr:"]
+}),
+$globals.AmberSnapsvg);
+
+
+$core.addMethod(
+$core.method({
+selector: "start",
+protocol: 'starting',
+fn: function (){
+var self=this;
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+return $core.withContext(function($ctx1) {
+//>>excludeEnd("ctx");
+$recv(self._new())._augmentPage();
+return self;
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+}, function($ctx1) {$ctx1.fill(self,"start",{},$globals.AmberSnapsvg.klass)});
+//>>excludeEnd("ctx");
+},
+//>>excludeStart("ide", pragmas.excludeIdeData);
+args: [],
+source: "start\x0a\x09self new augmentPage",
+referencedClasses: [],
+//>>excludeEnd("ide");
+messageSends: ["augmentPage", "new"]
+}),
+$globals.AmberSnapsvg.klass);
+
+});

+ 47 - 0
snap.svg/src/AmberSnapsvg.st

@@ -0,0 +1,47 @@
+Smalltalk createPackage: 'AmberSnapsvg'!
+Object subclass: #AmberSnapsvg
+	instanceVariableNames: ''
+	package: 'AmberSnapsvg'!
+
+!AmberSnapsvg methodsFor: 'action'!
+
+doAmberWith
+	| tag |
+	tag := (HTMLCanvas onJQuery: '#output-list' asJQuery) root.
+	tag with: [ :html | html li with: 'Amber Web #with: added me!!' ]
+!
+
+doJQueryAppend
+	'#output-list' asJQuery append: '<li>jQuery append added me!!</li>'
+!
+
+doSnapSvg
+"translation to Smalltalk points 1 to 4 of
+http://snapsvg.io/start/ "
+
+| s snapLib bigCircle smallCircle |
+
+snapLib := require value: 'snap.svg'.
+s := snapLib value: 300 value: 600.
+
+bigCircle := s circle: 150 value: 150 value: 100.
+bigCircle attr: #{'fill' -> '#bada55'. 'stroke' -> '#000'. 'strokeWidth' -> 5}.
+smallCircle := s circle: 100 value: 150 value: 70.
+"Transcript show: s outerSVG."
+"s inspect"
+! !
+
+!AmberSnapsvg methodsFor: 'starting'!
+
+augmentPage
+	'#amber-with' asJQuery click: [ self doAmberWith ].
+	'#jquery-append' asJQuery click: [ self doJQueryAppend ].
+	'#snapsvg-button' asJQuery click: [self doSnapSvg]
+! !
+
+!AmberSnapsvg class methodsFor: 'starting'!
+
+start
+	self new augmentPage
+! !
+