<repo_name>lcv-idlab/wellbeing-website<file_sep>/src/assets/js/main.js
import $ from 'jquery';
import anime from 'animejs';
import Flickity from 'flickity';
import mostVisible from 'most-visible';

mostVisible.makeJQueryPlugin( $ );
window.jQuery = $;

require('@fancyapps/fancybox');

$(() => {
  if($('.slideshow').length) {
    new Flickity('.slideshow', {
      adaptiveHeight: false,
      autoPlay: 3000,
      dragThreshold: 10
    })
  }

  if($('.newspreviews .slide').length > 2) {
    new Flickity('.newspreviews', {
      cellAlign: 'left',
      prevNextButtons: false,
      groupCells: true,
      dragThreshold: 10
    })
  }

  let menuopen = false;

  $('.hamburger').on('click', function() {

    if(menuopen === false) {
      anime({
        targets: '.mobilemenu',
        top: 0,
        easing: 'easeInOutQuart',
        duration: 400
      });

      anime({
        targets: '.hamburger path',
        stroke: ['#000', '#fff'],
        duration: 300,
        d: (el, i) => {
          switch(i) {
            case 2: return 'M3.5 3.5 L6.5 6.5';
            case 0: return 'M5 5 L5 5';
            case 1: return 'M3.5 6.5 L6.5 3.5';
          }
        },
        easing: 'linear'
      });
    } else {
      anime({
        targets: '.mobilemenu',
        top: '-100vh',
        easing: 'easeInOutQuart',
        duration: 400
      });

      anime({
        targets: '.hamburger path',
        stroke: ['#fff', '#000'],
        duration: 300,
        d: (el, i) => {
          switch(i) {
            case 0: return 'M2 3.5 L8 3.5';
            case 1: return 'M2 5 L8 5';
            case 2: return 'M2 6.5 L8 6.5';
          }
        },
        easing: 'linear'
      });
    }

    menuopen = !menuopen;
  })
})


if (window.innerWidth >= 1200) { 
  $(() => {
    let nav = $('nav');

    if(nav.find('.anchors').length) {
      let links = nav.find('.anchors a');
      let targets = links.map(function(i, el) {
        let r = $(el.getAttribute('href')).parent();
        r.data('link', el); 
        return r[0]
      });

      $(window).on('scroll', function() {
        let active = $(targets).mostVisible({percentage: true}).data('link');
        if(!$(active).hasClass('active')) {
          links.removeClass('active');
          $(active).addClass('active');
        }

        if($(window).scrollTop() > 100) {
          nav.addClass('scrolled');
        } else {
          nav.removeClass('scrolled');
        }
      });

      links.click(function(e){
        e.preventDefault();
        let target = $(this.getAttribute('href'));
        let top = target.offset().top;
        top = Math.min($('html').height() - window.innerHeight, top);
        $("html, body").stop(true).animate({
          scrollTop: top
        }, 1000);
      })
    }
  })
}

if (window.innerWidth >= 1600) {
  $(() => {
    $('body').on('mousewheel', function() {
      $('html,body').stop(true);
    })
  })
}<file_sep>/src/site/plugins/page-methods.php
<?php 

class Anchors {
  private static $anchors = [];

  public static function get() {
    return self::$anchors;
  }

  public static function from($page) {
    return self::make($page->uid(), $page->title()->html()->value);
  }

  public static function make($uid, $text) {
    self::$anchors[$uid] = $text;
    return brick('a', null, ['name' => $uid, 'id' => $uid]);
  }
}

page::$methods['anchor'] = 'Anchors::from';<file_sep>/src/site/modules/presentation/presentation.html.php
<div class="presentation">
  <?php echo $module->anchor() ?>
  <h2><?php echo $module->title()->html() ?></h2>

  <div class="organizations">
    <?php foreach ($module->organizations()->toStructure() as $org): ?>
      <div class="org">
        <h3><?php echo $org->name()->html() ?></h3>
        <?php echo $org->text()->kt() ?>
      </div>
    <?php endforeach ?>
  </div>

  <h2><?php echo $module->peopletitle()->html() ?></h2>

  <div class="people">
    <?php foreach ($module->people()->toStructure() as $person): ?>
      <div class="person">
        <div class="img">
          <?php echo $module->image($person->img()) ?>
        </div>
        <div class="name">
          <?php echo $person->name()->html() ?>
        </div>
        <div class="org">
          <?php echo $person->organization()->html() ?>
        </div>
        <div class="position">
          <?php echo $person->position()->kt() ?>
        </div>
      </div>
    <?php endforeach ?>
  </div>
