Merge pull request #1389 from normanjaeckel/BowerAndGulp

Used Bower and gulp to manage third party JS and CSS libraries

.gitignore

@@ -7,12 +7,17 @@
 .virtualenv/*
 .venv/*
 
-# Development user data (settings, database, media, search index)
+# Node modules
+node_modules/*
+
+# Development user data (settings, database, media, search index, static files)
 settings.py
 !tests/settings.py
 database.sqlite
 media/*
 whoosh_index/*
+bower_components/*
+openslides/static/*
 
 # Package building
 docs/_build/*

.travis.yml

@@ -2,7 +2,11 @@ language: python
 python:
   - "3.3"
   - "3.4"
-install: "pip install -r requirements.txt"
+install:
+  - "pip install -r requirements.txt"
+  - "npm install"
+  - "node_modules/.bin/bower install"
+  - "node_modules/.bin/gulp --production"
 script:
   - "DJANGO_SETTINGS_MODULE='tests.settings' coverage run ./manage.py django test"
   - "coverage report -m --fail-under=80"

CHANGELOG

@@ -14,6 +14,8 @@ Other:
 - Refactoring of the participant app. Now called 'users'.
 - Added Django's application configuration. Refactored loading of signals,
   template signals and slides.
+- Used Bower and gulp to manage third party JavaScript and Cascading Style
+  Sheets libraries.
 
 
 Version 1.7 (unreleased)

README.rst

@@ -179,31 +179,26 @@ Installation and start of the development version
 
 1. Check requirements
 
-   Follow step 1 in the correspondent instruction in section III.
+   You need to have `Python 3 (>=3.3) <https://www.python.org/>`_, `Node.js
+   (>=0.10) <https://nodejs.org/>`_ and `Git <http://git-scm.com/>`_
+   installed. See also step 1 in the correspondent instruction in section
+   III.
 
 2. Get OpenSlides source code
 
    Clone current master version from `OpenSlides' GitHub repository
-   <https://github.com/OpenSlides/OpenSlides>`_. This requires `Git
-   <http://git-scm.com/>`_.
+   <https://github.com/OpenSlides/OpenSlides/>`_::
 
-   For example for Ubuntu run::
+       cd ...  # Go to a nice place in your filesystem.
+       git clone https://github.com/OpenSlides/OpenSlides.git
+       cd OpenSlides
 
-       $ sudo apt-get install git
-       $ git clone git://github.com/OpenSlides/OpenSlides.git
-       $ cd OpenSlides
-
-   For Windows you can use GitBash::
-
-       > cd ...  # Go to a nice place in your filesystem.
-       > git clone git://github.com/OpenSlides/OpenSlides.git
-       > cd OpenSlides
-
-3. Setup a virtual environment with Virtual Python Environment builder (optional)
+3. Setup and activate a virtual environment with Virtual Python Environment
+   builder (optional)
 
    Follow step 2 in the correspondent instruction in section III.
 
-4. Install all required python packages
+4. Install all required Python packages
 
    For Unix and Mac OS X run::
 
@@ -213,15 +208,42 @@ Installation and start of the development version
 
        > easy_install  # Insert all packages from requirements.txt and requirements_production.txt here
 
-5. Start OpenSlides
+5. Install all npm and bower packages
 
-   To start OpenSlides use the command line script::
+   For Unix and Mac OS X run::
+
+       $ npm install
+       $ node_modules/.bin/bower install
+
+   For Windows run::
+
+       > npm install
+       > node_modules\.bin\bower install
+
+6. Concat and copy all third party JavaScript and Cascading Style Sheets
+   libraries
+
+   For Unix and Mac OS X run::
+
+       $ node_modules/.bin/gulp
+
+   For Windows run::
+
+       > node_modules\.bin\gulp
+
+7. Create a development settings file
+
+   Use the command-line interface::
 
        python manage.py create-dev-settings
 
+8. Start OpenSlides
+
+   Use the command-line interface::
+
        python manage.py start --settings settings.py
 
-   To get help on the command line options run::
+   To get help on the command-line options run::
 
        python manage.py --help
 

bower.json

@@ -0,0 +1,19 @@
+{
+    "name": "OpenSlides",
+    "private": true,
+    "dependencies": {
+        "bootstrap": "2.3.2",
+        "jquery": "1.11.2",
+        "jquery.cookie" : "1.4.1"
+    },
+    "overrides": {
+        "bootstrap": {
+            "main": [
+                "docs/assets/js/bootstrap.js",
+                "docs/assets/css/bootstrap.css",
+                "img/glyphicons-halflings.png",
+                "img/glyphicons-halflings-white.png"
+            ]
+        }
+    }
+}

gulpfile.js

@@ -0,0 +1,58 @@
+/*!
+ * Gulp tasks for development and production.
+ *
+ * Run
+ *
+ *      $ ./node_modules/.bin/gulp
+ *
+ * for development and
+ *
+ *      $ ./node_modules/.bin/gulp --production
+ *
+ * for production mode.
+ */
+
+var argv = require('yargs').argv,
+    gulp = require('gulp'),
+    concat = require('gulp-concat'),
+    gulpif = require('gulp-if'),
+    mainBowerFiles = require('main-bower-files'),
+    minifyCSS = require('gulp-minify-css'),
+    path = require('path'),
+    uglify = require('gulp-uglify');
+
+// Directory where the results go
+var output_directory = path.join('openslides', 'static');
+
+// Catches all JavaScript files from all bower components and concats them to
+// one file js/openslides-libs.js. In production mode the file is uglified.
+gulp.task('js', function() {
+    return gulp.src(mainBowerFiles({
+            filter: /\.js$/
+        }))
+        .pipe(concat('openslides-libs.js'))
+        .pipe(gulpif(argv.production, uglify()))
+        .pipe(gulp.dest(path.join(output_directory, 'js')));
+});
+
+// Catches all CSS files from all bower components and concats them to one file
+// css/openslides-libs.css. In production mode the file is uglified.
+gulp.task('css', function() {
+    return gulp.src(mainBowerFiles({
+            filter: /\.css$/
+        }))
+        .pipe(concat('openslides-libs.css'))
+        .pipe(gulpif(argv.production, minifyCSS()))
+        .pipe(gulp.dest(path.join(output_directory, 'css')));
+});
+
+// Catches all PNG image files from all bower components.
+gulp.task('img', function() {
+    return gulp.src(mainBowerFiles({
+            filter: /\.png$/
+        }))
+        .pipe(gulp.dest(path.join(output_directory, 'img')));
+});
+
+// Gulp default task. Runs all other tasks before.
+gulp.task('default', ['js', 'css', 'img'], function() {});

