tc/visible.html

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi">
<title>Visible - QA</title>
<style>
@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Lato:300italic,700italic,300,700);
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select{margin:0;padding:0}
body{position:relative;background-color:#ececec;color:#000;-webkit-text-size-adjust:none}
ul {list-style:none; padding:0px;}
body {
  font:14px/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
  color:#777;
  font-weight:300;
}

h1, h2, h3, h4, h5, h6 {
  color:#222;
}

h1, h2, h3 {
  line-height:1.1;
}

h1 {
  font-size:28px;
}

h2 {
  color:#393939;
}

h3, h4, h5, h6 {
  color:#494949;
}

a {
  color:#39c;
  font-weight:400;
  text-decoration:none;
}

a small {
  font-size:11px;
  color:#777;
  margin-top:-0.6em;
  display:block;
}

blockquote {
  border-left:1px solid #e5e5e5;
  margin:0;
  padding:0 0 0 20px;
  font-style:italic;
}

code, pre {
  font-family:Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal;
  color:#333;
  font-size:12px;
}

pre {
  padding:8px 15px;
  background: #f8f8f8;
  border-radius:5px;
  border:1px solid #e5e5e5;
  overflow-x: auto;
}

strong {
  color:#222;
  font-weight:700;
}

small {
  font-size:11px;
}

hr {
  border:0;
  background:#e5e5e5;
  height:1px;
  margin:0 0 20px;
}

#view { height:200px; overflow:hidden; padding:0px; }

#view span { border:1px solid #aaa; padding:2px; border-radius:5px; }
#view .list {
  float:left; width:100px; height:50px; border:1px solid #aaa; background-color:#eee;
  margin:10px; text-align:center; font-size:2em;
}

#view .check_visible { background-color:#ff0; border-color:#bb0; }
#view .visible { background-color:#fc0; }

#content .list {
    width:100%; height:50px;
    background-color:#eee;
    margin:5px; font-size:2em;
}
#content .check_visible { background-color:#CECEBD; border-color:#bb0; }
#content .visible { background-color:#BFDB9E; }


.ctrlbox {
  position:fixed;
  padding:20px;
  background: #F2C61B;
  right : 0px;
  top : 0px;
  z-index:2000;
}

.inline {
  display:inline-block;
}

input {
  width : 50px;
}
</style>
<script src="../bower_components/jquery/jquery.js"></script>
<script src="../bower_components/iscroll/build/iscroll.js"></script>
<script src="../src/module.js"></script>
<script src="../src/eg.js"></script>
<script src="../src/customEvent/scrollEnd.js"></script>
<script src="../src/hook/css.js"></script>
<script src="../src/class.js"></script>
<script src="../src/component.js"></script>
<script src="../src/visible.js"></script>
</head>

<body>
	<div id="view">
		<div>
<pre>
                    <span class="check_visible">GNU GENERAL PUBLIC LICENSE</span>
                       Version 3, 29 June 2007

 Copyright (C) 2007 Free Software Foundation, Inc. &lt;http://fsf.org/&gt;
 Everyone <span class="check_visible">is</span> permitted to copy and d<span class="check_visible">is</span>tribute verbatim copies
 of th<span class="check_visible">is</span> license document, but changing it <span class="check_visible">is</span> not allowed.

                            Preamble

  The GNU General Public License <span class="check_visible">is</span> a free, copyleft license for
software and other kinds of works.

  The licenses for most software and other practical works are designed
to take away your freedom to share and change the works.  By contrast,
the GNU General Public License <span class="check_visible">is</span> intended to guarantee your freedom to
share and change all versions of a program--to make sure it remains free
software for all its users.  We, the Free Software Foundation, use the
GNU General Public License for most of our software; it applies also to
any other work released th<span class="check_visible">is</span> way by its authors.  You can apply it to
your programs, too.

  When we speak of free software, we are referring to freedom, not