</div><file_sep>/dist/site/modules/halfcolumn/halfcolumn.html.php
<div class="halfcolumn">
  <?php echo $module->anchor() ?>
  <div class="inner">
    <div class="text">
      <h2><?php echo $module->title()->html() ?></h2>
      <?php echo $module->text()->kt() ?>
    </div>
    <?php if ($module->img()->isNotEmpty()): ?>
      <div class="img">
        <?php echo $module->image($module->img())->width(600) ?>
      </div>
    <?php endif ?>
  </div>
</div><file_sep>/dist/site/templates/default.php
<?php ob_start(); ?>
  <?php echo $page->modules() ?>
<?php $content = ob_get_clean() ?>

<?php snippet('header') ?>

<?php echo $content; ?>

<?php snippet('footer') ?><file_sep>/src/site/modules/contactus/contactus.html.php
<div class="contactus">
  <?php echo $module->anchor() ?>
  <div class="inner">
    <h2><?php echo $module->title()->html() ?></h2>
    <div class="content">
      <div class="text">
        <p><?php echo $module->text()->html() ?></p>
      </div>
      <div class="contactmodule">
        <div class="form">
          <iframe src="http://lcvform.supsi.ch/form/view.php?id=64122"></iframe>
        </div>
      </div>
    </div>
  </div>
</div><file_sep>/dist/site/snippets/header.php
<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">

  <title><?php echo $site->title()->html() ?> | <?php echo $page->title()->html() ?></title>

  <?php echo js(['assets/js/vendor.js', 'assets/js/main.js']) ?>
  <?php echo css(['assets/css/style.css']) ?>

</head>
<body id="top" class="<?php echo $page->template() ?>" >
  <div class="container">

    <nav>
      <a href="<?php echo $site->url() ?>" class="logo">
        <img src="<?php echo $site->image($site->logomin()->value)->url() ?>" alt="" class="small">
        <img src="<?php echo $site->image($site->logomax()->value)->url() ?>" alt="" class="large">
      </a>
      <div class="text">
        <div class="pages">
          <?php foreach ($pages->visible() as $p): ?>
            <a class="<?php e($p->isOpen(), 'active') ?>" href="<?php echo $p->url() ?>">
              <span class="txt">        
                <?php echo $p->title()->html() ?>
              </span>
            </a>
          <?php endforeach ?>
          <a href="http://www.designforwellbeing.ch/upstage">
              <span class="txt">UpStage Toolkit</span>
          </a>
        </div>
        <?php if (count(Anchors::get())): ?>
          <div class="anchors">
            <?php foreach (Anchors::get() as $uid => $title): ?>
              <a href="#<?php echo $uid ?>"><?php echo $title ?></a>
            <?php endforeach ?>
              <a href="#top">
                <svg height="32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                   viewBox="0 -50 556 556" xml:space="preserve">
                <path fill="#3CB8B8" d="M309.8,178.1c0,0,41,41,66.4,66.4c10.8,10.8,28.4,10.8,39.3,0c1.8-1.8,3.6-3.6,5.4-5.4
                  c10.8-10.8,10.8-28.4,0-39.3c-33.2-33.2-99.2-99.2-122.2-122.2c-5.2-5.2-12.3-8.1-19.6-8.1c-0.8,0-1.6,0-2.4,0
                  c-7.4,0-14.4,2.9-19.6,8.1c-23,23-89,89-122.2,122.2c-10.8,10.8-10.8,28.4,0,39.3c1.8,1.8,3.6,3.6,5.4,5.4
                  c10.8,10.8,28.4,10.8,39.3,0c25.4-25.4,66.4-66.4,66.4-66.4s0,204.5,0,280.3c0,7.4,2.9,14.4,8.1,19.6c5.2,5.2,12.3,8.1,19.6,8.1
                  c2.8,0,5.6,0,8.4,0c7.4,0,14.4-2.9,19.6-8.1c5.2-5.2,8.1-12.3,8.1-19.6C309.8,382.6,309.8,178.1,309.8,178.1L309.8,178.1z"/>
                </svg>
              </a>
          </div>
        <?php endif ?>
      </div>
      <button class="hamburger">
        <span>toggle menu</span>
        <svg width="10" height="10" viewBox="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg">
          <path d="M2 3.5 L8 3.5" stroke-width="0.5" stroke-linecap="round" stroke="black" />
          <path d="M2 5 L8 5" stroke-width="0.5" stroke-linecap="round" stroke="black" />
          <path d="M2 6.5 L8 6.5" stroke-width="0.5" stroke-linecap="round" stroke="black" />
        </svg>
      </button>
      <div class="mobilemenu">
        <?php foreach ($pages->visible() as $p): ?>
          <a class="<?php e($p->isOpen(), 'active') ?>" href="<?php echo $p->url() ?>">
            <span class="txt">        
              <?php echo $p->title()->html() ?>
            </span>
          </a>
        <?php endforeach ?>
        <a href="http://www.designforwellbeing.ch/upstage">
          <span class="txt">UpStage Toolkit</span>
        </a>  
      </div>
    </nav><file_sep>/dist/site/modules/activities/activities.html.php
