Assets are now local, for combination and speed

application/views/_footer.php

@@ -9,16 +9,22 @@
         </div>
     </footer>
 
-    <script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/4.1.6/js/vendor/jquery.min.js"></script>
-    <script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/4.1.6/js/vendor/custom.modernizr.min.js"></script>
-    <script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/4.1.6/js/foundation.min.js"></script>
-    <script src="http://rvera.github.io/image-picker/image-picker/image-picker.min.js"></script>
-    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
-    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.min.js"></script>
-    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/localization/messages_fi.js"></script>
-    <script src="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
-    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/css/base/jquery.ui.all.min.css">
-    <script src="<?php echo base_url("/assets/scripts.js"); ?>"></script>
+<?php
+    // Assets spark
+    assets_js(
+        array(
+            'jquery.min.js',
+            'custom.modernizr.min.js',  // Foundation flavored Modernizr
+            'foundation.min.js',        // Foundation 1.4.1
+            'image-picker.min.js',      // Image Picker 0.1.4
+            'jquery.validate.min.js',   // jQuery Validation Plugin 1.11.1
+            'additional-methods.min.js',// jQuery Validation Methods
+            'messages_fi.js',           // jQuery Validation Plugin Finnish translation
+            'jquery-ui.min.js',         // jQuery UI 1.10.3
+            'scripts.js'                // Our scripts
+        )
+    );
+?>
 
 <!-- {elapsed_time} -->
 </body>

application/views/_header.php