price.  Our General Public Licenses are designed to make sure that you
have the freedom to d<span class="check_visible">is</span>tribute copies of free software (and charge for
them if you w<span class="check_visible">is</span>h), that you receive source code or can get it if you
want it, that you can change the software or use pieces of it in new
free programs, and that you know you can do these things.

  To protect your rights, we need to prevent others from denying you
these rights or asking you to surrender the rights.  Therefore, you have
certain responsibilities if you d<span class="check_visible">is</span>tribute copies of the software, or if
you modify it: responsibilities to respect the freedom of others.

  For example, if you d<span class="check_visible">is</span>tribute copies of such a program, whether
grat<span class="check_visible">is</span> or for a fee, you must pass on to the recipients the same
freedoms that you received.  You must make sure that they, too, receive
or can get the source code.  And you must show them these terms so they
know their rights.

  Developers that use the GNU GPL protect your rights with two steps:
(1) assert copyright on the software, and (2) offer you th<span class="check_visible">is</span> License
giving you legal perm<span class="check_visible">is</span>sion to copy, d<span class="check_visible">is</span>tribute and/or modify it.

  For the developers' and authors' protection, the GPL clearly explains
that there <span class="check_visible">is</span> no warranty for th<span class="check_visible">is</span> free software.  For both users' and
authors' sake, the GPL requires that modified versions be marked as
changed, so that their problems will not be attributed erroneously to
authors of previous versions.

  Some devices are designed to deny users access to install or run
modified versions of the software inside them, although the manufacturer
can do so.  Th<span class="check_visible">is</span> <span class="check_visible">is</span> fundamentally incompatible with the aim of
protecting users' freedom to change the software.  The systematic
pattern of such abuse occurs in the area of products for individuals to
use, which <span class="check_visible">is</span> prec<span class="check_visible">is</span>ely where it <span class="check_visible">is</span> most unacceptable.  Therefore, we
have designed th<span class="check_visible">is</span> version of the GPL to prohibit the practice for those
products.  If such problems ar<span class="check_visible">is</span>e substantially in other domains, we
stand ready to extend th<span class="check_visible">is</span> prov<span class="check_visible">is</span>ion to those domains in future versions
of the GPL, as needed to protect the freedom of users.

  Finally, every program <span class="check_visible">is</span> threatened constantly by software patents.
States should not allow patents to restrict development and use of
software on general-purpose computers, but in those that do, we w<span class="check_visible">is</span>h to
avoid the special danger that patents applied to a free program could
make it effectively proprietary.  To prevent th<span class="check_visible">is</span>, the GPL assures that
patents cannot be used to render the program non-free.

  The prec<span class="check_visible">is</span>e terms and conditions for copying, d<span class="check_visible">is</span>tribution and
modification follow.

                       TERMS AND CONDITIONS

  0. Definitions.

  "Th<span class="check_visible">is</span> License" refers to version 3 of the GNU General Public License.

  "Copyright" also means copyright-like laws that apply to other kinds of
works, such as semiconductor masks.

  "The Program" refers to any copyrightable work licensed under th<span class="check_visible">is</span>
License.  Each licensee <span class="check_visible">is</span> addressed as "you".  "Licensees" and
"recipients" may be individuals or organizations.

  To "modify" a work means to copy from or adapt all or part of the work
in a fashion requiring copyright perm<span class="check_visible">is</span>sion, other than the making of an
exact copy.  The resulting work <span class="check_visible">is</span> called a "modified version" of the
earlier work or a work "based on" the earlier work.

  A "covered work" means either the unmodified Program or a work based
on the Program.

  To "propagate" a work means to do anything with it that, without
perm<span class="check_visible">is</span>sion, would make you directly or secondarily liable for
infringement under applicable copyright law, except executing it on a
computer or modifying a private copy.  Propagation includes copying,
d<span class="check_visible">is</span>tribution (with or without modification), making available to the
public, and in some countries other activities as well.

  To "convey" a work means any kind of propagation that enables other