<div class="activities">
  <?php echo $module->anchor() ?>

  <div class="intro">
    <h2><?php echo $module->title()->html() ?></h2>
    <div class="row">
      <div class="col"><?php echo $module->left()->kt() ?></div>
      <div class="col"><?php echo $module->right()->kt() ?></div>
    </div>
  </div>

  <div class="phases row">
    <div class="text col">
      <?php foreach ($module->phases()->toStructure() as $phase): ?>
        <div class="phase">
          <h3>
            <div class="title">
              <?php echo $phase->title()->html() ?>
            </div>
            <div class="name">
              <?php echo $phase->name()->html() ?>
            </div>
          </h3>
          <?php echo $phase->text()->kt() ?>
        </div>
      <?php endforeach ?>
    </div>
    <div class="img col">
      <?php echo $module->image($module->img())->width(600) ?>
    </div>
  </div>
</div><file_sep>/src/site/modules/newsteaser/newsteaser.html.php
<div class="newsteaser">
  <div class="text">
    <?php echo $module->text()->kt() ?>
    <a href="<?php echo $module->buttonlink()->html() ?>" class="button"><?php echo $module->buttontext()->html() ?></a>
  </div>
  <div class="newspreviews">
    <?php foreach (page('news')->children()->visible() as $news): ?>
      <a href="<?php echo $news->url() ?>" class="slide newsarticle">
        <img src="<?php echo $news->images()->sortBy('sort', 'asc')->first()->crop(400, 300)->url() ?>" alt="">
        <div class="title"><?php echo $news->title()->html() ?></div>
        <div class="subtitle"><?php echo $news->subtitle()->html() ?></div>
      </a>
    <?php endforeach ?>
  </div>
</div><file_sep>/dist/site/modules/wot/wot.html.php
<div class="wot">
  <?php if ($module->hidetitle()->isEmpty()): ?>
    <?php echo $module->anchor() ?>
    <h2><?php echo $module->title()->html() ?></h2>
  <?php endif ?>
  <?php foreach ($module->contents()->toStructure() as $section): ?>
    <div class="section">
      <?php if ($section->sectiontitle()->isNotEmpty()): ?>
        <?php if ($section->sectionanchor()->isNotEmpty()): ?>
          <?php echo Anchors::make($section->sectionanchor()->lower()->slug()->value, $section->sectiontitle()->html()) ?>
        <?php endif ?>
        <?php if ($module->hidetitle()->isEmpty()): ?>
          <h3><?php echo $section->sectiontitle()->html() ?></h3>
        <?php else: ?>
          <h2><?php echo $section->sectiontitle()->html() ?></h2>
        <?php endif ?>
      <?php endif ?>
      <div class="row">
        <div class="col"><?php echo $section->left()->kt() ?></div>
        <div class="col"><?php echo $section->right()->kt() ?></div>
      </div>
    </div>
  <?php endforeach ?>
</div><file_sep>/src/site/modules/network/network.html.php
<div class="network">
  <?php echo $module->anchor() ?>
  <div class="inner">
    <div>
      <h2><?php echo $module->title()->html() ?></h2>
    </div>
    <div class="partnerlist">
    <?php foreach($module->partner()->toStructure() as $item): ?>
      <div class="partner">
        <h3><?php echo $item->name()->html() ?></h3>
      <div class="lowerpart">
        <div class="text">
          <?php echo $item->text()->kt() ?>
          <a href="<?php echo $item->link->url() ?>" target="_blank" class="textlink"><?php echo $item->link->url() ?></a>
        </div>
          <?php if ($item->logo()->isNotEmpty()): ?>
            <div class="img">
              <a href="<?php echo $item->link->url() ?>" target="_blank">
                <?php echo $module->image($item->logo())->width(350) ?>
              </a>
            </div>
          <?php endif ?>
        </div>
      </div>
    <?php endforeach ?>
    </div>
  </div>
