App by screens

by Hugo Carneiro

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<div class="modal fade" id="create-app-screens-modal" tabindex="-1" data-backdrop="static">
  <div class="modal-dialog modal-md">
    <div class="modal-content">
      <div class="modal-header">
        <!--
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <i class="fa fa-times-thin fa-2x"></i>
        </button>
      -->
        <h3 class="modal-title" id="myModalLabel">Build your own app</h3>
      </div>
      <div class="modal-body">
        <div class="creation-steps">
          <ol>
            <li class="active" data-step="1">Authentication</li>
            <li data-step="2">Data capture</li>
            <li data-step="3">Social</li>
            <li data-step="4">Interactive</li>
          </ol>
        </div>
        <div class="creation-step-content">
          <div class="creation-step-body">
            <h4>
              Select the features you require
            </h4>
            <div class="screen-options-holder">
              <!-- Options will be added here -->
            </div>
          </div>
          <div class="creation-step-controls">
            <div class="back-controls">
              <div class="btn btn-link btn-back hidden">
                <i class="fa fa-long-arrow-left" aria-hidden="true"></i> Go back
              </div>
            </div>
            <div class="forward-controls">
              <div class="btn btn-link btn-skip">Choose for me</div>
              <div class="btn btn-primary btn-continue">Continue</div>
            </div>
          </div>
          <div...

CSS

/* Modal styles */

.modal#create-app-screens-modal .modal-dialog {
  margin: calc(5.2rem + 20px) 20% 20px;
  transform: translate(0px, 0px);
  width: auto;
}

.modal#create-app-screens-modal .modal-content {
  box-shadow: none;
  border: none;
  border-radius: 0px;
}

.modal#create-app-screens-modal .modal-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 65px;
  line-height: 65px;
  border-color: rgb(227, 233, 235);
}

.modal#create-app-screens-modal .modal-header h3 {
  margin-top: 10px;
  margin-bottom: 10px;
  font-weight: 700;
  line-height: 1.1;
  color: #474974;
  font-size: 24px;
}

.modal#create-app-screens-modal .modal-header .close {
  margin-top: 0px;
  position: absolute;
  top: 0px;
  right: 0px;
  left: auto;
  width: 65px;
  height: 65px;
  border-radius: 0px;
  text-align: center;
  line-height: 1.714;
  font-size: 1.4rem;
  z-index: 1;
  pointer-events: all;
  color: rgb(153, 153, 153);
  opacity: 1;
}

.modal#create-app-screens-modal .modal-header .close:hover {
  background-color: rgb(234, 233, 236);
  color: rgb(51, 51, 51);
}

.modal#create-app-screens-modal .modal-body {
  padding: 20px 60px 0;
}

.modal#create-app-screens-modal.in {
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-backdrop.in {
  opacity: 0;
}

/* Experiment styles */
.creation-steps ol {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
}

.creation-steps ol li {
  margin-left: 30px;
  counter-increment: steps;
  color: #19cd9d;
  opacity: 0.5;
}

.creation-steps ol li:first-child {
  margin-left: 0;
}

.creation-steps ol li.active {
  color: #474974;
  opacity: 1;
}

.creation-steps ol li.active ~ li {
  color: #cccccc;
  opacity: 1;
}

.creation-steps ol li::before {
  content: counter(steps) ".";
  font-weight: bold;
  margin-right: 5px;
}

.creation-step-content {
  margin-top: 10px;
  margin-left: -60px;
  margin-right: -60px;
  padding: 30px 60px 60px;
  border-top: 1px solid rgb(227, 233,...

JavaScript

var userOrganizations = window.flOrganizations || [{
  id: 1,
  name: 'My Organization',
  region: 'eu'
}];
var API_URL = {
  eu: 'https://api.fliplet.com',
  us: 'https://us.api.fliplet.com',
  ca: 'https://ca.api.fliplet.com'
};
var currentApp = window.flUser && window.flUser.currentApp || {
  id: 13119,
  name: 'National Park',
  productionAppId: 12345
};
var stepMap = {
	min: 1,
  max: 4
};
var currentStep = 1;
var screensMap = [
  {
    group: 'Authentication',
    step: 1,
    screens: ['Login', 'Sign up', 'Logout', 'SSO Login']
  },
  {
    group: 'Data capture',
    step: 2,
    screens: ['Edit profile', 'Quiz', 'Contact form', 'Employee survey', 'Decision tree']
  },
  {
    group: 'Social',
    step: 3,
    screens: ['Chat', 'RSS feed', 'Twitter feed', 'News feed', 'Discussion forum']
  },
  {
    group: 'Interactive',
    step: 4,
    screens: ['Notifications inbox', 'Google maps', 'Featured list', 'Document library', 'Agenda']
  }
];
var nameOfScreensToCreate = ['Onboarding 1', 'Login', 'Sign up', 'News feed'];
var flipletScreens = [];

function parseError(error, defaultError) {
  var errorObject;

  if (!error) {
    return defaultError;
  }

  if (typeof error === 'string') {
    try {
      errorObject = JSON.parse(error);

      return parseError(errorObject, defaultError);
    } catch (e) {
      return error || defaultError;
    }
  }

  if (typeof error !== 'object') {
    // Number, Boolean etc.
    return error;
  }

  if (Array.isArray(error) && error.length === 1) {
    // Single element array
    return parseError(error[0], defaultError);
  }

  if (error.error) {
    return parseError(error.error);
  }

  if (error.body) {
    return parseError(error.body, defaultError);
  }

  if (error.responseJSON) {
    return parseError(error.responseJSON, defaultError);
  }

  if (error.description) {
    return parseError(error.description, defaultError);
  }

  if (error.message) {
    // Includes try...catch and thrown errors
    var message =...