openslides/core/static/js/jquery/jquery.cookie.min.js

@@ -1,11 +0,0 @@
-/*!
- * jQuery Cookie Plugin v1.4.0
- * https://github.com/carhartl/jquery-cookie
- *
- * Copyright 2013 Klaus Hartl
- * Released under the MIT license
- */
-(function(factory){if(typeof define==="function"&&define.amd)define(["jquery"],factory);else if(typeof exports==="object")factory(require("jquery"));else factory(jQuery)})(function($){var pluses=/\+/g;function encode(s){return config.raw?s:encodeURIComponent(s)}function decode(s){return config.raw?s:decodeURIComponent(s)}function stringifyCookieValue(value){return encode(config.json?JSON.stringify(value):String(value))}function parseCookieValue(s){if(s.indexOf('"')===0)s=s.slice(1,-1).replace(/\\"/g,
-'"').replace(/\\\\/g,"\\");try{s=decodeURIComponent(s.replace(pluses," "));return config.json?JSON.parse(s):s}catch(e){}}function read(s,converter){var value=config.raw?s:parseCookieValue(s);return $.isFunction(converter)?converter(value):value}var config=$.cookie=function(key,value,options){if(value!==undefined&&!$.isFunction(value)){options=$.extend({},config.defaults,options);if(typeof options.expires==="number"){var days=options.expires,t=options.expires=new Date;t.setTime(+t+days*864E5)}return document.cookie=
-[encode(key),"=",stringifyCookieValue(value),options.expires?"; expires="+options.expires.toUTCString():"",options.path?"; path="+options.path:"",options.domain?"; domain="+options.domain:"",options.secure?"; secure":""].join("")}var result=key?undefined:{};var cookies=document.cookie?document.cookie.split("; "):[];for(var i=0,l=cookies.length;i<l;i++){var parts=cookies[i].split("=");var name=decode(parts.shift());var cookie=parts.join("=");if(key&&key===name){result=read(cookie,value);break}if(!key&&
-(cookie=read(cookie))!==undefined)result[name]=cookie}return result};config.defaults={};$.removeCookie=function(key,options){if($.cookie(key)===undefined)return false;$.cookie(key,"",$.extend({},options,{expires:-1}));return!$.cookie(key)}});

openslides/core/templates/base.html

@@ -9,7 +9,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{% block title %}{% get_config 'event_name' %}{% endblock %}</title>
     <!-- styles -->
-    <link href="{% static 'css/bootstrap.min.css' %}" type="text/css" rel="stylesheet" />
+    <link href="{% static 'css/openslides-libs.css' %}" type="text/css" rel="stylesheet" />
     <link href="{% static 'css/bootstrap-responsive.min.css' %}" type="text/css" rel="stylesheet" />
     <link href="{% static 'css/jquery-ui/jquery-ui.custom.min.css'%}" type="text/css" rel="stylesheet" />
     <link href="{% static 'css/base.css' %}" type="text/css" rel="stylesheet" />