</div><file_sep>/src/site/modules/slideshow/slideshow.html.php
<div class="slideshow">
  <?php foreach ($module->slides()->toStructure() as $slide): ?>
    <div class="slide">
      <?php echo $module->image($slide->img())->crop(1200, 450) ?>
      <?php if ($slide->text()->isNotEmpty()): ?>
        <div class="text">
          <?php echo $slide->text()->kt(); ?>
        </div>
      <?php endif ?>
    </div>
  <?php endforeach ?>
</div><file_sep>/dist/site/modules/singleimage/singleimage.html.php
<div class="singleimage">
  <?php echo $module->image($module->img())->width(1200) ?>
  <?php if ($module->text()->isNotEmpty()): ?>
    <div class="text">
      <div class="inner">
        <?php echo $module->text()->kt() ?>
      </div>
    </div>
  <?php endif ?>
</div><file_sep>/readme.md
# wellbeing-website
Wellbeing website

# Setup

If any problem with the gulp and npm versions, do as follow:

-> delete "node_module" folder and "package-lock.json" then run:

$ sudo npm install --unsafe-perm=true


To distribute the webiste type:

$ gulp


# Serve the website locally

Use MAMP and set the folder "dist" as document root

<file_sep>/README.md
# wellbeing-website
Wellbeing website theme
<file_sep>/dist/site/modules/lshape/lshape.html.php
<div class="lshape">
  <?php echo $module->anchor() ?>
  <h2><?php echo $module->title()->html() ?></h2>
  <div class="intro">
    <?php echo $module->intro()->kt() ?>
  </div>
  <div class="text">
    <div class="col"><?php echo $module->left()->kt() ?></div>
    <div class="col"><?php echo $module->right()->kt() ?></div>
  </div>
</div><file_sep>/src/site/modules/publications/publications.html.php
<div class="publications">
  <?php echo $module->anchor() ?>
  <h2><?php echo $module->title()->html() ?></h2>
  <div class="text">
    <?php echo $module->text()->kt() ?>
  </div>
</div><file_sep>/gulpfile.js
var gulp = require('gulp'),
  postcss = require('gulp-postcss'),
  stylus = require('gulp-stylus'),
  sourcemaps = require('gulp-sourcemaps'),
  lost = require('lost'),
  fontMagician = require('postcss-font-magician'),
  autoprefixer = require('autoprefixer'),
  watch = require('gulp-watch'),
  browserify = require('browserify'),
  source = require('vinyl-source-stream'),
  buffer = require('vinyl-buffer')
  uglify = require('gulp-uglify'),
  gutil = require('gulp-util'),
  resolve = require('resolve');
  nano = require('cssnano');


var fs = require('fs');
var path = require('path');

//var vendorScripts = ['jquery', '@fancyapps/fancybox', 'flickity', 'animejs'];
var vendorScripts = Object.keys(require('./package').dependencies);

var styleSrc = 'src/assets/css/style.styl';
var panelStyleSrc = 'src/assets/css/panel.styl';
var styleDest = 'dist/assets/css';

var stylesPaths = [
  path.join(__dirname, 'node_modules'),
  path.join(__dirname, 'src/site/modules')
]

var jsSrc = 'src/assets/js/main.js';
var jsDest = 'dist/assets/js';

gulp.task('panelstyles', function() {
  return gulp.src(panelStyleSrc)
    .pipe(sourcemaps.init())
    .pipe(stylus({
      paths: stylesPaths,
      'include css': true
    }))
    .pipe(postcss([
      lost(),
      autoprefixer(),
      fontMagician(),
      nano({
        discardComments: {
          removeAll: true
        }
      })
    ]))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest(styleDest));
});

gulp.task('styles', function() {
  return gulp.src(styleSrc)
    .pipe(sourcemaps.init())
    .pipe(stylus({
      paths: stylesPaths,
      'include css': true
    }))
    .pipe(postcss([
      lost(),
      autoprefixer(),
      fontMagician(),
      nano({
        discardComments: {
          removeAll: true
        }
      })
    ]))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest(styleDest));
});

