Skip to main content

Polymer element to make a success feel to user.



Some days ago our team lead told me they want something like this. I produced one and gave it back.

But I thought I could make a stand alone custom element so that it can be reused a hundred times without writing the entire bulky code.

I published an npm package here: https://www.npmjs.com/package/successful-operation

Here is the docs:

successful-operation polymer custom element

A UI element that can be used to indicate that the operation was successful.

(version: 1.0.5.)

Just use

<successful-operation></successful-operation>

to show up the above element.

Setup Polymer and Bootstrap.

You need Polymer base files to use this component.

  1. Install Bower if you don't have : sudo npm install -g bower.
  2. Download Polymer using bower: bower install Polymer/polymer.

You also need Bootstrap v3.3.6 or higher to work this component correctly.

Install this package

npm install --save successful-operation

Dependency Locations

Verify your directory structure. (if necessary)

|
|-- successful-operation
|   |-successful-operation.html (this file)
|-- bower_components
    |-- polymer
    |   |-- polymer.html
    |-- webcomponentsjs
        |-- webcomponents-lite.min.js

Usage

<head>
    <!-- Bootstrap minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    ...
    <!-- import webcomponents-lite.min.js -->
    <script src="/path/to/bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    ...
    <!-- import the file -->
    <link rel="import" href="/path/to/successful-operation.html">
    ...
</head>
<body>
    ...
    <successful-operation attribute1="value1" attribute2="value2"></successful-operation>
    ...

    <!-- Bootstrap minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>

Attributes

By default <successful-operation></successful-operation> tag will output the default values.

Attributes Type Default value Description
header String Hello there header = "15th June 2016" will output the string at the top of the element.
title String Success title = "Upload Success" will output the string title of the element.
info_bold String Be bold info_bold = "File Uploaded! " will output the string as a strong info.
info String Normal letters info = "hello-world.json" will output the string as a normal info.
button_name String Continue button_name = "okay" will output the string on the button.
button_href String (url) http://www.google.com button_href = "https://twitter.com": when you click on the button, you will be directred to the provided link.

Example

<head>
    ...
    <!-- Bootstrap minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    ...
    <!-- import webcomponents-lite.min.js -->
    <script src="/path/to/bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    ...
    <!-- import the file -->
    <link rel="import" href="/path/to/successful-operation.html">
    ...
</head>
<body>
    ...
    <!-- default usage -->
    <successful-operation></successful-operation>

    <!-- customized usage (recommended) -->
    <successful-operation header="I am a header" title="I am the Title"></successful-operation>
    ...       

    <!-- Bootstrap minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
 
</body>

Questions ?

Found any bugs? File an issue on Github.

visit my profile to see other elements.

bye..

view raw successful-operation.md hosted with ❤ by GitHub

Comments

Post a Comment

Popular posts from this blog

Talky Messenger Documentation & Setup

( Github ) Just created a chat app that runs in Node and Socket. the attempt was worthy. Talky is a messenger app built with Node, Express, Socket, Angular & Bootstrap. It's like a server-client structure. (But obviously not like the one we done at OS lab using shared memory). It has a broadcasting structure. Talky does not keep a log on chat. i.e., It doesn't have a memory or database. When we close the browser window, chat history is lost. There I also added a basic console, protected by a password, to send real-time notifications to active clients. The name 'Talky' was suggested by a friend of mine. (hey, thank you for that. The fact is that I am not really good at naming...😝) What if sometimes your college blocks WhatsApp? Try Talky. ( There is also a website on internet in the name of 'Talky' which has no connection with this one. ) Download Talky Messenger To use Talky, all you need is 3 things: Node server Source code...
2 comments
Read more

4 tiny questions you fail easily.

Below are four (4) questions and a bonus question. You have to answer them instantly. You can't take your time, answer all of them immediately. OK?        Let's find out just how clever you really are .     Ready?  GO!!! (Scroll down)  Question 1 : You are participating in a race. You overtook the second person. What position are you in?  ......  ......  ......  ......  ......  ......  ......  ......  ......  ......   ......   ......   ......   ......   ......   ......   ......  ......  ......  ......  -first?, lol absolutely wrong! -If you overtake the second person and you take his place, you are second!  Try not to screw up in the next question.  ...
Post a Comment
Read more

How to pass variables to res.render() in Node.js

I was trying to figure out how to render a view inside a view, as I was stuck with this issue. Horrible Effects of Misplaced Extensions ;) I was using Node.js platform with ejs template engine. My index.ejs file has an included header.ejs file. Everything works well except that I can't pass values to the variable status in header.ejs. Here is my abstract code... index.ejs header.ejs app.js The most funniest solution ever! The solution is as easy as this. Just remove .ejs extension from the include command. I spent at least an entire night to figure it out.
1 comment
Read more