@@ -15,11 +15,15 @@ if (empty($page_title)) {
     <link rel="icon" href="<?php echo site_url('/favicon.ico'); ?>">
     <title><?php echo implode(" &raquo; ", $page_title); ?></title>
 <?php
-    assets_css(array(
-        'normalize.min.css',
-        'foundation.min.css',
-        'style.css'
-    ));
+    // Assets spark
+    assets_css(
+        array(
+            'normalize.min.css',
+            'foundation.min.css',
+            'jquery-ui.min.css',
+            'style.css'
+        )
+    );
 ?>
 
 </head>

assets/js/image-picker.min.js

@@ -0,0 +1,7 @@
+// Image Picker
+// by Rodrigo Vera
+//
+// Version 0.1.4
+// Full source at https://github.com/rvera/image-picker
+// MIT License, https://github.com/rvera/image-picker/blob/master/LICENSE
+(function(){var t,e,i,s,n=[].indexOf||function(t){for(var e=0,i=this.length;i>e;e++)if(e in this&&this[e]===t)return e;return-1};jQuery.fn.extend({imagepicker:function(e){return null==e&&(e={}),this.each(function(){var i;return i=jQuery(this),i.next("ul.image_picker_selector").remove(),i.data("picker",new t(this,s(e))),null!=e.initialized?e.initialized():void 0})}}),s=function(t){var e;return e={hide_select:!0,show_label:!1,initialized:void 0,changed:void 0,clicked:void 0,selected:void 0,limit:void 0,limit_reached:void 0},jQuery.extend(e,t)},i=function(t,e){return 0===jQuery(t).not(e).length&&0===jQuery(e).not(t).length},t=function(){function t(t,e){this.opts=null!=e?e:{},this.select=jQuery(t),this.multiple="multiple"===this.select.attr("multiple"),null!=this.select.data("limit")&&(this.opts.limit=parseInt(this.select.data("limit"))),this.build_and_append_picker()}return t.prototype.build_and_append_picker=function(){return this.opts.hide_select&&this.select.hide(),this.select.change({picker:this},function(t){return t.data.picker.sync_picker_with_select()}),null!=this.picker&&this.picker.remove(),this.create_picker(),this.select.after(this.picker),this.sync_picker_with_select()},t.prototype.sync_picker_with_select=function(){var t,e,i,s,n;for(s=this.picker_options,n=[],e=0,i=s.length;i>e;e++)t=s[e],t.is_selected()?n.push(t.mark_as_selected()):n.push(t.unmark_as_selected());return n},t.prototype.create_picker=function(){var t,i,s,n;for(this.picker=jQuery("<ul class='thumbnails image_picker_selector'></ul>"),this.picker_options=function(){var i,s,n,l;for(n=this.select.find("option"),l=[],i=0,s=n.length;s>i;i++)t=n[i],l.push(new e(t,this,this.opts));return l}.call(this),n=this.picker_options,i=0,s=n.length;s>i;i++)t=n[i],t.has_image()&&this.picker.append(t.node);return this.picker},t.prototype.has_implicit_blanks=function(){var t;return function(){var e,i,s,n;for(s=this.picker_options,n=[],e=0,i=s.length;i>e;e++)t=s[e],t.is_blank()&&!t.has_image()&&n.push(t);return n}.call(this).length>0},t.prototype.selected_values=function(){return this.multiple?this.select.val()||[]:[this.select.val()]},t.prototype.toggle=function(t){var e,s,l;return s=this.selected_values(),this.multiple?(l=t.value(),n.call(this.selected_values(),l)>=0?t.option.prop("selected",!1):null!=this.opts.limit?this.selected_values().length<this.opts.limit?t.option.prop("selected",!0):null!=this.opts.limit_reached&&this.opts.limit_reached():t.option.prop("selected",!0)):this.has_implicit_blanks()&&t.is_selected()?this.select.val(""):this.select.val(t.value()),e=this.selected_values(),i(s,e)||(this.select.change(),null==this.opts.changed)?void 0:this.opts.changed()},t}(),e=function(){function t(t,e,i){this.picker=e,this.opts=null!=i?i:{},this.option=jQuery(t),this.create_node()}return t.prototype.has_image=function(){return null!=this.option.data("img-src")},t.prototype.is_blank=function(){return!(null!=this.value()&&""!==this.value())},t.prototype.is_selected=function(){var t;return t=this.picker.select.val(),this.picker.multiple?jQuery.inArray(this.value(),t)>=0:this.value()===t},t.prototype.mark_as_selected=function(){return this.node.find(".thumbnail").addClass("selected")},t.prototype.unmark_as_selected=function(){return this.node.find(".thumbnail").removeClass("selected")},t.prototype.value=function(){return this.option.val()},t.prototype.label=function(){return this.option.data("img-label")?this.option.data("img-label"):this.option.text()},t.prototype.clicked=function(){return this.picker.toggle(this),null!=this.opts.clicked&&this.opts.clicked(),null!=this.opts.selected&&this.is_selected()?this.opts.selected():void 0},t.prototype.create_node=function(){var t,e;return this.node=jQuery("<li/>"),t=jQuery("<img class='image_picker_image'/>"),t.attr("src",this.option.data("img-src")),e=jQuery("<div class='thumbnail'>"),e.click({option:this},function(t){return t.data.option.clicked()}),e.append(t),this.opts.show_label&&e.append(jQuery("<p/>").html(this.label())),this.node.append(e),this.node},t}()}).call(this);

assets/js/messages_fi.js

@@ -0,0 +1,23 @@
+/*
+ * Translated default messages for the jQuery validation plugin.
+ * Locale: FI (Finnish; suomi, suomen kieli)
+ */
+(function ($) {
+	$.extend($.validator.messages, {
+		required: "Tämä kenttä on pakollinen.",
+		email: "Syötä oikea sähköpostiosoite.",
+		url: "Syötä oikea URL osoite.",
+		date: "Syötä oike päivämäärä.",
+		dateISO: "Syötä oike päivämäärä (VVVV-MM-DD).",
+		number: "Syötä numero.",
+		creditcard: "Syötä voimassa oleva luottokorttinumero.",
+		digits: "Syötä pelkästään numeroita.",
+		equalTo: "Syötä sama arvo uudestaan.",
+		maxlength: $.validator.format("Voit syöttää enintään {0} merkkiä."),
+		minlength: $.validator.format("Vähintään {0} merkkiä."),
+		rangelength: $.validator.format("Syötä vähintään {0} ja enintään {1} merkkiä."),
+		range: $.validator.format("Syötä arvo {0} ja {1} väliltä."),
+		max: $.validator.format("Syötä arvo joka on pienempi tai yhtä suuri kuin {0}."),
+		min: $.validator.format("Syötä arvo joka on yhtä suuri tai suurempi kuin {0}.")
+	});
+}(jQuery));

assets/js/scripts.js

@@ -0,0 +1,148 @@
+/* jslint node: true */
+jQuery(document).ready(function($) {
+   "use strict";
+
+    // Our Foundation trigger
+    $(document).foundation();
+
+    // Trigger jQuery validation of ecard creation form
+    $('#ecard_form').validate({
+        submitHandler: function(form) {
+            form.submit();
+        }
+    });
+
+    // Change jQuery textarea hook default behavior
+    $.valHooks.textarea = {
+        get: function( elem ) {
+            return elem.value.replace( /\r?\n/g, '\r\n' );
+        }
+    };
+
+    // Our image picker in /uusi
+    $('select.image-picker').imagepicker({ hide_select: true });
+
+    // Change the selected image to preview after user input
+    $('#ecard_form select#select_image').change(function () {
+        var imageurl;
+        $('select#select_image option:selected').each(function () {
+            imageurl = $(this).data('img-src'); // We get the image url
+        });
+        $('#previewimage').attr('src', imageurl);
+    }).change();
+
+    // Updating the message title preview element
+    $('#ecard_form #message_title').keyup(function () {
+        var message_title_preview_text;
+        message_title_preview_text = $(this).val();
+        $('div#message_title_preview').text(message_title_preview_text);
+    });
+
+    // Updating the message text preview element
+    $('#ecard_form #message_text').keyup(function () {
+        var message_text_preview_text;
+        message_text_preview_text = $(this).val();
+        $('div#message_text_preview').text(message_text_preview_text);
+    });
+
+
+    // Sizing and placement of preview elements
+    $('#message_title_preview, #message_text_preview')
+        .draggable({
+            containment: '#previewpanel',
+            scroll: false,
+            stop: function(e, ui) {
+
+                if (this.id === 'message_title_preview') {
+                    $('#placeOf_message_title_y').val(ui.position.top);
+                    $('#placeOf_message_title_x').val(ui.position.left);
+                }
+
+                if (this.id === 'message_text_preview') {
+                    $('#placeOf_message_text_y').val(ui.position.top);
+                    $('#placeOf_message_text_x').val(ui.position.left);
+                }
+            }
+        })
+        .resizable({
+            containment: '#previewpanel',
+            scroll: false,
+            stop: function(e, ui) {
+
+                if (this.id === 'message_title_preview') {
+                    $('#sizeOf_message_title_w').val(ui.size.width);
+                    $('#sizeOf_message_title_h').val(ui.size.height);
+                }
+                if (this.id === 'message_text_preview') {
+                    $('#sizeOf_message_text_w').val(ui.size.width);
+                    $('#sizeOf_message_text_h').val(ui.size.height);
+                }
+            }
+        });
+
+
+    $('#previewpanel').height( $('#previewimage').height() );
+
+    setElementPlaces();
+    checkSizesTimer();
+
+    /**
+     * checkSizesTimer changes inputs
+     * #sizeOf_image_w and #sizeOf_image_h,
+     * plus the height of #previewpanel based
+     * on the size and location of said elements
+     *
+     * this helps setting the #previewpanel height
+     * and hidden fields we use to build the ecard
+     *
+     * @author Ismo Vuorinen <ismo.vuorinen@tampere.fi>
+     */
+    function checkSizesTimer () {
+        var previewimage = $('#previewimage');
+        var previewpanel = $('#previewpanel');
+        var imagesize    = $('#previewimage');
+
+
+        $('#sizeOf_image_w').val(imagesize.width());
+        $('#sizeOf_image_h').val(imagesize.height());
+
+        var previewpanelh = previewpanel.height();
+        var previewimageh = previewimage.height();
+        if(previewimageh != previewpanelh) {
+            previewpanel.height(previewimageh);
+        }
+
+        setTimeout(checkSizesTimer, 1000); // Repeat
+    }
+
+    /**
+     * setElementPlaces sets the values we need
+     * after saving the ecard.
+     *
+     * The position and size of preview elements
+     * gets saved to database if positive integers
+     */
+    function setElementPlaces () {
+        var title = $('#message_title_preview');
+        var text  = $('#message_text_preview');
+
+        // Title and message preview box position
+        // over the chosen image
+        var title_p = title.position();
+        var text_p  = text.position();
+
+        // Position of elements
+        $('#placeOf_message_title_y').val(title_p.top);
+        $('#placeOf_message_title_x').val(title_p.left);
+        $('#placeOf_message_text_y').val(text_p.top);
+        $('#placeOf_message_text_x').val(text_p.left);
+
+        // Size of elements
+        $('#sizeOf_message_title_w').val(title.width());
+        $('#sizeOf_message_title_h').val(title.height());
+        $('#sizeOf_message_text_w').val(text.width());
+        $('#sizeOf_message_text_h').val(text.height());
+
+    }
+
+});