Giter VIP home page Giter VIP logo

ui-tour's Introduction

AngularUI - The companion suite for AngularJS


Build Status

Usage

Requirements

  • AngularJS v1.0.0+ is currently required.
  • jQuery / Plugins (depends on directive). Check specific directive dependencies for more information

Installation

The repository comes with the modules pre-built and compressed into the build/ directory.

angular.module('myApp', ['ui']);

The modules can be found in the Directives and Filters folders. Check out the readme file associated with each module for specific module usage information.

Development

You do not need to build the project to use it - see above - but if you are working on it then this is what you need to know.

Requirements

  1. Install Node.js and NPM (should come with)

  2. Install local dependencies:

$ npm install
  1. Install global dependencies grunt, coffee-script, and testacular:
$ npm install -g testacular coffee-script grunt

Build Files & Run Tests

Before you commit, always run grunt to build and test everything once.

$ grunt

Test & Develop

The modules come with unit tests that should be run on any changes and certainly before commiting changes to the project. The unit tests should also provide further insight into the usage of the modules.

First, start the testacular server:

$ grunt server

Then, open your browser to http://localhost:8080 and run the watch command to re-run tests on every save:

$ grunt watch

Publishing

For core team: if you wish to publish a new version follow these steps:

  1. Bump the version number inside package.json
  2. Build and test
  3. Commit the updated package.json and build/ folder on their own commit
  4. Tag the commit: git tag v[maj].[min].[patch]
  5. Push the tag: git push [angular-ui] master --tags

ui-tour's People

Contributors

alirezamirian avatar proloser avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

ui-tour's Issues

Tooltip and custom styling

Currently there's just a simple rudimentary stylesheet. Things like arrows and positioning of tooltips haven't been tackled yet, and I would prefer to remove as much of this from the plugin as possible (instead letting people customize the css and classes of each tooltip step manually).

This must still be easily integratable with tools like bootstrap.

Go to key not working

When you set the model to a string key, it should locate what step that is and go directly to it. This does not appear to currently be working.

Change highlighting approach

Right now I have 1 div with a MASSIVE translucent border-radius (as the overlay).

A much better approach would be to use 1 simple element as a full-page translucent overlay, then create a second element that serves as the highlight box (pretty much just a transparent box with box-shadow, lower z-index than target). The target element is then set to pos:rel (if necessary) and it's z-index is boosted to a higher-than-overlay value.

How to make ui-tour to work with angular-translate?

How to make ui-tour to work with angular-translate?
For example, this piece of code does not seem to work: <a ng-click="$ctrl.openCreateSiteModal()" tour-step="home-step90" tour-step-belongs-to="teacherTour" tour-step-title="Collection of sites" tour-step-content="<p>{{'HOME-STEP90-1' | translate}}</p>" tour-step-order = "90" tour-step-placement="right" tour-step-prev-step="home-step80">

Remove jQuery Dependency

Hello. I made a plunkr of the demo.html to test out whether I can use this module. I can't seem to get it to run without including jquery. Is this intentional? It was my understanding that all angular-ui components worked natively.

New Syntax + Drop jquery

Instead, should use something like <a ui-tour="intro">...</a> which would then be used in conjunction with

<ui-tour-steps>
  <ui-tour-step name="intro">
    <!-- popup html goes here -->
  </ui-tour-step>
  <ui-tour-step name="features">...</ui-tour-step>
  <ui-tour-step name="navigation">...</ui-tour-step>
<ui-tour-steps>

This way we'd simply cache all the elements with ui-tour on them and then look them up by name (instead of using jQuery DOM selectors and target="h1:eq(2)" or other convoluted CSS selectors. In response to #7

Create new alternative syntax

In tourjs they put attributes on the DOM elements themselves. Although I believe this is something I considered, it reduces the capabilities of the content (such as the ability to put HTML into the tooltips) however it makes it easier to find the highlighted DOM elements.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.