gulp.task('scripts:vendor', function() {
  var b = browserify({
    debug: true
  });

  vendorScripts.forEach(function(id) {
    b.require(resolve.sync(id), {
      expose: id
    });
  });

  return b.bundle()
    .pipe(source('vendor.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({loadMaps: true}))
      .pipe(uglify())
      .on('error', gutil.log)
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest(jsDest));
});

gulp.task('scripts:app', function() {
  var b = browserify(jsSrc, {debug: true})
    .transform('babelify', {presets: ['es2015']});

  vendorScripts.forEach(b.external.bind(b));

  return b.bundle()
    .pipe(source('main.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({loadMaps: true}))
      .pipe(uglify())
      .on('error', gutil.log)
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest(jsDest));
})

gulp.task('scripts', ['scripts:vendor', 'scripts:app']);

gulp.task('static', function () {
    return watch([
        'src/**/*',
        'src/**/.*/**/*',
        '!src/content/**/*',
        '!src/(assets)/**/(*.js|*.styl)'
      ], { ignoreInitial: false }, function(vinyl) {
      if(vinyl.event == 'unlink') {
        fs.unlink(vinyl.path, function(err) {
          console.log('UNLINK: ' + vinyl.path);
        });
      }
    }).pipe(gulp.dest('dist'));
});

gulp.watch('src/**/*.styl', ['styles', 'panelstyles']);
gulp.watch('src/**/*.js', ['scripts:app']);

gulp.task('default', ['static', 'scripts', 'styles', 'panelstyles']);<file_sep>/dist/site/config/config.php
<?php

c::set('license', 'put your license key here');

c::set('debug', $_SERVER['HTTP_HOST'] == 'localhost');
c::set('panel.stylesheet', 'assets/css/panel.css');
<file_sep>/src/site/snippets/footer.php

    <footer>
      <div class="text">
        <?php echo $site->footertext()->kt() ?>
      </div>
      <div class="logos">

        <?php foreach ($site->logos()->toStructure() as $logo): ?>
          <a href="<?php echo $logo->website()->html() ?>">
            <img src="<?php echo $site->image($logo->logo())->url() ?>" alt="">
          </a>
        <?php endforeach ?>
      </div>
    </footer>
  </div>

  <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
   
    ga('create', 'UA-101038933-1', 'auto');
    ga('send', 'pageview');
   
  </script>

</body>
</html><file_sep>/src/site/modules/getinvolved/getinvolved.html.php
<div class="getinvolved">
  <?php echo $module->anchor() ?>
  <div class="inner">
    <div class="maintitle">
      <h2><?php echo $module->maintitle()->html() ?></h2>
      <p><?php echo $module->text()->html() ?></p>
    </div>

    <div class="contacts">
    <?php foreach($module->survey()->toStructure() as $item): ?>
      <div class="contactform">
        <h3><?php echo $item->title()->html() ?></h3>
        <div class="wwww">
          <h4>What:</h4>
          <?php echo $item->what()->html() ?>
        </div> 
        <div class="wwww">
          <h4>Who:</h4>
          <?php echo $item->who()->html() ?>
        </div>
        <div class="wwww">
          <h4>When:</h4>
          <?php echo $item->when()->html() ?>
        </div>
        <div class="wwww">
          <h4>Where:</h4>
          <?php echo $item->where()->html() ?>
        </div>
        <div class="linkcontact">
          <?php if($item->link()->isNotEmpty() and $item->linktext() != "Contact us"): ?>
            <a href="<?php echo $item->link()->url() ?>" class="button">
                <?php echo $item->linktext()->html() ?>
            </a>
          <?php elseif($item->linktext() == "Contact us"): ?>
            <a href="/contact-us" class="button">
                <?php echo $item->linktext()->html() ?>
            </a>
          <?php else: ?>
              <?php echo $item->linktext()->html() ?>
          <?php endif ?>
        </div>       
      </div>
    <?php endforeach ?>
    </div>

    <div class="lasttext">
      <?php if($module->lasttext()->isNotEmpty()): ?>
        <?php echo $module->lasttext()->kt()->html() ?>
      <?php endif ?>
    </div>
  </div>
</div><file_sep>/src/site/templates/article.php
<?php snippet('header') ?>

<article class="news">
  <?php if (count($page->images()) > 0): ?>
    <?php $firstImage = $page->images()->sortBy('sort', 'asc')->first(); ?>
    <a class="first-image" data-fancybox="gallery" href="<?php echo $firstImage->resize(1900, 1200)->url() ?>">  
      <?php echo $firstImage->crop(1200, 450) ?>
    </a>
  <?php endif ?>
  
  <div class="row">
    <div class="col">
      <div class="text">
        <h1><?php echo $page->title()->html() ?></h1>
        <div class="subtitle"><?php echo $page->subtitle()->html() ?></div>
        <?php echo $page->text()->kt() ?>
      </div>
    </div>
    <div class="col">
      <?php if (count($page->images()) > 1): ?>
        <div class="gallery">
          <?php foreach ($page->images()->sortBy('sort', 'asc')->offset(1) as $img): ?>
            <a data-fancybox="gallery" href="<?php echo $img->resize(1900, 1200)->url() ?>">
              <?php echo $img->crop(400,400) ?>
            </a>
          <?php endforeach ?>
        </div>
      <?php endif ?>
    </div>
  </div>
</article>

<?php snippet('footer') ?>