Init

k3nsei · Sep 20, 2014 · a4b9821 · a4b9821
1 parent b6e910c
commit a4b9821
Show file tree

Hide file tree

Showing 11 changed files with 312 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,4 @@
+/.idea
+/node_modules
+/bower_components
+*.log
diff --git a/bower.json b/bower.json
@@ -0,0 +1,23 @@
+{
+    "name": "ctg-frame",
+    "version": "0.0.1",
+    "description": "Ember.js Component to generate images with caption.",
+    "keywords": [
+        "ember",
+        "image",
+        "generator",
+        "canvas"
+    ],
+    "homepage": "https://github.com/k3nsei/ctg-frame",
+    "authors": [
+        "Piotr Stępniewski <[email protected]>"
+    ],
+    "license": "GPL-3.0",
+    "ignore": [
+        "**/.*",
+        "node_modules",
+        "bower_components",
+        "test",
+        "tests"
+    ]
+}
diff --git a/dist/ctg-frame.js b/dist/ctg-frame.js
@@ -0,0 +1,87 @@
+(function (Ember) {
+'use strict';
+
+var CtgFrameController = Ember.ObjectController.extend({});
+var ctgFrameComponent = Ember.Component.extend({
+    tagName: 'div',
+    captionTop: '',
+    captionBottom: '',
+    img: '',
+    didInsertElement: function() {
+        var self = this;
+        var imageObj = new Image();
+        if(this.get('img')) {
+            imageObj.onload = function() {
+                var stage = new Kinetic.Stage({
+                    container: self.get('element').id,
+                    width: imageObj.width + 48,
+                    height: imageObj.height + 48
+                });
+
+                var layer = new Kinetic.Layer();
+
+                var baseImg = new Kinetic.Image({
+                    x: 22,
+                    y: 22,
+                    image: imageObj
+                });
+
+                var captionTop = new Kinetic.Text({
+                    width: stage.getWidth() - 20,
+                    x: 10,
+                    y: stage.getHeight() - 12,
+                    text: self.get('captionTop') || '',
+                    fontSize: 28,
+                    fontFamily: 'Ubuntu',
+                    fontWeight: 'bold',
+                    fill: '#8560a8',
+                    align: 'center',
+                    wrap: 'word'
+                });
+
+                var captionBottom = new Kinetic.Text({
+                    width: stage.getWidth() - 20,
+                    x: 10,
+                    y: captionTop.getPosition().y + captionTop.getHeight() + 8,
+                    text: self.get('captionBottom') || '',
+                    fontSize: 22,
+                    fontFamily: 'Ubuntu',
+                    fill: '#FFFFFF',
+                    align: 'center',
+                    wrap: 'word'
+                });
+
+                stage.setHeight((captionTop.getPosition().y + captionTop.getHeight() + 8) + (captionBottom.getHeight() + 16));
+
+                var background = new Kinetic.Rect({
+                    x: 0,
+                    y: 0,
+                    width: stage.getWidth(),
+                    height: stage.getHeight(),
+                    fill: '#000000'
+                });
+
+                layer.add(background);
+                layer.add(baseImg);
+                layer.add(captionTop);
+                layer.add(captionBottom);
+                stage.add(layer);
+            };
+            imageObj.src = this.get('img');
+        }
+    }.observes('captionTop', 'captionBottom')
+});
+
+/* global ctgFrameComponent */
+'use strict';
+
+Ember.Application.initializer({
+    name: 'ctg-frame',
+
+    initialize: function(container, application) {
+        container.register('component:ctg-frame', ctgFrameComponent);
+        container.register('controller:ctgFrame', CtgFrameController);
+        application.inject('component:ctg-frame', 'ctgFrame', 'controller:ctgFrame');
+    }
+});
+}(window.Ember));
diff --git a/dist/ctg-frame.min.js b/dist/ctg-frame.min.js
diff --git a/gulpfile.js b/gulpfile.js
@@ -0,0 +1,22 @@
+var gulp = require('gulp');
+var concat = require('gulp-concat');
+var rename = require('gulp-rename');
+var rimraf = require('gulp-rimraf');
+var uglify = require('gulp-uglify');
+var wrap = require('gulp-wrap');
+
+gulp.task('clean-dist', function (cb) {
+    rimraf('./dist', cb);
+});
+
+gulp.task('scripts', function () {
+    gulp.src(['src/controller.js', 'src/component.js', 'src/initializer.js'])
+        .pipe(concat('ctg-frame.js'))
+        .pipe(wrap('(function (Ember) {\n<%= contents %>\n}(window.Ember));'))
+        .pipe(gulp.dest('dist'))
+        .pipe(uglify())
+        .pipe(rename('ctg-frame.min.js'))
+        .pipe(gulp.dest('dist'));
+});
+
+gulp.task('default', ['clean-dist', 'scripts']);
diff --git a/package.json b/package.json
@@ -0,0 +1,37 @@
+{
+    "name": "ctg-frame",
+    "version": "0.0.1",
+    "description": "Ember.js Component to generate images with caption.",
+    "keywords": [
+        "ember",
+        "image",
+        "generator",
+        "canvas"
+    ],
+    "license": "GPL-3.0",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/k3nsei/ctg-frame.git"
+    },
+    "bugs": {
+        "url": "https://github.com/k3nsei/ctg-frame/issues"
+    },
+    "homepage": "https://github.com/k3nsei/ctg-frame",
+    "author": "Piotr Stępniewski <[email protected]>",
+    "main": "ctg-frame.js",
+    "scripts": {
+        "test": "mocha",
+        "start": "rm -rf dist && mkdir dist && gulp && goat -e test/index.html dist"
+    },
+    "devDependencies": {
+        "ember-template-compiler": "^1.6.1",
+        "goat": "^0.4.1",
+        "gulp": "^3.8.8",
+        "gulp-concat": "^2.4.1",
+        "gulp-rename": "^1.2.0",
+        "gulp-rimraf": "^0.1.0",
+        "gulp-uglify": "^1.0.1",
+        "gulp-wrap": "^0.3.0",
+        "mocha": "^1.21.4"
+    }
+}
diff --git a/src/component.js b/src/component.js
@@ -0,0 +1,69 @@
+var ctgFrameComponent = Ember.Component.extend({
+    tagName: 'div',
+    captionTop: '',
+    captionBottom: '',
+    img: '',
+    didInsertElement: function() {
+        var self = this;
+        var imageObj = new Image();
+        if(this.get('img')) {
+            imageObj.onload = function() {
+                var stage = new Kinetic.Stage({
+                    container: self.get('element').id,
+                    width: imageObj.width + 48,
+                    height: imageObj.height + 48
+                });
+
+                var layer = new Kinetic.Layer();
+
+                var baseImg = new Kinetic.Image({
+                    x: 22,
+                    y: 22,
+                    image: imageObj
+                });
+
+                var captionTop = new Kinetic.Text({
+                    width: stage.getWidth() - 20,
+                    x: 10,
+                    y: stage.getHeight() - 12,
+                    text: self.get('captionTop') || '',
+                    fontSize: 28,
+                    fontFamily: 'Ubuntu',
+                    fontWeight: 'bold',
+                    fill: '#8560a8',
+                    align: 'center',
+                    wrap: 'word'
+                });
+
+                var captionBottom = new Kinetic.Text({
+                    width: stage.getWidth() - 20,
+                    x: 10,
+                    y: captionTop.getPosition().y + captionTop.getHeight() + 8,
+                    text: self.get('captionBottom') || '',
+                    fontSize: 22,
+                    fontFamily: 'Ubuntu',
+                    fill: '#FFFFFF',
+                    align: 'center',
+                    wrap: 'word'
+                });
+
+                stage.setHeight((captionTop.getPosition().y + captionTop.getHeight() + 8) + (captionBottom.getHeight() + 16));
+
+                var background = new Kinetic.Rect({
+                    x: 0,
+                    y: 0,
+                    width: stage.getWidth(),
+                    height: stage.getHeight(),
+                    fill: '#000000'
+                });
+
+                layer.add(background);
+                layer.add(baseImg);
+                layer.add(captionTop);
+                layer.add(captionBottom);
+                stage.add(layer);
+            };
+            imageObj.src = this.get('img');
+        }
+    }.observes('captionTop', 'captionBottom')
+});
diff --git a/src/controller.js b/src/controller.js
@@ -0,0 +1,3 @@
+'use strict';
+
+var CtgFrameController = Ember.ObjectController.extend({});
diff --git a/src/initializer.js b/src/initializer.js
@@ -0,0 +1,12 @@
+/* global ctgFrameComponent */
+'use strict';
+
+Ember.Application.initializer({
+    name: 'ctg-frame',
+
+    initialize: function(container, application) {
+        container.register('component:ctg-frame', ctgFrameComponent);
+        container.register('controller:ctgFrame', CtgFrameController);
+        application.inject('component:ctg-frame', 'ctgFrame', 'controller:ctgFrame');
+    }
+});
diff --git a/test/cat.jpg b/test/cat.jpg
diff --git a/test/index.html b/test/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Ember Starter Kit</title>
+    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
+    <link href="http://maxcdn.bootstrapcdn.com/bootswatch/3.2.0/united/bootstrap.min.css" rel="stylesheet">
+
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+    <script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
+    <script src="http://builds.emberjs.com/tags/v1.7.0/ember.js"></script>
+    <script src="./ctg-frame.js"></script>
+
+    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
+    <script src="https://rawgit.com/ericdrowell/KineticJS/master/kinetic.min.js"></script>
+</head>
+<body>
+
+<script type="text/x-handlebars">
+    <div class="container" style="margin: 20px auto;">
+        <div class="row">
+            {{outlet}}
+        </div>
+    </div>
+</script>
+
+<script type="text/x-handlebars" data-template-name="index">
+    <div class="col-md-6">
+        <form class="form-horizontal" role="form">
+            <div class="form-group">
+                <label for="ctgFrameTitle" class="col-sm-2 control-label">Title:</label>
+                <div class="col-sm-10">
+                    {{input id="ctgFrameTitle" class="form-control" type="text" value=ctgFrameTitle}}
+                </div>
+            </div>
+            <div class="form-group">
+                <label for="ctgFrameSubTitle" class="col-sm-2 control-label">Subtitle:</label>
+                <div class="col-sm-10">
+                    {{input id="ctgFrameSubTitle" class="form-control" type="text" value=ctgFrameSubTitle}}
+                </div>
+            </div>
+        </form>
+    </div>
+    <div class="col-md-6">
+        {{ctg-frame captionTop=ctgFrameTitle captionBottom=ctgFrameSubTitle img='./cat.jpg'}}
+    </div>
+</script>
+
+<script type="text/javascript">
+    var App = Ember.Application.create();
+</script>
+
+</body>
+</html>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		'use strict';

		var CtgFrameController = Ember.ObjectController.extend({});