@@ -125,10 +125,8 @@
     {% include 'core/chatbox.html' %}
 
     <!-- JavaScript (Placed at the end of the document so the pages load faster) -->
-    <script src="{% static 'js/jquery/jquery.min.js' %}" type="text/javascript"></script>
-    <script src="{% static 'js/jquery/jquery.cookie.min.js' %}" type="text/javascript"></script>
+    <script src="{% static 'js/openslides-libs.js' %}" type="text/javascript"></script>
     <script src="{% static 'js/jquery/jquery-ui.custom.min.js' %}" type="text/javascript"></script>
-    <script src="{% static 'js/bootstrap.min.js' %}" type="text/javascript"></script>
     <script src="{% static 'js/sockjs-0.3.min.js' %}" type="text/javascript"></script>
     <script src="{% static 'js/utils.js' %}" type="text/javascript"></script>
     <script src="{% static 'js/chatbox.js' %}" type="text/javascript"></script>

openslides/global_settings.py

@@ -57,6 +57,9 @@ STATICFILES_FINDERS = (
     'django.contrib.staticfiles.finders.AppDirectoriesFinder',
 )
 
+STATICFILES_DIRS = [
+    os.path.join(SITE_ROOT, 'static')]
+
 # List of callables that know how to import templates from various sources.
 TEMPLATE_LOADERS = (
     'django.template.loaders.filesystem.Loader',

openslides/projector/templates/projector.html

@@ -5,11 +5,11 @@
 <!DOCTYPE html>
 <html lang="{{LANGUAGE_CODE}}">
     <head>
-        <link href="{% static 'css/bootstrap.min.css' %}" type="text/css" rel="stylesheet">
+        <link href="{% static 'css/openslides-libs.css' %}" type="text/css" rel="stylesheet">
         <link href="{% static 'css/projector.css' %}" type="text/css" rel="stylesheet">
         <link  href="{% static 'img/favicon.png' %}" type="image/png" rel="shortcut icon">
         <title>{% block title %}{% trans 'Projector' %} – {{ 'event_name'|get_config }}{% endblock %}</title>
-        <script type="text/javascript" src="{% static 'js/jquery/jquery.min.js' %}"></script>
+        <script type="text/javascript" src="{% static 'js/openslides-libs.js' %}"></script>
         <script type="text/javascript" src="{% static 'js/sockjs-0.3.min.js' %}"></script>
         <script type="text/javascript" src="{% static 'js/projector.js' %}"></script>
         <script type="text/javascript">

openslides/utils/settings.py.tpl

@@ -1,49 +1,66 @@
-# -*- coding: utf-8 -*-
-#
-# Settings file for OpenSlides
-#
+"""
+Settings file for OpenSlides
+
+For more information on this file, see
+https://docs.djangoproject.com/en/1.7/topics/settings/
+
+For the full list of settings and their values, see
+https://docs.djangoproject.com/en/1.7/ref/settings/
+"""
 
 import os
 from openslides.global_settings import *
 %(import_function)s
+
 # Path to the directory for user specific data files
+
 OPENSLIDES_USER_DATA_PATH = %(openslides_user_data_path)s
 
-# Use 'DEBUG = True' to get more details for server errors. Default for releases: False
-DEBUG = %(debug)s
-TEMPLATE_DEBUG = DEBUG
 
-# Make this unique, and don't share it with anybody.
+# SECURITY WARNING: Keep the secret key used in production secret!
+
 SECRET_KEY = %(secret_key)r
 
-# Database settings. Change this to use MySQL or PostgreSQL
-DATABASES = {
-    'default': {
-        'ENGINE': 'django.db.backends.sqlite3',
-        'NAME': os.path.join(OPENSLIDES_USER_DATA_PATH, 'database.sqlite'),
-        'USER': '',
-        'PASSWORD': '',
-        'HOST': '',
-        'PORT': ''}}
 
-# Add OpenSlides plugins to this list (see example entry in comment)
+# Use 'DEBUG = True' to get more details for server errors.
+# SECURITY WARNING: Don't run with debug turned on in production!
+
+DEBUG = True
+TEMPLATE_DEBUG = DEBUG
+
+
+# OpenSlides plugins
+# Add plugins to this list (see example entry in comment).
+
 INSTALLED_PLUGINS += (
 #    'pluginname',
 )
 
 INSTALLED_APPS += INSTALLED_PLUGINS
 
+
+# Database
+# Change this to use MySQL or PostgreSQL.
+# See https://docs.djangoproject.com/en/1.7/ref/settings/#databases
+
+DATABASES = {
+    'default': {
+        'ENGINE': 'django.db.backends.sqlite3',
+        'NAME': os.path.join(OPENSLIDES_USER_DATA_PATH, 'database.sqlite')
+    }
+}
+
+
 # Some other settings
+
 TIME_ZONE = 'Europe/Berlin'
 
 MEDIA_ROOT = os.path.join(OPENSLIDES_USER_DATA_PATH, 'media', '')
 
-HAYSTACK_CONNECTIONS['default']['PATH'] = os.path.join(OPENSLIDES_USER_DATA_PATH, 'whoosh_index', '')
-
 TEMPLATE_DIRS = (
     os.path.join(OPENSLIDES_USER_DATA_PATH, 'templates'),
-    os.path.join(SITE_ROOT, 'templates'))
+)
 