parties to make or receive copies.  Mere interaction with a user through
a computer network, with no transfer of a copy, <span class="check_visible">is</span> not conveying.

  An interactive user interface d<span class="check_visible">is</span>plays "Appropriate Legal Notices"
to the extent that it includes a convenient and prominently v<span class="check_visible">is</span>ible
feature that (1) d<span class="check_visible">is</span>plays an appropriate copyright notice, and (2)
tells the user that there <span class="check_visible">is</span> no warranty for the work (except to the
extent that warranties are provided), that licensees may convey the
work under th<span class="check_visible">is</span> License, and how to view a copy of th<span class="check_visible">is</span> License.  If
the interface presents a l<span class="check_visible">is</span>t of user commands or options, such as a
menu, a prominent item in the l<span class="check_visible">is</span>t meets th<span class="check_visible">is</span> criterion.

  1. Source Code.

  The "source code" for a work means the preferred form of the work
for making modifications to it.  "Object code" means any non-source
form of a work.

  A "Standard Interface" means an interface that either <span class="check_visible">is</span> an official
standard defined by a recognized standards body, or, in the case of
interfaces specified for a particular programming language, one that
<span class="check_visible">is</span> widely used among developers working in that language.

  The "System Libraries" of an executable work include anything, other
than the work as a whole, that (a) <span class="check_visible">is</span> included in the normal form of
packaging a Major Component, but which <span class="check_visible">is</span> not part of that Major
Component, and (b) serves only to enable use of the work with that
Major Component, or to implement a Standard Interface for which an
implementation <span class="check_visible">is</span> available to the public in source code form.  A
"Major Component", in th<span class="check_visible">is</span> context, means a major essential component
(kernel, window system, and so on) of the specific operating system
(if any) on which the executable work runs, or a compiler used to
produce the work, or an object code interpreter used to run it.

  The "Corresponding Source" for a work in object code form means all
the source code needed to generate, install, and (for an executable
work) run the object code and to modify the work, including scripts to
control those activities.  However, it does not include the work's
System Libraries, or general-purpose tools or generally available free
programs which are used unmodified in performing those activities but
which are not part of the work.  For example, Corresponding Source
includes interface definition files associated with source files for
the work, and the source code for shared libraries and dynamically
linked subprograms that the work <span class="check_visible">is</span> specifically designed to require,
such as by intimate data communication or control flow between those
subprograms and other parts of the work.

  The Corresponding Source need not include anything that users
can regenerate automatically from other parts of the Corresponding
Source.

  The Corresponding Source for a work in source code form <span class="check_visible">is</span> that
same work.
</pre>
</div>
</div>

<ul id="content"></ul>
<script>
$(function() {
  var html = [];

  // make list
  for(var i=0; i<200; i++) {
    html.push("<li class='list check_visible'>#");
    html.push(i+1);
    html.push("</li>");
  }
  $("#content").html(html.join(""));

  var visibleView = new eg.Visible(document,{
      targetClass : "check_visible",
      expandSize : 0
  }).on("change", function(e) {
    // process visible elements
    $(e.visible).addClass("visible");

    // process invisible elements
    $(e.invisible).removeClass("visible");
  });

  // bind scroll event
  $(window).scroll(function() {
    visibleView.check(200);
  });
  
  
  if(window.IScroll) {
	  var visible = new eg.Visible("#view",{
	      targetClass : "check_visible",
	      expandSize : 0
	  }).on("change", function(e) {
	      // process visible elements
	      $(e.visible).addClass("visible");
	
	      // process invisible elements
	      $(e.invisible).removeClass("visible");
	  });
	
	try {
	  // using iscroll
	  new IScroll("#view").on("scrollEnd", function(e) {
	    visible.check(200);
	  });
	} catch(e) {
	  //console.log(e);
	}
	
	  // init check
	  visible.check();
}
  visibleView.check();
});
</script>
</body>
</html>