-STATICFILES_DIRS = (
-    os.path.join(OPENSLIDES_USER_DATA_PATH, 'static'),
-    os.path.join(SITE_ROOT, 'static'))
+STATICFILES_DIRS = [os.path.join(OPENSLIDES_USER_DATA_PATH, 'static')] + STATICFILES_DIRS
+
+HAYSTACK_CONNECTIONS['default']['PATH'] = os.path.join(OPENSLIDES_USER_DATA_PATH, 'whoosh_index', '')

package.json

@@ -0,0 +1,14 @@
+{
+    "name": "OpenSlides",
+    "private": true,
+    "devDependencies": {
+        "bower": "~1.3.12",
+        "gulp": "~3.8.10",
+        "gulp-concat": "~2.4.3",
+        "gulp-if": "~1.2.5",
+        "gulp-minify-css": "~0.3.11",
+        "gulp-uglify": "~1.0.2",
+        "main-bower-files": "~2.4.1",
+        "yargs": "~1.3.3"
+    }
+}

tests/settings.py

@@ -1,53 +1,67 @@
-#
-# Settings file for OpenSlides' tests
-#
+"""
+Settings file for OpenSlides' tests
+"""
 
 import os
 from openslides.global_settings import *  # noqa
 
 # Path to the directory for user specific data files
+
 OPENSLIDES_USER_DATA_PATH = os.path.realpath(os.path.dirname(__file__))
 
-# Use 'DEBUG = True' to get more details for server errors. Default for releases: False
-DEBUG = False
-TEMPLATE_DEBUG = DEBUG
 
-# Make this unique, and don't share it with anybody.
+# SECURITY WARNING: Keep the secret key used in production secret!
+
 SECRET_KEY = 'secret'
 
-# Database settings. Change this to use MySQL or PostgreSQL
-DATABASES = {
-    'default': {
-        'ENGINE': 'django.db.backends.sqlite3',
-        'NAME': '',
-        'USER': '',
-        'PASSWORD': '',
-        'HOST': '',
-        'PORT': ''}}
 
-# Add OpenSlides plugins to this list
-INSTALLED_PLUGINS = (
+# Use 'DEBUG = True' to get more details for server errors.
+# SECURITY WARNING: Don't run with debug turned on in production!
+
+DEBUG = True
+TEMPLATE_DEBUG = DEBUG
+
+
+# OpenSlides plugins
+# Add plugins to this list.
+
+INSTALLED_PLUGINS += (
     'tests.utils',
 )
 
 INSTALLED_APPS += INSTALLED_PLUGINS
 
+
+# Database
+# Change this to use MySQL or PostgreSQL.
+# See https://docs.djangoproject.com/en/1.7/ref/settings/#databases
+
+DATABASES = {
+    'default': {
+        'ENGINE': 'django.db.backends.sqlite3',
+        'NAME': ''
+    }
+}
+
+
 # Some other settings
+
 TIME_ZONE = 'Europe/Berlin'
 
 MEDIA_ROOT = os.path.join(OPENSLIDES_USER_DATA_PATH, '')
 
-HAYSTACK_CONNECTIONS['default']['STORAGE'] = 'ram'
-
 TEMPLATE_DIRS = (
     os.path.join(OPENSLIDES_USER_DATA_PATH, 'templates'),
-    os.path.join(SITE_ROOT, 'templates'))
+)
 
-STATICFILES_DIRS = (
-    os.path.join(OPENSLIDES_USER_DATA_PATH, 'static'),
-    os.path.join(SITE_ROOT, 'static'))
+STATICFILES_DIRS.insert(0, os.path.join(OPENSLIDES_USER_DATA_PATH, 'static'))
+
+HAYSTACK_CONNECTIONS['default']['STORAGE'] = 'ram'
+
+
+# Special test settings
+# Use a faster password hasher.
 
-# Use a faster passwort hasher
 PASSWORD_HASHERS = (
     'django.contrib.auth.hashers.MD5PasswordHasher',
 )